Nav Bar Full Width

Support
#1

I’m trying to achieve a full width nav bar. I’ve seen a few other topics about this and have tried the listed CSS, but no luck.

chadwickcreative.com

I’m also trying to place our tagline “We Create Visual Identities” in the middle of the nav bar, with the logo to the far left, and navigation menu to the far right.

Thanks for your help!

#2

Hello Jeffery,

Thanks for writing in!

You need to add three containers and in each of the containers, add image element (logo), Headline (We Create Visual Identities), and Navigation inline element.

Next, inspect the Bar and under Flex Layout > Horizontal, select Space Between.

You can also refer following screencast. https://cloudup.com/cfYOxhsUXkG

Thanks.

#3

Thanks for your quick reply. I was able to get these 3 elements in the Nav Bar, but it’s not spanding the full width of the page. Please advise.

#4

Hi Jeffrey,

Would you mind providing the URL of the site in question so that we can check it?

Thank you.

#5

chadwickcreative.com

#6

Hi Jeffrey,

Additional settings to the bar to make it full-width. Please set the Outer Spacing to 0, or 1em if you want to give it a little bit of left and right margin. Set the Content Length to 100% and the Content Max Lenght to none



Additional settings to the containers to make it equally space, set the Self Flex preset to Fill Space Equally (all 3 containers)



Then on the Horizontal option set the first container to Start, second container to Center, and third container to End.

Hope it helps,
Cheers!

#7

Thank you very much! This was exactly what I needed.

Have a great rest of your day!

#8

Glad we could help.

Cheers!

#9

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