-
Hi,
I managed to make my header sticky using this custom CSS:
/* Sticky Header */ .header-wrap { position: fixed; top: 0; }But I noticed the header is only sticky on my homepage (probably because I merged the header with the hero section), and not on other pages.
Can you help me make it sticky on all pages, not just the homepage?
Also, on mobile, I want only the part with the logo to be sticky — not the top bar.
Thank you!
-
Hi there,
Is there a reason why you’re not using the theme’s sticky navigation feature?
-
I already tried it, but I want to keep my header design the same while scrolling.
However, when I use the theme’s sticky navigation feature, it changes the design, and the top bar I created doesn’t stay visible. -
Okay, got it.
Try adding this CSS:
/* Mobile styles */ @media (max-width: 768px) { header#masthead { position: sticky; top: 0; background-color: #fff; } } /* Desktop styles */ @media (min-width: 1024px) { header#masthead { position: sticky; top: 37px; background-color: #fff; } .gb-element-a36ca206 { position: sticky; top: 0; } } -
Thank you, Alvind! That did the trick.
-
You’re welcome!
-
I’m sorry, I just realized that the CSS solution you provided doesn’t work on pages where the hero and header are merged, like the URL I shared with you privately. Is there a way to make it work on those types of pages as well?
-
You should keep the CSS you used in your first comment, as it specifically targets the
header-wrapselector and should work as intended. -
Thanks!
-
No problem!
-
Sorry for opening this ticket once again. I also realize that on mobile, on the page where the header and hero are merged, the entire header remains sticky when scrolling. I want only the part with the logo to be sticky.
-
I just took another look. Unfortunately, due to its HTML structure it’s not possible to disable the sticky effect for the top bar on mobile as both the navigation and top bar are wrapped inside the same header-wrap div.
-
Is there any other way that I can try, or is this impossible?
-
Another option is to remove the Header Merge setting currently applied to your Header Element and then use another custom CSS to implement the sticky header.
-
Is there any other way besides that? Because I still want to use the merge header for some pages.
-
You can try excluding the homepage only if you intend to keep the setting applied on other pages.
- You must be logged in to reply to this topic.