Colored background bar that is not a filled container

I’m very new to webflow and have been going through the tutorials trying to wrap my head around div blocks and how I can create this gray bar (as a background) as part of the navbar. any tips? thanks!

Image for clarity here


Here is my site Read-Only: LINK

I’d personally do this:

contain it in a relatively positioned div (pos-rel)
bg-grey div with color grey, height 80px, margin auto top and bottom, positioned absolute: full. this positioning is so its in the background behind your nav contents. Its size/position is relative to that parent div with position: relative.
for centering the nav contents, put it in a div displayed as a flex box (d-flex), justify space, align center
remove the top padding on your nav menu

Screen Shot 2021-02-24 at 3.35.39 PM

1 Like

lifesaver, thank you!

also, I’m having trouble doing it for the bottom CTA bar. the bar is covering objects instead of being in the background. Shared link here

You didn’t have to set it in the navbar because Webflow set them by default, but you’ll have to set all the other elements within the parent div to relative as well. You can just change one of the containers to relative, or each one (text block and image) to relative.

1 Like