Top Menu bar should be just one line?

Hi santebarleyreviewhq. I only see one line until the menu splits at the point that the viewport can’t accommodate all the entries on one line. Is that the issue?

Yes please….

That is my concern that if there’s a solution, it would be great.

Thank you again Bdbrown…

The main menu has the same issue. Options:
1. Shorter menu text, like “Products” instead of “The Products”.
2. Create dropdown menus so you have fewer main menu items.
3. Less space between the menu items (but I probably wouldn’t recommend this).
4. Change the responsive css so the menus collapse sooner.

Or maybe a combination of #1 and #2. If that doesn’t fix it then #4.

Referring to #3 by bdbrown, I reduced the space between menu items from 14px to 13px. Btw.. why you don’t recommend this?

Well, 1px probably isn’t going to affect the overall appearance of the menu. However, in order to fix @santebarleyreviewhq menus without changing the menu structure, it would require reducing the spacing to the point of making the menus almost unreadable.

Thank you all…

Unfortunately, i am using the TOP menu for my SILO structure. So i cant control the contents there… for the structure of the link i shared;

CATEGORY / Page
– category / page
– post
– category / page
– post
– category / page
– post
– Post
– Category / Page
CATEGORY / Page
And every time i add a post to a category it would increase.. so to avoid a chaotic TOP MENU – i need to have it to one line.

For the SILO, i am using the P1TM of Peter Garrety. Hope this can help u guys understand my desperation.

I cant add any post in the future if it will appear it there…

Thank you guys again…

Sorry, I didn’t dig into the menu to realize it changes on every page. I thought it was static and that your concern was the menu folding over as the viewport became narrower. However, I see now that even the top-level menu “Sante International” generates a secondary menu that is on two lines even with the viewport at full site width. You might be able to come up with some kind of JQuery script that would scroll the menu horizontally but then you won’t have all the options visible. Don’t know of an easy solution.

Thank you bdbrown,

I guess i have to leave with it…. hope you guys could come up with some solution in the future….

I’m just thinking out loud, could it be possible to control the height of the container of the TOP menu? like number of PX…

Anyway… i just wait till somebody come up with some solution…

Happy new year in advance to all then…

Thanks..

Julius

Not sure how changing the height would help. The topbar already expands vertically to accommodate the menu if it’s too long for one line.

What if we disable the expansion…

Would it be a problem?

You could set the max height like this:

#nav-topbar.nav-container {
  max-height: 50px;
  }

But that just “hides” the second line of menu options and there’s no way to get to them.

Hi bdbrown,

Thank you and it worked?

However, the menu continue to display in the next line. It was not trim and the search icon goes to the next line as well.

Check this link https://santebarleyreview.com page link.

Thank you.

Yes. Changing the height of the menu container won’t change the menu. It still exists on two lines; the second line is just very hard to see because the white text doesn’t have a contrasting background. If you need to have the menu structure you currently have, I don’t know any way to get it on one line. Perhaps someone else can offer another suggestion.

Ok thanks… i’ll guess i’ll just settle with what is the current feature then…

Many thanks….