Mobile menu issue

[aaustin69]

Hi, I am not sure when this started happening, but when I view my website via my iPhone the main menu is way out of alignment. I have attached a screen shot so you can view. As you can see, the menu is dropped low and overlapping other information. I clicked on the menu and then took the screen shot with my phone, so that you can see how it looks when the menu is open.

I have custom css to remove the top menu bar in my theme options, but this is not what is causing the issue.

Any help would be appreciated.

Thanks, Alan

[Kyle – SUPPORT]

Hi

Please could I see your link to that I can test the issue?

– Kyle

[aaustin69]

Yes, it’s http://marketgrouprealty.com.

Thanks.

[Kyle – SUPPORT]

It’s because you have this is your custom css:

#header-section {
 height: 50px;
 padding: 10px 4;
}

If you need it, then change it to:

@media only screen and (min-width: 1024px) { 
#header-section {
 height: 50px;
 padding: 10px 4;
}
}

– Kyle

[aaustin69]

Perfect, thank you!

One other question. I have custom css to remove the top nav bar in the mobile menu, but the social icons in the top still show up. Is there a way to remove these icons from the mobile menu as well?

Alan

[Kyle – SUPPORT]

Sorry your link doesn’t seem to be working for me now, please check

– Kyle

[aaustin69]

Hi Kyle, I just checked and the link seems to be working fine on my end. I have not made any changes since the last time.

Can you check again?

Thanks, Alan

[Mohammad – SUPPORT]

Hi,
Please try this css code

@media only screen and (max-width: 767px) {
#top-bar  {display: none!important;}
}

Thanks

[aaustin69]

Thanks Mohammad, that worked.

One other question – is there a way to also remove the search bar on the mobile menu as well (just the mobile menu and not the regular website) ?

Thanks, Alan

[aaustin69]

Hi Mohammad, I just figured out how to remove the search from the mobile menu by using the following code:

/*Mobile Menu – Remove search bar from mobile menu*/
@media only screen and (max-width: 767px) {
#nav-search {
display: none!important;
}
}

The only issue is that it now creates a lot of space between the main menu dropdown and the web content (revolution slider in this case). Is there any way to reduce the amount of space under the mobile menu?

Thanks, Alan

[Mohammad – SUPPORT]

Hi,
I am not able to see your website always . Everytime need to ask to live your website that makes work slow.
Thanks 🙂
With Best Regards
Swift Ideas

[aaustin69]

Sorry Mohammad, should be good now.

[Mohammad – SUPPORT]

Hi,
Please try out this css code

@media only screen and (max-width: 767px) {
#header-section{height:100px !important}
}

Thanks 🙂
With Best Regards
Swift Ideas

[aaustin69]

Hi Mohammad, I tried that. It reduces the space, but then causes a problem when I open the nav menu. As you can see from the attached photo, the menu items now overlap the other content and are difficult to read.

Alan

[Mohammad – SUPPORT]

Hi,
Please use this code

@media only screen and (max-width: 767px) {
#header-section{height:100px !important}
#main-navigation{background:rgba(255, 255, 255, 0.9);}
}

It will fix your issue sure.
Thanks 🙂
With Best Regards
Swift Ideas