Setting width when hamburger (mobile) menu appears

  • I’ve added a logo into the header container and now it’s breaking the main navigation menu. Full screen is no problem, but as the browser window shrinks in size, the nav menu breaks the line at a certain width when it gets too close to the logo (so now the logo is in the top left and the nav menu floats bottom right and they are stacked on top of each other). If you keep shrinking the page, eventually the hamburger mobile menu (three lines) will pop up.

    What do I need to change to get the responsive hamburger menu to pop up sooner and prevent the line break? With my intermediate knowledge of coding, I think it has something to do with “@media screen and (max-width: 800px)”? I’ve tried adjusting this but nothing works. How can I adjust the width? Thanks in advance.

Viewing 6 replies - 1 through 6 (of 6 total)

  • Hi @oscash,

    Can you please send the site’s URL so I can take a look?
    Thanks!

    Warmly,
    Mihaela

    Thread Starter oscash

    (@oscash)

    Hello Mihaela,

    This is the site (obviously a work in progress).

    Cheers

    Hi @oscash,

    Thank you!
    Please add this code in Appearance > Customize > Additional CSS:

    @media screen and (max-width: 1024px){
.menu-main {
    display: none;
}
.menu-mobile-toggle {
    display: block;
}
}

    Warmly,
    Mihaela

    Thread Starter oscash

    (@oscash)

    Thanks Mihaela (@mplusb) for that bit of code. The hamburger menu does pop up sooner, but not soon enough before the line breaks. I tried testing adjusting the max-width to 800px but then it reverts back to its old ways (as if the code isn’t there as all). Anyway to prompt it sooner?

    • This reply was modified 3 years, 10 months ago by oscash. Reason: added user tag

    Please try it like this instead:

    @media screen and (max-width: 1200px){
.menu-main {
    display: none;
}
.menu-mobile-toggle {
    display: block;
}
}

    Warmly,
    Mihaela

    Thread Starter oscash

    (@oscash)

    Thanks Mihaela! This worked (I originally misunderstood what the width represented lol).

    The menu itself doesn’t display when active. The items pop up once the screen is shrunk down further. Then, when the screen is enlarged and the regular menu returns, the ‘X’ (that closes the hamburger menu) still floats in the top right corner. How can I adjust both of these?

Viewing 6 replies - 1 through 6 (of 6 total)
  • The topic ‘Setting width when hamburger (mobile) menu appears’ is closed to new replies.