Navigation line break on smaller responsive sizes

liquidreflex

Hello, I am having difficulty keeping the navigation on one line when scaling the window down in size. There is a point between the full width and the mobile size which the navigation does not fit on one line. I noticed it happens on the demo as well. I am using a smaller logo (not as wide) and was assuming that the menu could take up that extra space, but there just appears to be a set width or padding there which does not change.

Is there a way to reduce the size of the menu space for the logo so the menu options can utilize some of the space so it does not line break? I have attached a screenshot to show what I mean.

I tried adjusting some of the CSS with the logo widths but doesn't appear to be changing that space to the left / right.

Thanks

Air

Hello there:-)

liquidreflex said: was assuming that the menu could take up that extra space, but there just appears to be a set width or padding there which does not change

Yes, that is true, variant you have choose is very tricky to achieve, so logo have to have fixed size space.
That is also why this header variant is dedicated to short menus.

liquidreflex said: Is there a way to reduce the size of the menu space for the logo so the menu options can utilize some of the space so it does not line break? I have attached a screenshot to show what I mean.

Please send me live link to your site, and I will check what I can adjust specially for your case.

With kind regards.

liquidreflex

Thank you, sent message with login details.

Air

Try adding such custom CSS:

.header-variant-one_line_centered .menu-cell .top-menu {
    width: -webkit-calc(50% - 45px);
    width: calc(50% - 45px);
}

With kind regards.