Navigation overflow then container

i have navigation bar with menu up to 12 on count which is overflowing then container in screen-size (1300px-992px) only. im using boostrap as css framework.


if i use css white-space:no-wrap to prevent the word-break menu is overflowing then main container.


if i dont use css: white-space:no-wrap menu are breaking down but still menu length is overflowing then main-container.

Menu font-size:15px, which is last size i can go down, same with menu spacing i have got to last. Doesnt prefer hamburger menuhamburger menu in desktop. 12menu or more is must to be displayed in navigation bar

What is the best solution that i can fix longer menu length inside main-container in screen-size (1300px-992px)

I would put gallery, membership, health and contact into their own menu and then align them to the right and then you can let that section wrap above or below the other menu items when the page is squeezed.

Alternatively amalgamate them into their own dropdown selection to save room.

At the end of the day you can’t squeeze everything into a tight space so you have to allow for something to wrap or to be moved or removed. This is the joy of design.:slight_smile:

2 Likes

Roughly like this in Bootstrap 5.


(Click Edit on Codepen to see full size.)

1 Like