Archived topic
Mobile Nav at different width not working right
7 replies · Started by Christian on January 4, 2019
Hi there, I need your help. I've followed this https://docs.generatepress.com/article/mobile-navigation/#initiating-the-mobile-navigation-at-a-different-width to change the starting of my Mobile Navigation and set the Mobile Nav to start at 1166px. The problem is that when i'm at 1166px the hamburguer icon goes to the middle of the screen and below my logo, and just when it arrives to 768px everything gets in the right place (Hamburguer icon to the Right and Logo to the left). What am i doing wrong? I need that when i'm on 1166 and below it looks exactly the same as when it arrives to 768px and below. Thanks.
Hi there,
add this CSS within your media query:
button.menu-toggle {
width: auto;
float: right;
}Thanks David, it solved the issue almost completely. Now, the only thing that is missing is that the Slide Out Menu is not working right. When it's at 1166px and you click the hamburguer icon, the Slide Out Menu moves everything below the menu (as when you use normal Mobile Menu instead of Slide Out), but when i'm at 768px everything works right.
Is that on any particular device or browser? I am have tested on Destkop Chrome, Safari and FF and not seeing the issue
I'm using Chrome (updated version). I'm sending 2 images 'cause maybe i'm not explaining well (since English is not my native language).
Slide out looks wrong at 1166px:
https://drive.google.com/file/d/1DIrJDuvXMlK64weHq0-z6T-6VIPhpi5r/view
Slide Out looks right at 768px and below:
https://drive.google.com/file/d/1dIgbML11Mu6jcBk4tojzwR_bWj4DkQS1/view
I've just installed Firefox to test it, and the same problem happens.
Aah ok sorry my bad. Include this CSS in your media query:
.main-navigation.toggled .main-nav>ul {
display: none;
}Thank you David, that solved it!
Awesome. Glad to be of help.
