Streaming live at 10am (PST)

Add top banner above nav bar

How to add a top banner above Nav Bar Menu and make only the top banner sticky? The rest of nav bar is position: absolute or static.

I currently have my top banner working but it only what’s to work nested inside the Nav Bar symbol. This won’t let me use position: sticky without breaking the nav bar.

What do you suggest? Thank You!

Here is my site Read-Only: LINK
(how to share your site Read-Only link)

Howdy @willz, welcome to the Community :wave:

Is there a reason you’re using sticky and not fixed? Is your thought that the top bar would eventually “stick” at a certain point as the user scrolls down the screen?

If you’re wanting the top bar to always appear at the top of the screen as the user scrolls down, give fixed a try instead—this should give you more consistent behavior:


I took a quick peek at your project and wanted to point out that you’ve got sticky set on a number of the children inside of that top bar which isn’t necessary (only the parent needs the position—the children will follow) and it may end up causing issues down the road. Make sure you clear all of those, and also remove the negative top margin you’ve got set on your “Top Banner Wrapper” element otherwise you’re content will be hidden:

Hopefully that helps and let me know if you run into any issues :+1:


Very helpful suggestions! Thank you for the detail instructions, it worked out perfectly.

1 Like