Sunday, 21st Dec 2014



Print this Post

Fixed position Graphene theme header menu

The Graphene theme header menu is placed just below the header image. It scrolls up/down with the page itself. So, the navigation menu is not visible all the time. But, it is possible to change it’s relative position to fixed position by adding some CSS code to Custom CSS (or to child-theme‘s style.css). It makes the header menu to appear at the top of the page all the time. You can see the fixed position Graphene Theme header menu on my test site.

Demo looks cool, huh? You too can do this on your site. Just add the below code to Graphene Options –> Display –> Custom CSS (or in child-theme’s style.css)

#header-menu-wrap {
    margin-top: -241px !important;
    z-index: 15;
    position: fixed !important;
#container {
    margin-top: 35px;

Notes: Here I’m assuming that,
1. The height of the header image is 150px.
2. Height of the top-bar is 54px
3. Height of the header menu is 35px

If any of the above is different on your site, you may need to change the margin values accordingly. If you have any issues in getting this into work, leave a comment below or create a thread at Graphene Theme support forum.


Short Link:

About the author

Prasanna SP

Student | WordPress Dev | Tech Blogger | Interested in GNU/Linux, FOSS, PHP, Drupal, WordPress, Ethical hacking, Photography, Painting, Literature etc..

1 comment

  1. Ken

    That is very cool. I will definitely be using it soon!

Leave a Reply

Your email address will not be published. Required fields are marked *

Please put your code snippet between <code> and </code>. Comment moderation is in use. Please do not submit your comment twice -- it will appear shortly.