How to keep the menu items on a single line?

  • Resolved Eric Larsson

    (@master1234321)


    1 year ago

    I would like to keep all the menu items on one row no matter the size of the browser window. Right now, for a certain window width, it looks like this:

    Which does not look good. If the menu items doesn’t fit on one row I want it to look something like this:

    Or it would be even better if it was something like the menu on this site: https://sites.google.com/site/slaktforeningenleijonhufvud/nyheter

    Where the menu items stays on one row for all window widths, but the items that don’t fit are placed under “More”

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

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

    (@skalanter)

    Hello @master1234321,

    Thank you for reaching out,
    While you can build a header like the example you’ve mentioned manually as a custom header, you can use the following CSS in Customizing > Custom CSS/JS > CSS to achieve it:

    @media(max-width:1200px) {
    #site-navigation-wrap .dropdown-menu >li >a {
        padding: 0 5px;
    }
}

    Please read this link for more information about the CSS/JS code on the customizer: https://docs.oceanwp.org/article/354-add-custom-css-and-js-to-your-website.

    Also, if you want to have a custom header, you can follow this article:
    https://docs.oceanwp.org/article/355-how-to-create-a-custom-header. Additionally, if you need a hamburger menu for all devices, you can change the header style to Full Screen by navigating to WP Dashboard > Appearance > Customizer > Header > General; And Customizer > Header > Mobile Menu.

    Note: If you have any cache plugin or server cache(CDN / Browser Cache and Cookies and …), you need to clear its cache contents or disable them to see your changes. Also, remember to click on the regenerate all assets file and data in Elementor > Tools(if you have Elementor).

    I hope that helps.
    Best Regards

    Thread Starter Eric Larsson

    (@master1234321)

    Thanks Shahin! The css worked well

    Shahin

    (@skalanter)

    You’re welcome.
    I’m glad we could help.

Viewing 3 replies - 1 through 3 (of 3 total)
  • The topic ‘How to keep the menu items on a single line?’ is closed to new replies.