Hi,
I’m using the Catch Everest theme on my website, and I’ve encountered an issue with the sticky header. When I enable the sticky header option in the theme settings, the header overlaps the content as I scroll down the page, especially on pages with large hero images or sliders.
I’ve tried adding some custom CSS to add padding to the top of the content area, but it doesn’t seem to resolve the issue consistently across different screen sizes. Here’s the CSS I’ve tried:
.site-content {
padding-top: 100px;
}
This works fine on desktops but creates a large gap on mobile devices. Is there a way to make the sticky header work correctly without overlapping the content and still remain responsive?
I would appreciate any help or guidance on resolving this issue.
Thank you!