Gap between cart and nav

Design help Layout & Design
#1

Hello all,

I’m trying to move the cart down so it sits BELOW the nav bar.

I added a margin above it which works great at the top of the page but when you scroll down it creates a gap between the cart and the nav bar.

Does anyone know if there’s a fix?

Screenshot 2023-01-25 at 12.25.38
Screenshot 2023-01-25 at 12.25.381368×1492 50.2 KB

https://preview.webflow.com/preview/gp-ecom?utm_medium=preview_link&utm_source=dashboard&utm_content=gp-ecom&preview=7529fca24fead2df7f719691f49e05f5&workflow=preview

#2

The issue is because your ‘Nav Announcement’ element is not sticky with the nav element. If you check that gap is the same size as your nav announcement. My suggestion would be to make the announcement to stick with the nav as well.

#3

Heya,

I don’t suppose there’s any other way as I would rather the ‘announcement bar’ didn’t join the nav all the way down the page… I could reduce opacity on scroll i guess but then there’d be a big ‘blank’ space at the top of the nav. hmmm…

OH AND THANK YOU AARON!

#4

There are other ways for sure but I think that’s the easiest one imho like you said you could reduce opacity or change colours, add an overlay, etc.