Adding More Pages to menu breaks the nav bar


#1

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

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


#2

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%;
}


#3

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


#4

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


#5

#6

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


#7

Oh I see.

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


#8

Hi, try this Custom css also:

.main-navigation {
  padding: 2px;
}

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


#9

Still doesn’t work


#10

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


#11

Seems to work now?


#12

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: