Streaming live at 10am (PST)

Understanding the Navigation Native Component

Hello! I’m getting familiar with the Webflow navigation bar native component.

When I add it in, the nav links are automatically contained in a div called “Nav Menu,” which is right justified. Can someone help me understand WHY its right justified, as I didn’t style it this way?

I would have guessed that “container” would have been a flexbox, so that the logo would be left justified and the links would be right justified… but the container is just set to the block element default.

There isn’t much to see on my page, but I’ll link anyways:

https://preview.webflow.com/preview/maven-theme-rebuilt?utm_medium=preview_link&utm_source=designer&utm_content=maven-theme-rebuilt&preview=7cf1cb285516ff10e0ecb8689a0e2c81&pageId=616f509c4088eb8bdec424c5&workflow=preview

Hi @hilary,

Some of the Webflow pre-made components (container, section, nav menu) have styling pre-applied that isn’t made apparent by the usual blue highlighting in designer. If you publish the page and (in chrome) right click → inspect, you can examine some of the additional styling that Webflow has done (see attached). It looks like in this the Nav Menu has a float right applied while Brand has float left. If you look in designer again now, you’ll see it indeed has float right applied whereas a normal div block has no float.

If you search on the forum here you’ll see a similar discussion regarding the Webflow “Section” component and “Container” component, which are just div blocks with some (kind of hidden if you don’t know where to look) styling already applied. I may be wrong, but I believe this was done to assist beginners by nudging them towards using some good design principles without them really knowing it.

Hope that helps clear thing up a bit. I had the same problem understanding the “container” component when I was starting out.

keegan

This is so helpful. Thanks so much for your reply, Keegan!

1 Like