Learn how to get the Genesis Sample header always visible at the top of the screen on mobile devices using code.
One of the advantages of being an OsomCode subscriber is that you can propose new tutorials.
The other day, one subscriber proposed me a tutorial to fix the Genesis Sample header on mobile devices, so that it is always visible at the top of the screen.
This is an interesting solution. In fact, this theme already fixes the header when the visitor views it from a desktop device.
So let’s see how to expand this behavior to mobile devices as well. This would be the final result:
And here’s how to achieve it.
Snippet to display fixed header on mobile with Genesis Sample
Add the following lines to the end of the style.css file:
To see this and another 997 code snippets of this website, login or subscribe here.
In the case above you use the CSS fixed property, but if you prefer you can also go for the next alternative that uses the sticky property.
To see this and another 997 code snippets of this website, login or subscribe here.
With either of these two snippets you get to set the header at the top of the screen on mobile.
Conclusions
With this tutorial you now know how to pin the Genesis Sample header to the top of the screen on mobile.
Although this snippet is intended for a specific template, it can serve as a guide to modify other WordPress themes.
Any questions? I read you in the comments.
And if you want to give me any suggestion for future tutorials, leave it in the contact form. Advantages of being a subscriber. 😉
