Home page banner overlaps with nav bar

Here is my public share link: https://preview.webflow.com/preview/sajari-staging?utm_medium=preview_link&utm_source=designer&utm_content=sajari-staging&preview=66dae62bb4149d44f0a60fa9b5b12b45&mode=preview

The home page black banner along the top overlaps with our top-level nav. If you scroll down, the nav is there. Does anyone have suggestions for how to push the nav down so it’s not obscured by the banner?

There’s also a cookie that we’re using for when visitors close the banner. However, after they close it, the page loads with a blank space as if it’s still there.

Hey @sajarijon,

Looks like an issue with how your elements are positioned.

I have fixed the issue by doing the following:

  1. Change Notification Bar Wrapper to position: static
    image

  2. Change Navigation Wrapper to position: sticky; margin-top: 0; z-index: 100
    image

    UPDATE @sajarijon

  3. Change Navigation to position: relative; z-index: 100
    image

This would take care of everything, from showing your banner and navigation not being overlaid by other elements since the z-index is higher than all of them!

Hope this helps!

Thanks @imtiazraqib I’ve updated it, but now the announcement banner is hidden. Maybe I need to change the animation settings? Or did I miss something else?

Also, by changing the navigation wrapper settings, it affects nav visibility on other pages (e.g., pricing page, the nav gets hidden behind the page elements). I’m sure that can be fixed.

hey @sajarijoney, I have updated my answer to reflect these changes.

That looks good! I’m going to have one other person review it and will mark this as resolved shortly. Thank you for your help :slight_smile: