Tuesday, 15th Sep 2015



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


Skip to comment form

  1. Ken

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

  2. NLPete

    I just installed the Graphene theme and it seems to be much better than the Weaver II i used before.
    But actually there is always a menu shown with all the pages of the site.
    Since i do have this already in the sidebar i would like to disable the main menu at the top beneath the header picture.
    I can’t find an option for this.
    I don’t have chosen any menu under “navigation” and would assume that therefore no menu is shown. But Graphene shows the main menu nevertheless.
    How can i disable the main menu under the header picture?

    1. NLPete

      Ohhh.. my question jsut became obsolet.
      I found out that
      #header-menu {
      display: none;
      does the job.
      But maybe you can enhance the theme by providing a checkbox therefore.
      Thank you for this great piece of work and i will donate for it when using it for a longer period after checking it out.
      Yours sincerly

  3. Antonio Petricca

    Hi, I would like to have the header image and header menù not scrolling ( http://www,gvmprotezionecivile.it ).

    How to accomplish this?

    Thank you!

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.