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.

Follow these topics Graphene, WordPress

Short Link: