Menu wrapping incorrectly

Support
#1

Hello,
I want to stop my menu from wrapping onto two lines when my desktop screen size is smaller.
How do I stop it from wrapping?
Thanks,
Georgia

#2

Hi Georgia,

This would depend on how many menu items and the dimension of the menu area. If you have a lot of menu items, most likely the other items will fall to the second line if the screen gets smaller.

You may change the font size of the font element to a smaller font to accommodate the menu items in one line. You can do this in X > Theme Options > Header > Links - Text > Navbar Font Size (px).

Another option would be to write a CSS code to target the menu items on specific width then the other items get pushed on the second line and adjust their font size to a smaller font.

You have several licenses in your account so I am not sure which site is in question so please provide the URL so that we can check it and provide further suggestion.

#3

Hi Jade,
Thank you for your reply. I’ve included the URL as a secure note in my initial comment.
Ideally, I’d like the menu to stay on one line on smaller desktops and then automatically change to a button burger menu when the screen size becomes too small.

I think the code option may be more suitable.
Thanks,
Georgia

#4

Hi Georgia,

Please add this code in X > Theme Options > CSS:

@media (max-width: 1117px) {
    .x-navbar .x-container {
        width: 100%;
    }
}

@media (max-width: 985px) {
    .x-navbar .desktop .x-nav > li > a {
        font-size: 12px;
    }
}

Kindly note that since this is a custom code that changes the default behavior/display of the theme, you will be responsible to maintain or update the code in case you require further changes or if the code stops working in future updates. If you are uncertain how to proceed, it would be best to get in touch with a developer.

Hope this helps.

#5

Hi Jade,
That has seemed to mainly work. :slight_smile:
However, when shrinking my screen size on my desktop to test the code, the menu still wraps at random sizes. The menu begins to respond alongside the shrinking of the screen size, but then it all of a sudden it wraps again at random sizes.
Thanks,
Georgia

#6

Hi Georgia,

Would you mind providing a screencast of the issue you mentioned because on my end, the menu now looks correct:

Thank you.

#7

This topic was automatically closed 10 days after the last reply. New replies are no longer allowed.