Prevent Header Menu from wrapping

  • Resolved jssilver

    (@jssilver)


    2 years, 11 months ago

    I’m helping a non-profit set up a website. They’re using the free Astra theme with Elementor. I’m trying to prevent the menu from wrapping if the browser is resized, but I can’t figure out a way to do that. I’ve tried using white-space: nowrap; on some of the classes I could identify (e.g. “main-navigation”, “main-header-menu”, etc.) but couldn’t get that to work.

    Is it possible to prevent the menu from wrapping in a desktop browser?

    Note: They’ve asked for the primary menu font to be larger, which I’ve done with additional CSS.

    The page I need help with: [log in to see the link]

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

  • Hi @jssilver,

    By wrapping, did you mean like this?

    To avoid it, you can adjust the Menu Spacing and the Menu Font Size. Refer to this screenshot, please. Apart from that, you don’t need to use custom CSS just to adjust the Menu Font Size as there’s an option to do that easily.

    The other way to avoid Menu wrapping on the desktop, you can update the Breakpoint. This way, instead of wrapping the Menu will turn into a Toggle Button on the desktop with a smaller screen.

    I hope it will help.

    Kind regards,
    Herman ??

    Thread Starter jssilver

    (@jssilver)

    Thanks for the helpful reply. I missed the setting for the menu font size – I was going by this support post but I should have looked further at the theme customizer.

    Changing the font size in the customizer and setting the spacing has helped with the wrapping. The wrapping still happens but only slightly before the tablet view kicks in.

    Jumping into child themes to change the breakpoint is beyond the means of the site owner, but good to know if this need arises again.

    Hi @jssilver

    Thank you for your reply.

    The old thread refers to Astra’s old Header, where the option to change the font size Menu is not available on the Astra free. However, with the Astra Header Builder, the option for the same is available even on the Astra free.

    Please let us know if you have any questions regarding this.

    With Regards
    Humayon

Viewing 3 replies - 1 through 3 (of 3 total)
  • The topic ‘Prevent Header Menu from wrapping’ is closed to new replies.