Adding More Pages to menu breaks the nav bar

I want to add more than 5/6 items on nav bar and the menu gets disoriented when I add more than 5 items

how do I fix this? (the menu should utlize the space after site title in the right)

No, the menu shouldn’t use the space next to the site title. They’re divided 33.33%/66.66%. Use this in your custom CSS and change the values as you need:

.site-branding {
    width: 33.33333333%;
.main-navigation {
    width: 66.66666667%;

Even if I add 20% & 80% it isn’t working as expected. The last item is broken.

Post a link to your site please. Your menu is probably just too long to fit in.

Hey, check out my website and tell me how to resolve this?

Oh I see.

The menu works perfect in IE & Firefox but it breaks on Chrome.

Hi, try this Custom css also:

.main-navigation {
  padding: 2px;

Or even 0px, and yes, your menu is too long.

Still doesn’t work

Actually no, the menu should fit. There’s something strange with that last link. Try re-adding it.

Seems to work now?

It’s the word I guess causing the problem. Bengali word has some unique glyphs that may be causing the issue. I changed the word and it fits now.

Thanks for the tip Vlad :slight_smile: