[Resolved] Mobile Nav at different width not working right

Home Forums Support [Resolved] Mobile Nav at different width not working right

Home Forums Support Mobile Nav at different width not working right

Viewing 8 posts - 1 through 8 (of 8 total)
  • Author
    Posts
  • #773152
    Christian

    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.

    #773156
    David
    Staff
    Customer Support

    Hi there,

    add this CSS within your media query:

    button.menu-toggle {
    	width: auto;
    	float: right;
    }
    #773171
    Christian

    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.

    #773183
    David
    Staff
    Customer Support

    Is that on any particular device or browser? I am have tested on Destkop Chrome, Safari and FF and not seeing the issue

    #773197
    Christian

    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.

    #773243
    David
    Staff
    Customer Support

    Aah ok sorry my bad. Include this CSS in your media query:

    .main-navigation.toggled .main-nav>ul {
        display: none;
    }
    #773284
    Christian

    Thank you David, that solved it!

    #773453
    David
    Staff
    Customer Support

    Awesome. Glad to be of help.

Viewing 8 posts - 1 through 8 (of 8 total)
  • You must be logged in to reply to this topic.