As you may all know Genesis is a popular theme framework for creating a powerful, SEO-friendly, customizable, beautiful website in WordPress. This framework can be extended even further with a Genesis Child theme (also known as StudioPress theme) to design almost anything you want. One key feature found in some of these themes is “sticky header”. While sticky header is a cool feature it may not always function properly on mobile devices. Unfortunately, there is no setting in Genesis to easily turn this on/off. In this article, I will show you how you can disable this sticky header on your website without having to touch the core theme files.
How To Disable Sticky Header in Genesis
1. Go to Appearance > Customize from your WordPress admin dashboard.
2. Click on Additional CSS.
3. Copy and paste this CSS into the Additional CSS editor.
.site-header{
position: absolute;
}
4. Click Publish and close the theme customizer.
Now open your site in a new tab and you will see that the header is not sticky anymore as you scroll down. This tweak is very efficient because it will stay there even if you update the theme.
Genesis theme (affiliate link): https://shrsl.com/2bgne
Have you applied the same tweak to disable sticky header in your Genesis child theme? Feel free to share your thoughts in the comments below.
PaginasPuebla says
Thank you, that works for me 🙂
Sam says
great, it work for my. but it disable all different size of screen. Could you provide the code that disable sticky header in a Genesis Child Theme only at mobile screen size?
Thanks
Jeremiah Say says
Thank you! This is really helpful.
Oyvind says
Hi, I just tried this. It’s no longer sticky, but now the start of the content starts at the top of the page instead of after the header. So instead of the header coming first, then the content. The header and the content both start at top so that I cannot see the first 70px of the content.
John says
good tutorial