Making a fixed header/menu when scrolling

scrrenshot.jpg

Try to make the mainmenue/header fixed - to have it always on the screen when scrolling down.

I did what I wrote in a tutorial, put into override.css:

Code: Select all

#gkHeaderNav {
   position: fixed;
   width: 100%;
   z-index: 150;
   margin: 0px auto !important;
   background: #ffffff;
   }
#gkPageContent { width: 100%; }
#gkPageContent {
   padding: 150px 0 150px 0;
   background: #eee;
   -webkit-box-sizing: border-box;
   -moz-box-sizing: border-box;
   box-sizing: border-box;
   overflow: hidden;
   position: relative;
   z-index: 100;
}

Now the position is fixed, scrolling works.
But the header remains on the left corner (not in the center) and its not 100% wide.

http://www.pfaffstaller.com/2014/

There must be someting else to change, maybe you could help!

See screenshot....

Delete your added css code.

Add following css code.

Code: Select all

#gkTopFix {
    background: none repeat scroll 0 0 #FFFFFF;
    margin: 0 auto;
    position: fixed;
    top: 0;
    width: 100%;
    z-index: 9999;
}


Now we need to wrap .gkHeaderNav in a wrapper div ( #gkTopFix )

So edit file templates/gk_shop_and_buy/layouts/default.php
Line:71 and 72 which is below

Code: Select all

    <div id="gkMainWrap">
       <div id="gkHeaderNav" class="gkPage">


Replace with below

Code: Select all

    <div id="gkMainWrap">
       <div id="gkTopFix">
       <div id="gkHeaderNav" class="gkPage">


Line: 103 which is below

Code: Select all

      <div id="gkPageContent">


Replace with below

Code: Select all

      </div>
      <div id="gkPageContent">


Let me know if you need further help.