Viewing 6 posts - 1 through 6 (of 6 total)
  • Author
    Posts
  • August 10, 2016 at 10:20 pm #671083
    enfold4phil

    I’ve struggled with this for some time now, searching through old forum posts, and trying a dozen different CSS methods, tried to configure them all but this just isn’t working.

    At a screen width of about 770 – 1350 pixels, my long menu overlaps onto my logo. I don’t want the mobile menu to turn on at 990 px (and doesn’t solve the issue since my menu is so long), I’d like my menu to wrap into two lines. I don’t want to have each individual menu item two lines, but instead the entire menu wrap into two lines, just line two lines of text in a word document. Aligned to the right. Right now, the menus are wrapping to two lines of text, but there is a huge amount of space between the two lines, and the menus are still wrapping on my logo.

    I’ve added a couple of extra menu items right now to my site to help demonstrate what is going on. Site details in Private Content.

    Thanks!

    August 13, 2016 at 6:30 am #672192
    Rikard

    Hi enfold4phil,

    I think that will very difficult unfortunately since the menu items take up 100% of your header height, personally I think it looks much better to switch to the mobile menu, it’s better user interaction as well since users don’t expect the menu to be on two lines. Maybe you could reconsider?

    Regards,
    Rikard

    August 14, 2016 at 5:02 am #672332
    enfold4phil

    I agree with “better user interaction since users don’t expect the menu to be on two lines”. I saw this on one website once and it was…kind of weird. I think you’ve convinced me to just turn the mobile menu setting on at 990px, though I’m not too happy about it. Guess I need less menu items ;) Thanks for the quick reply

    August 15, 2016 at 7:37 am #672541
    Rikard

    Hi,

    Ok, great. You can use the following CSS to control the breakpoint, just edit the 1024 value to your liking: 

    @media only screen and (max-width: 1024px) {
nav.main_menu {display:none !important;}
#advanced_menu_toggle, #advanced_menu_hide {display:block !important;}
}

    Best regards,
    Rikard

    August 16, 2016 at 12:37 am #672915
    enfold4phil

    Perfect – that code works perfectly. Thank you!

    August 17, 2016 at 5:41 am #673485
    Rikard

    Hi,

    Great, glad we could help :-)

    Please open a new thread if you should have any further questions or problems.

    Thanks,
    Rikard

  • Author
    Posts
Viewing 6 posts - 1 through 6 (of 6 total)
  • The topic ‘Wrap main menu to two lines’ is closed to new replies.