[Resolved] Sticky header

[Mel]

Hi, I am using the myPet template, I would like to create a sticky header (for desktop only) including top bar (widget), logo (same size), menu, and background image (wave). How do I do this please, and also add enough space on the bottom to fit the submenu?
The sticky header should look the same as when it is not sticky.

Thanks
Mel

[Ying]

Hi Mel,

It’s not possible to include the waves as the wave is inside the content area, not in the header area.

However, you can use this CSS to make the header sticky:

.header-wrap {
    position: fixed;
    top: 0;
}

[Mel]

Thanks, I added the CSS but now the top bar widget has disappeared (text line with contact details).

Also, I want the sticky version of the header to have a background color instead of being transparent. Or could I put the waves as Shape (or background) for the header instead of the content? Would that give me the wave in the sticky header also? The wave is a Shape on the Front Page and the other pages.

And I need the sticky header to have enough bottom space so the drop-down menu fits (in other words so the content is below the last item of the drop-down menu).

[Fernando]

Hi Mel,

By default, just the navbar can be turned sticky through the Customizer. Having a merged header and making the top bar sticky along with the Header and changing its color is more complicated.

You’ll need Javascript which is out of our scope of support.

You could probably try creating a Hook Element with this code:

<script>
const hwrap = document.getElementsByClassName("header-wrap");

	window.addEventListener("scroll", function(){
  if(window.scrollY==0){
    hwrap[0].style.background  = 'transparent';
  } else {
    hwrap[0].style.background  = 'white';
  }
});
	</script>

Hook it to wp_footer.

Set it to display for the Entire site.

Adding a shape would be more complicated.

[Mel]

Are there any plugins to make any element sticky? If yes, can you recommend any? Wouldn’t that be easier?

[Mel]

for example this plugin
Sticky Menu (or Anything!) on Scroll

[Fernando]

I’m thinking one other possible easier way is to create a Block Element – Hook.

Hook it to inside_navigation.

Then, add the content of your Top Bar in this Block Element instead.

After doing this, let us know and we’ll check if there’s a simple CSS fix to move it to the right position.

If this doesn’t work, maybe we can consider a third party plugin then.

[Mel]

Hi, I haven’t yet done what you suggested but for some reason the CSS snippet mentioned by Ying earlier (/* Sticky Header */) works now, except the sticky header is transparent, I want it to have a background colour, I set it here before and it stopped working now (/* Sticky Navigation */)

/* Sticky Navigation */
nav#sticky-navigation {
background-color: #e7e0ca;
}
nav#sticky-navigation ul.sub-menu {
background-color: #e7e0ca;
}

/* Sticky Header */
.header-wrap {
position: fixed;
top: 0;
}

[Fernando]

Yes. If you want that to have an opaque Background color on scroll, the code here is the solution: https://generatepress.com/forums/topic/sticky-header-18/#post-2593738

If you want an opaque color just for the top bar even when not scrolling then that could be done with CSS.

Let us know what you prefer.

[Mel]

This CSS code suggested by one of your support members earlier (at another forum topic I opened) worked before to make the complete sticky header opaque. Why has it stopped working now? I would prefer to just use CSS.

/* Sticky Navigation */
nav#sticky-navigation {
background-color: #e7e0ca;
}
nav#sticky-navigation ul.sub-menu {
background-color: #e7e0ca;
}

[Fernando]

Did you disable the Sticky Header in Appearance > Customize > Layout > Sticky Navigation?

[Mel]

Yes, I disabled the Sticky Header in Appearance because I got the sticky header to work with the following CSS:
(I wanted the top bar Widget, the Kontakt details at the top included, which works now)

/* Sticky Header */
.header-wrap {
position: fixed;
top: 0;
}

This CSS worked previously to add background colour to the sticky header but stopped working now:

/* Sticky Navigation */
nav#sticky-navigation {
background-color: #e7e0ca;
}
nav#sticky-navigation ul.sub-menu {
background-color: #e7e0ca;
}

So what I still need is to either add an opaque background colour or preferably the wave background (the wave is currently a Shape on the Front Page and the other pages) for the Sticky Header.

[Fernando]

Well, you can either:

1. Choose to use the Sticky Navigation through the Customizer.

or

2. Use what you have now but use this code to change the color on scroll: https://generatepress.com/forums/topic/sticky-header-18/#post-2593738

[Mel]

Hi, a friend managed to help me out with this one and he set a background image for the header and sticky header.

[Fernando]

I see. Glad you resolved it!

[Author]

Posts