adding sticky above header element and getting icons in alignment

Hi there,

Can you remove the merged header element first?

I don't think it's needed for the layout you are trying to create.

Let me know :)

okay removed it.

This is the header I'm seeing and I don't think it's correct?
https://www.screencast.com/t/gSgZ6oMRxI

Couple things to change first:

- You shouldn't need to add the sticky header wrapper.

- I see a couple of empty WP Columns blocks in there. Can you remove it?
https://www.screencast.com/t/1r20Ia2KZAJl

okay think I got it removed also I forgot to mention I am trying to get rid of any white space between the Header(picture of kids) and the menu

okay I made a few adjustments and getting closer but still have so much space between the menu and header and can't figure out why.

Hi there,

edit your page, and select the first Container Block, in the Spacing settings reduce/remove the Top Margin which is set to 100px

Ah that's where it was coming from lol. Okay so now I am still trying to make it sticky (so above header element with the menu and logo)

Can you check the URL you provided its now returning a 404 error

the link should be working again now ( we had a power-outage here)

Its not loading still - this time there is no 404 but its just not loading.

okay reset it. hopefully now its working (I did test it and was working now)

Try this CSS:

.sticky-header {
    position: -webkit-sticky;
    position: sticky;
    top: 0;
    z-index: 1000;
}

OR This CSS if you only want it applied to larger screens:

@media(min-width: 769px) {
    .sticky-header {
        position: -webkit-sticky;
        position: sticky;
        top: 0;
        z-index: 1000;
    }
}

That worked great, we are almost there! Now how do I get there to be a strip of white behind the menu when its sticky, the logo and social all have it but the menu doesn't?

Hi there,

1. You need to modify these two CSS you've added:
https://www.screencast.com/t/PAY8hwKcv
https://www.screencast.com/t/BKfeAiRvJbyd

2. Then add this CSS:

@media (min-width: 769px) {
    nav#site-navigation {
        margin-top: -40px;
        background-color: #ffffff;
    }
}

Let me know :)