Attaching Lower Image To Sticky Nav Header

Hi Michelle,

Can you try adding this through Appearance > Customize > Additional CSS?:

.gb-container.gb-container-05c87ebf {
    position: fixed;
    top: 20px;
    z-index: 1000;
    width: 100%;
}

.sticky-enabled nav.main-navigation.is_stuck {
    box-shadow: unset;
}

nav#site-navigation {
    z-index: 1001;
    position: relative;
}

Is this what you're looking for?

YES! That is nearly perfect! I'd like the deckle to be higher (less padding between the sticky nav and the deckle)

Thank you!

If you try reducing the 20px padding from the code, does that work?

I think it looks nice. The right side shows the straight line of the bottom navigation header a bit, but I can play with it more tomorrow to see if I can hide that more. Thanks again. 😊

You're welcome, Michelle!

I just noticed that on scroll, the header stretches and has a transparent strip on the top:

https://imgur.com/a/PV3jJIl

Any ideas how to fix this?

Can you link us to your site and provide login?

Here it is (below)

I was able to get rid of the transparent strip at the top by tweaking the opacity on the header background, but the issue of the header stretching on scroll is still there.

I think it would look better to make the logo larger, but I'm not sure how to do that with an svg image

I'm not seeing the header stretching issue.

You can control the logo height at customizer > layout > primary navigation > Menu Item Height.

I'm having a challenge. When I set the opacity of the navigation background in Customizer Colors to full white, the header covers part of the deckled edge.

https://imgur.com/O6c9ARz

When I set the navigation background in Customizer>Colors>Navigation Background to transparent, the decked edge shows nicely, except then there is a transparent strip on the top

https://imgur.com/U5TdC4G

https://imgur.com/Jx5kmUj

Also, on scroll, this is what happens:

https://imgur.com/XHDmFxr

I took the site off of Maintenance Mode so you can see it.

If I may suggest, I will add the background image directly to the navigation:

nav#site-navigation:before,#sticky-navigation:before {
    content:"";
    position: absolute;
    top: 100%;
    width: 100%;
    height: 50%;
    background-image: url(https://your-domain.com/wp-content/uploads/2023/01/13023741/Final-deckle-copy.png);
    background-position: center center;
    background-size: 100%;
    background-color:transparent;
    background-repeat: no-repeat;
}

And you need to properly crop the image.

I added the code and the deckled edge was no longer sticky. (I changed the transparent setting in Customizer>Colors>Navigation Background to #ffffff and that took care of the transparent issue.)

I added the code and the deckled edge was no longer sticky.

The container with the image needs to be removed.

And the CSS is not working as you didn't change the background image URL, to protect your site's privacy, I used your-domain in the CSS instead of your site's real domain.