Is it possible to do this sort of nav bar in Webflow?

See this diagram I made: Screenshot - 6979ca62f288b9e59450187f3d72f7ed - Gyazo

Basically, the logo overlaps the nav bar with links on both sides of the logo.

The nav bar widget in nav flow can’t seem to do this. Do I need to create custom code for this?

Tks!

You can do this by:

  1. Give a CSS class to both the nav menu and the nav container.
  2. Set the Nav menu to Float: None
  3. Set the text align property for the Navcontainer to middle
  4. Remove the float on the brand
  5. move the brand between the navlinks in the Navigator

That should bring the logo to the middle.

Just tried this, but still unsuccessful

You also have to set the position of the brand to relative and than give it a Z-Index greater than the navlinks.
Set the navlink to relative aswell and give them a lower Z-Index

that went slightly over my head lol oh well I’ll try another time but thank you

Ill make a video of me doing this and upload it. give me some time! :stuck_out_tongue:

:cry: :smile: THANK YOU!!! Great

Tks Hamzster! Will try out your suggestions.

From what you say, though, it seems that in order for one to do something more “out-of-the-ordinary” at Webflow, one needs to be really proficient in CSS3 and HTML5, and all the cross-browser quirks etc.?

From your explanation, it seems pretty advanced if you ask me. :smiley:

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