[Resolved] Sticky nav issue (again)

[racheljohn]

So I had the sticky navigation working perfectly, then had a different issue that I ended up having to shut all my custom css off for while we troubleshot it. After I turned everything back on my sticky nav stopped working. I know its probably something simple that I am missing but just can’t seem to figure it out.

[Leo]

Hi there,

Is the sticky navigation option turned on in the customizer currently?

It doesn’t seem like it when viewing the source code.

If it is indeed turned on, can you disable all plugins except GP Premium to eliminate any errors?

Let me know 🙂

[racheljohn]

If I am using this code do I still need to turn it on in the customizer? Cause I thought this replaced the customizer settings? And have 2 elements that have the sticky-header class. I did turn on the Sticky header but it doesn’t look right. Its supposed to look like this Here. and all plugins are turned off.

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

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

.main-navigation:not(.toggled) ul li.menu-button a {
border-width: 0px;
background: none;
border:0px solid #ffffff;
border-radius: 0px 0px 0px 0px;
color: #00c7d5;
line-height: 0px;
}
.main-navigation:not(.toggled) ul li.menu-button a:hover {
color: #fab46e !important;
background-color: none;
}

@media (max-width: 768px) div#primary-menu {
width: fit-content;
margin: 0 auto;
}

[Leo]

If you are using your own custom code to make the header sticky then no you don’t need to turn on the option in the customizer.

I don’t see the sticky-header class in your live site currently which is likely the issue.

[racheljohn]

I am a little confused so I thought this code would make the header elements sticky and the rest styles it, If I add the sticky-header class to each of those 2 elements I have created ( social?logo and the top bar) ? what am I missing that I am supposed to do?

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

[Leo]

No – the theme itself doesn’t have a sticky-header class built-in.

If I recall correctly, you were using some sort of method to add the mark up in which includes the sticky-header class so that your CSS work.

You can always restore a backup (perhaps in a staging site) figure out how it used to work.

[racheljohn]

This makes no sense to me then. Because when I turn on sticky navigation it does stick the nav just none of my css is working and none of my elements are added? So how could it not be in the theme if its working when I turn on sticky nav?

[Elvin]

This makes no sense to me then. Because when I turn on sticky navigation it does stick the nav just none of my css is working and none of my elements are added? So how could it not be in the theme if its working when I turn on sticky nav?

Some parts will work but some won’t.

The sticky navigation worked most likely because your nav#sticky-navigation‘s ancestor elements likely don’t have any “position:relative;” so it’s position: fixed; coming from script didn’t get affected.

The site link provided isn’t working anymore so I can’t pinpoint things out for it. If you can put it up on a staging site for us to check, perhaps I can help you out with CSS corrections (if necessary).

[racheljohn]

Turned link back on was pulling a backup up in case I need it and think it shut off the link while it was grabbing it.

[Elvin]

Looking at the page source, I don’t think the CSS provided here – https://generatepress.com/forums/topic/sticky-nav-issue-again/#post-1847106 – will do anything.

For a few reasons:
– I don’t see the sticky-header wrapper anymore. https://share.getcloudapp.com/X6uAnwpd (I think this is the main reason)
– With how it’s currently structured, I don’t think position: sticky; won’t work on that part of the site anyway. There is no empty vertical space to move to. That’s why the theme’s script uses position: fixed;

My suggestion:

I suggest wrapping all 3 separate elements into 1 main element and then make that sticky. I believe that was what the sticky-header container was for? And add the appropriate script for it if needed.

I think the setting that added the <div class=".sticky-header"> got removed when you changed things. I’m not sure how you’ve added it so I can’t be sure which way to point you to but I’m guessing you used Hook Elements.

[racheljohn]

yes I used hooks, I added the link for the back up site. so maybe you can compare and tell me where I went wrong. I am just so confused as to why its working on one site but not the other.

[Elvin]

Well it looks like its working now as shown here – https://share.getcloudapp.com/4gunRozY

The main difference, at least compared to my initial investigation, is that the <div class=".sticky-header"> wrapper was missing.

On the second check, it’s back – https://share.getcloudapp.com/eDuy0qYe – so the CSS worked again.

Before (no sticky header, not working) – https://share.getcloudapp.com/X6uAnwpd –
After (sticky-header on, working) – https://share.getcloudapp.com/eDuy0qYe

[racheljohn]

Thank you guys for all your help really appreciate it. I think I got it working pretty nicely now.

[Leo]

Glad to hear.

[Author]

Posts