Change Mobile Menu Breakpoint

  • Resolved kadolf1024

    (@kadolf1024)


    5 years ago

    Hello,
    I need to change the breakpoint for the mobile (hamburger) menu. Right now it’s at 1140px, and I need to change it to 900px. Can you help me change that in my child theme? I don’t want to have to edit the main OnePress theme CSS if I don’t have to.

    Thank you!

Viewing 6 replies - 1 through 6 (of 6 total)
  • Theme Author FameThemes

    (@famethemes)

    5 years ago

    Hello @kadolf1024

    Please try to add this to Customize => Additional CSS:

    #nav-toggle { display: none ; }
.main-navigation .onepress-menu { overflow:visible; }
@media ( max-width: 900px ) {
#nav-toggle { display: block ; }
.main-navigation .onepress-menu { overflow: hidden; }
}

    Hope it helps!

    Thread Starter kadolf1024

    (@kadolf1024)

    5 years ago

    Hm, unfortunately with that code added, the hamburger/mobile menu doesn’t even appear, and what happens is that the navigation items just bump down below the logo on the left when the screen is resized smaller.

    Theme Author FameThemes

    (@famethemes)

    5 years ago

    @kadolf1024

    Could you show me your site address?

    Thread Starter kadolf1024

    (@kadolf1024)

    5 years ago

    Yes, the site is https://thehabitinstitute.com
    You can see when resizing the browser window that with the custom CSS you provided, the menu bumps to the left under the logo, rather than turning into the hamburger menu. Thanks!

    Theme Author FameThemes

    (@famethemes)

    5 years ago

    Hey @kadolf1024

    My code is correct and working well. Please see:
    https://cl.ly/87b1e8a54ac7

    The hamburger menu icon shows under 900px screen.

    You can change my code again:

    #nav-toggle { display: none ; }
.main-navigation .onepress-menu { overflow:visible; width: auto !important; }
@media ( max-width: 900px ) {
#nav-toggle { display: block ; }
.main-navigation .onepress-menu { overflow: hidden; }
}

    Let me know how it goes!

    Thread Starter kadolf1024

    (@kadolf1024)

    5 years ago

    Hi! Thanks. That new code worked. Before, it was bumping the nav under the logo between 1140 and 900px and then turning into a hamburger. With your new code, it is working perfectly. I appreciate all of your help!

Viewing 6 replies - 1 through 6 (of 6 total)
  • The topic ‘Change Mobile Menu Breakpoint’ is closed to new replies.