[Benjamin HParticipant]

Those buttons are just links to different pages on the site…

I am trying to get the mobile menu button to display when the main menu disappears because it is too wide. I can’t seem to find the number to adjust to fix that. Here is a screenshot of it from my iPad. Notice there is no button the right hand side.

http://www.lvbaptist.org/beta/resources/

[RadModerator]

Hi Benjamin,

It’s caused by this css.

.x-btn-navbar {
margin-top: -80px;
top: 0;
}

Change it to this :

.x-btn-navbar {
margin-top: 20px;
top: 0;
}

Cheers!

[Benjamin HParticipant]

#1 That fixed the problem with it not showing up, but if you look at the iPhone screenshot you can see the button is very far down the page. I want it to be to the right of the logo as previously

#2 As you see in the second screenshot the iPad is showing the main menu items (it does this correctly on the iPhone too) but it will not expand when tapped on to display the sub menu items

[ChristopherModerator]

Hi there,

#1
Please try this code:

@media (max-width:368px){
.x-btn-navbar {
margin-top: 0;
}
}

#2 Would you check this thread:http://theme.co/x/member/forums/topic/mobile-navigation-2/#post-71005

Thank you.

[Benjamin HParticipant]

Thank you. I added that code for #1, but I think the logo is interfering with it because when I hold my iPhone in landscape it will show the button in line with the logo, but when it is portrait it drops below and pushes everything beneath that. Also, why is the logo no longer centered? Thank you!

[Nabeel AModerator]

Hi Benjamin,

Please add the following CSS code via Appearance > Customize > Custom > CSS:

@media screen and (max-width: 980px){
.sub-menu {
display: block !important;
visibility: visible !important;
}
}

@media screen and (max-width: 370px){
.x-brand img {
width: 200px;
}
}

Let us know how this goes!

[Author]

Posts