Main Navigation Menu > How to Make Fixed Position?

Does anyone know the proper css to make the main navigation menu "fixed" to the top of the browser window?

I am half-way there...

I've changed "#gk-page-nav" position to "fixed" but this positions the navigation to the left of the browser window.

All I need now is to center the main menu on the browser window properly. I am thinking I have to define this with @media rules but perhaps there is a simpler way to keep the main navigation menu
"centered" and static while scrolling?

Any suggestions would be helpful! Thanks!

Hi,

Try to add the following custom css code:

Code: Select all

#gk-page-nav {
   width: 100%;
   position: fixed;

}

#gk-page-top {
   padding: 0;
}


but navigation bar will have 100% width.

The menu is 'static' but now floats to the left. How to (re)center the menu?

Could you please provide me with a URL to your website, either here or via PM (click the “Private Message” text underneath my avatar) so that I may analyze it?

Josh,

I believe it's #gk-page-nav > "max-width" that has to be configured with the correct px width (?)

I am viewing in desktop @ 1600px resolution and higher and since the max-width is set to 1320px max, the menu appears to float "left" b/c of course the resolution exceeds the max-width.

Check it yourself on a resolution higher than 1320px width and see if you get the same result (?)

Do you want us to set the "max-width" to a pixel value or 100% or...?

Let us know the best way to proceed. Thanks!

p.s. The mobile menu toggle positioning may need to be adjusted slightly too. We adjusted the css but want to make sure our css matches yours.

Sorry, I need to see your website to check the issue.

PM Sent

Sorry, I need to see your website to check the issue.

Joshua,

Remind me, are PM's on a queue for outgoing messages to be sent?

I sent 2 PM's (same message) and they have remained in the outbox for 3 days.

Curious if I have to do anything further to get those messages to you (?)

Thanks

Hi,

The message is in your outbox until I read it.

Try to change your override code into:

Code: Select all

#gk-page-nav {
   width: 100%;
   position: fixed;
   max-width: none;

}

#gk-page-top {
   padding: 0;
}


Hi,

The message is in your outbox until I read it.

Try to change your override code into:

Code: Select all

#gk-page-nav {
   width: 100%;
   position: fixed;
   max-width: none;

}

#gk-page-top {
   padding: 0;
}


Worked Perfect!

Thank you!

***Solved***