How To Disable Sticky Header in a Genesis Child Theme

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.

screenshot showing how to navigate to the appearance customize menu in wordpress

2. Click on Additional CSS.

screenshot showing how to navigate to the additional css menu of the genesis theme customizer

3. Copy and paste this CSS into the Additional CSS editor.

.site-header{
position: absolute;
}
screenshot showing how to specify the css to disable sticky header in genesis theme

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.

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.

Disclosure: This page may contain affiliate links. If you follow one of those affiliate links and purchase something it will provide me with a little bit of a commission. This costs you nothing extra but helps maintain my site, free plugins, and themes. So I thank you for your support.

5 thoughts on “How To Disable Sticky Header in a Genesis Child Theme”

  1. Thank you, that works for me 🙂

    Reply
  2. 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

    Reply
  3. Thank you! This is really helpful.

    Reply
  4. 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.

    Reply
  5. good tutorial

    Reply

Leave a Comment