Un-stick Header for Monochrome Pro on Mobile Platforms

[_Adam_]

Hello,

I'm trying to make the header disappear on Monochrome Pro as you scroll down the page.

I'm able to achieve this by commenting out "position: sticky;" in the CSS style sheet (see below), however this only un-sticks the header when viewing the website on a desktop web browser. When viewing the page on a mobile platform such as an iPhone, the sticky header is still there as you scroll down.

For reference, the functionality I have in mind seems to be the same one that appears on this StudioPress support page we're currently on.

Also, the reason why I want the header to disappear is because it blocks content when using page jump links (such as links from a table of contents).

Any advice would be appreciated.

Thanks,
Adam

CSS
.site-header {
background-color: #fff;
border-bottom: 1px solid transparent;
min-height: 80px;
padding: 10px 40px;
position: -webkit-sticky;
/*position: sticky;*/
top: 0;
width: 100%;
z-index: 9999;
}

https://allabouthtx.com/

[Brad Dalton]

Based on my testing, if you remove the 2 following CSS declarations, it will scroll on all screen sizes.

position: -webkit-sticky;
position: sticky;

---

Tutorials for StudioPress Themes.

[_Adam_]

Thanks for the feedback! This is what eventually worked for me:
.site-header {
background-color: #fff;
border-bottom: 1px solid transparent;
min-height: 80px;
padding: 10px 40px;
/*position: -webkit-sticky;
position: sticky;
top: 0;*/
width: 100%;
z-index: 9999;
}

[Author]

Posts