How to divide navbar in 3 segments?

Hello.

I have a fixed navbar and would like to place logo on the left, menu in the middle (for desktop layout) and some text on the right side. What is the best way to organise it? I’ve tried adding columns, but that seems a bit too complicated for a navbar.

Thanks!


Here is my public share link: concept

Why not use flexbox?

.nav-container gets display-flex
(give brandlogo a class .brandlogo)
.brandlogo → sizing: expand → align-self:center
.menu → display-flex, justify-center, self-align: center, sizing: shrink if needed
.navtext → sizing: expand

(delete all paddings, heights (logo was larger than the 80px of the actual navbar-height)

tip: dont use a 2000x15xx IMAGE for a logo !!!

1 Like

thank you, that worked perfectly. :slight_smile:

1 Like

Now how to make flex nav container 100% width? I want the logo the be on the very left, and the right text on the very right side of the page

sure, set the max-width of the nav-container element to none.

(you have to type it into the field and press enter, even if its displayed grey as a standard value).

2 Likes

You Rock! :smiley: All the best to you

1 Like

np man, glad to help. all the best with your project!

1 Like

This is a painkiller! Thx. Didn’t know that it worked this way!

1 Like

This topic was automatically closed 60 days after the last reply. New replies are no longer allowed.