[Resolved] Sticky header and Navigation

[CRISTO]

I have sticky navigation on my site, which I like, but would like to make the header sticky along with it. What I want to do is make the title & header image sticky along with the menu. This is important because I am trying to get brand recognition so I want that visible all the time.

[CRISTO]

Looks like I found the answer here

[Leo]

Yup give that a shot. Let us know if you get stuck.

[CRISTO]

Thanks, Leo

Well, I don’t know much about GP Hooks. Was hoping for a simple css that would do the trick. If not, then I will try to devote some time next week to learning about hooks. So much to learn….so little time!

[CRISTO]

I tried this per an earlier suggestion
.site-header {
position: fixed;
top: 0;
width: 100%;
z-index: 2000;
}

.container {
padding-top: 120px;
}

…it makes the header sticky, but then I lose the sticky navigation. I wanted both to be sticky.So for now I took that back off and still have sticky navigation.

[Tom]

You can’t only make the site-header sticky, you need to wrap the header and nav in one element, which is what this method does: https://generatepress.com/forums/topic/how-can-i-create-a-fixed-header-and-top-menu-in-the-generate-press-theme/#post-31579

[CRISTO]

Thanks, Tom. I had already read that, but not sure I am ready to try it. It talks about GP hooks, but not sure if that only applied to location of the menu in that particular case.

Will work on learning more about GP hooks before I try. Also, it is a bit confusing to me about adding css and then removing it. Will sit down and try to figure it out…I usually make things more complicated than they really are!

[Tom]

No problem! If you go through the steps one by one, it will work. You can always reverse what you do if it doesn’t work 🙂

[CRISTO]

Thanks. Get some sleep, Tom….you worry me!

[Tom]

Haha don’t worry! 🙂

[CRISTO]

I am a mother and a grandmother….it is my job to worry and give advice!

[Author]

Posts