Always use the fixed menu instead of the transparant one

Good evening,

I want to use this template with the logo and menu on a white background, like that the fixed menu is always on and I never see the transparant menu.

Can anyone help me with this? This is the demo I'm working on:

http://demo.visual-impression.nl/hockeychallenger2/

It also look that the templates uses some kind of cache file, but I can't find it to turn it off...

Greetings,

John Rensink

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

Code: Select all

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


Good evening Teitbite,

I put the code in the override.css file and changed in the advanced template settings. It looks like the file is loading, but the template header image overrides this.

http://demo.visual-impression.nl/hockeychallenger2/

I'm using this code:

<img src="images/the-hockey-challenger.jpg" alt="The Hockey Challenger" class="parallax-img" />
<div class="gkPage">
<h1 data-sr="enter bottom and move 50px">The Hockey Challenger</h1>
<a href="#" class="dark btn-border" data-sr="enter bottom and wait .5s">Amateurs trainen tot het goed gaat.<br>Professionals tot het niet meer fout gaat!</a>
</div>

Do you have an idea how to change this?

Greetings,

John

Hi

The code in override.css is not working right now. You have copied also a part of the forum there.

Please remove "CODE: SELECT ALL" from there

I'm feeling quite stupid right now

Thanks for your help!

Hi

Please do not be, I copied that couple of times too so I learned this could happen on my own mistake

Is it solved now ? Can I close thread ?

Hi Teitbite,

It's almost solved. When I look at the menu on a tablet or mobile screen (size), I can't see the menu items (or hamburger menu icon)... When I scroll down it's working, but when I'm at the top of the page it's not working.

Also the place of the logo changes when I scroll down...

Hope you can help me with this 2 last problems!

Greetings,

John

And one final question: how can I make the navigation on a desktop less width? For example:

I wan't the navigation from the left of the logo till the right from the menu to be 1040 pixels width, just like the width of a text item....

Greetings,

John

Hi

Please add this to override.css

Code: Select all

#gkHeaderNav.gk-fixed-nav #gkLogo {
    margin-top: 52px;
}

#gkHeaderNav.gk-fixed-nav .gkMainMenu {
    margin-top: 60px !important;
}

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


but I'm afraid I do not understand You menu width.

Hi,

I put the demo live on this URL:

http://www.hockeychallenger.nl/

The menu is working good on a desktop, but on a tablet or mobile device the logo is moving up and a part of it gets of the screen. Do you have a solution for this?

Greetings,

John

I found an solution, i put this in the override.css file:

Code: Select all

#gkHeaderNav.gk-fixed {
    background: #fff none repeat scroll 0 0 !important;
    height: 140px !important;
    position: fixed !important;
    top: -25px !important;
}

#gkHeaderNav.gk-fixed-nav #gkLogo {
    margin-top: 52px;
}

#gkHeaderNav.gk-fixed-nav .gkMainMenu {
    margin-top: 60px !important;
}

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

The only problem I have now is that the hamburger menu is not visible on tablet / mobile except on the homepage. Does anyone have a solution?

Greetings,

John

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

Code: Select all

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