▼
Streaming live at 10am (PST)

How to divide navbar in 3 segments?

#1

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

#2

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 !!!!

#3

thank you, that worked perfectly. :slight_smile:

#4

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

#5

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).

#6

You Rock! :smiley: All the best to you

#7

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

#8

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

#9

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