[SOLVED] How to make navigation bar sticky? v1.6

[nikosspeed]

How can make the Cs megamenu module be always floating(sticky)?v1.6.theme:Mariss.Ofcourse also with the logo and the cart all together as is!

Edited February 15, 2015 by nikosspeed (see edit history)

[PascalVG]

Hi Nikos,

 

To make the menu stay at the top, you can use the css code

    position:fixed:

 

 

In your file:

themes/pt_marris/css/global.css (around your Line 1298), you see this code. Add the red lines:

 

#header_content {

   clear: both;

   position: fixed;  // <- decouple the div from the page.

   left: 150px;      // <- reposition to about the same start position

   top: 48px;        

}

 

This will 'decouple' the menu from the page and stays floating at the top of the browser.

 

N.B. Because the menu is now decoupled from the header, the other text that was normally just below the menu, is now UNDER the menu (so that you can't se it) when scrolling all the way to the top (I.e. the begin situation when the page just loaded), which is probably not what you want.

 

To make space for the menu when scrolled all the way to the top, add the red line here:

In your /themes/pt_marris/css/global.css (Line 410), you have:

 

#header {

   position: relative;

   padding-top: 18px;

   height: 90px;  // <-- add this line, to make space for the menu

}

 

 

(N.B. On your original page, when narrowing the browser screen, the menu bar splits into three parts, in a way that doesn;t really look great. this won't change because the code above, and maybe you should work on that as well to make it look better.)

 

You can micro manage the position of the menu bar for different sizes (like top and left to different position by using media queries

 

like this:

 

@media (max-width: 980px) {  // code within here is only used when the browser width is smaller than 980px wide)

 

   #header_content {

      left: 90px;      // <- for smaller screens, move the left side closer to the browser edge

   }

}

 

etc. (Value 90px is just an example, maybe not correct for your page)

 

Look in global.css what media min-widths and max-widths they use, so you can use the same to match the menu changes for those size.

[nikosspeed]

Thanks a lot!Is working for me,just need to adjust the possition exactly.When i change the stylesheet first time the changes afect imediatly,any other change i will do i must wait to 10 minutes about to see the changes on my site.(and i have cache off and force compile).Is a bit annoying this!Any solution for that?

[PascalVG]

Hi Nikos,

glad it works :-)

I'll mark the topic as solved.

 

Slow update is maybe your web-browser cache?

Try to either delete browser cache, or otherwise Ctrl-F5 (Windows) or Cmd-R (Mac) to force reloading.

 

 

 

Hope this helps,

pascal.

[nikosspeed]

Hi,one more question to close this topic plz:there is a way to make all the navigation bar(again with logo and the cart) transparent?and i know that can change the font from global css right?but there is something i must do for the font change be effective?for example i must upload the new font family in some file on my ftp files or just change it from global.css?Thanks in advance!

Edited February 17, 2015 by nikosspeed (see edit history)

[PascalVG]

To make the bar transparent, you can add this:

 

#header_content {

   clear: both;

   position: fixed;

   left: 150px;

   top: 48px;

   opacity: 0.5;

   filter: alpha(opacity=50);

}

 

This should work for all modern browsers (and I believe from IE 5+)

 

For the font, look for example here:

http://stackoverflow.com/questions/12144000/using-custom-fonts-using-css

 

Hope this helps,

pascal

[nikosspeed]

Ok Working.You are the best Pascal,thanks a lot!

Edited February 23, 2015 by nikosspeed (see edit history)

[mkobur]

 

To make the bar transparent, you can add this:

 

#header_content {

   clear: both;

   position: fixed;

   left: 150px;

   top: 48px;

   opacity: 0.5;

   filter: alpha(opacity=50);

}

 

This should work for all modern browsers (and I believe from IE 5+)

 

For the font, look for example here:

http://stackoverflow.com/questions/12144000/using-custom-fonts-using-css

 

Hope this helps,

pascal

 

 

 

Hi Nikos,

 

To make the menu stay at the top, you can use the css code

    position:fixed:

 

 

In your file:

themes/pt_marris/css/global.css (around your Line 1298), you see this code. Add the red lines:

 

#header_content {

   clear: both;

   position: fixed;  // <- decouple the div from the page.

   left: 150px;      // <- reposition to about the same start position

   top: 48px;        

}

 

This will 'decouple' the menu from the page and stays floating at the top of the browser.

 

N.B. Because the menu is now decoupled from the header, the other text that was normally just below the menu, is now UNDER the menu (so that you can't se it) when scrolling all the way to the top (I.e. the begin situation when the page just loaded), which is probably not what you want.

 

To make space for the menu when scrolled all the way to the top, add the red line here:

In your /themes/pt_marris/css/global.css (Line 410), you have:

 

#header {

   position: relative;

   padding-top: 18px;

   height: 90px;  // <-- add this line, to make space for the menu

}

 

 

(N.B. On your original page, when narrowing the browser screen, the menu bar splits into three parts, in a way that doesn;t really look great. this won't change because the code above, and maybe you should work on that as well to make it look better.)

 

You can micro manage the position of the menu bar for different sizes (like top and left to different position by using media queries

 

like this:

 

@media (max-width: 980px) {  // code within here is only used when the browser width is smaller than 980px wide)

 

   #header_content {

      left: 90px;      // <- for smaller screens, move the left side closer to the browser edge

   }

}

 

etc. (Value 90px is just an example, maybe not correct for your page)

 

Look in global.css what media min-widths and max-widths they use, so you can use the same to match the menu changes for those size.

 

Hi I have try to make it but not done. I think my theme is different . Site is http://www.shampohuset.no/ can you help me how to How to make navigation bar sticky?

 

[marek.lemur]

Hi,

How did you make your sticked navigation bar? It's awsome:)

Can you give me the code?

Regards.

[Anthony P]

On 2/16/2015 at 10:50 PM, PascalVG said:

Hi Nikos,

glad it works 🙂

I'll mark the topic as solved.

 

Slow update is maybe your web-browser cache?

Try to either delete browser cache, or otherwise Ctrl-F5 (Windows) or Cmd-R (Mac) to force reloading.

 

 

 

Hope this helps,

pascal.

 

CMD+SHIFT KEY+R = Cache Refresh
CMD+R = Normal Refresh