Support » Theme: OnePress » Change Mobile Menu Breakpoint

  • Resolved kadolf1024

    (@kadolf1024)


    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)

    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!

    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)

    @kadolf1024

    Could you show me your site address?

    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)

    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!

    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.