gkHeaderNav always showing

Hello, I would like to have the HeaderNav on screen all the time. How can I do this?

Please add this code to override.css and make sure override is enabled in template settings.

Code: Select all

#gkHeaderNav {
    background: #fff none repeat scroll 0 0 !important;
    position: fixed !important;
    top: -45px !important;
}


Thanks!

Unfortunately, this didn't work correctly for mobile and tablet. The logo is only half-visible and the menu is gone. (http://www.lensink.eu)

Hi

Add this to correct that:

Code: Select all

#gkBg {
    padding-top: 75px;
}

@media only screen and (max-width:1160px) {
.gkMainMenu + #gkMobileMenu {
    display: block;
}

.dark-bg #gkMobileMenu i, .dark-bg #gkMobileMenu i::after, .dark-bg #gkMobileMenu i::before {
    background: #000 none repeat scroll 0 0;
}
}


This didn't do the trick unfortunately.
The header is still in the same spot, only the background dropped down.

Hi

Please send me an access to ftp I need to see changes live to figure it out.

Hi

I can see You've figure out the css for logo. Here is some small fix I made to eliminate the gap between image and menu.

Code: Select all

#gkHeaderMod {
    margin-top: 0;
}

#gkHeaderMod img {
    top: 0 !important;
    transform: translateY(0px) translateX(-50%);
    -webkit-transform: translateY(0px) translateX(-50%);
    -moz-transform: translateY(0px) translateX(-50%);
    -ms-transform: translateY(0px) translateX(-50%);
    -o-transform: translateY(0px) translateX(-50%);
}


Is it possible to give us the full css modification you made to make it appear this way?

Hi

This may not be so simple. CSS depends from the content too. Please tell me Your site's url so I'll help to make it similar there too.

Thank you Teit...I managed to do it.

Hi

Great to hear that. Can You please share some details so other can benefit from it ?

Well, I'm just doing the same and it is a little bit tricky. So far, the trick is that it needs to be done as part of the @media.... and is working fine by doing it within in the override.css.

Code: Select all

@media screen and (min-width:1160px) {
   .frontpage #gkBg
   {
      padding-top: 45px;
   }

   #gkHeaderNav {
      background: #CCCCCC none repeat scroll 0 0 !important;
      position: fixed !important;
      top: -45px !important;
      z-index: 999;
   }
   #gkHeaderNav.gk-fixed-nav
   {
      box-shadow: none !important;
      height: 90px;
   }
   #gkHeaderNav.gk-fixed > div
   {
      padding: 45px;
   }

   #gkLogo
   {
      margin: 60px 0 0;
   }
   #gkLogo.text
   {
      margin-top: 0 !important;
      padding-top: 15px;
   }
   #gkLogo img
   {
      margin-top: -47px !important;
   }
   #gkHeaderNav .gkMainMenu
   {
      margin: 45px 0 0 !important;
   }
}


Best regards,

Ruediger

Hi

Yes, this looks right Thank You for shearing this with us.

The menu on mobile doesn't show until you scroll past the header. Is it possible to fix this? And how?

Please add this code to override.css and make sure override is enabled in template settings.

Code: Select all

@media only screen and (max-width:1040px) {
#gkHeaderNav .gkMainMenu + #gkMobileMenu,
.gk-fixed-nav #gkMobileMenu {
    top: 50px !important;
}
}


Thanks, that worked! Only now the menu moves too far down when you scroll past the header.

Hi

Change the last code to this:

Code: Select all

@media only screen and (max-width:1040px) {
#gkHeaderNav .gkMainMenu + #gkMobileMenu {
    top: 50px !important;
}

.gk-fixed-nav #gkMobileMenu {
    top: 0px !important;
}
}


That didn't work unfortunately

Hi

This code solved the problme:

Code: Select all

@media only screen and (max-width:1160px) {
#gkHeader .gk-fixed-nav #gkLogo, #gkHeader .gk-fixed-nav #gkMobileMenu {
    margin-top: 23px !important;
}
}


Thanks!