Fixed Header

8 posts from 2 voices

• Started 8 months ago by peezar
• Latest reply from Ismael
• This topic is closed
• This topic is resolved

Tags:

No tags yet.

1. 

   peezar
   Member

   Hi there,

   Can you please tell me if it's possible to have the header of my website stay in a fixed position so that my visitors will always have access to the top navigation no matter how far they scroll down?

   Many thanks,

   Peter

   Posted 8 months ago #
2. 

   Ismael
   Moderator

   Hi Peter,

   Try to add this code in your Quick CSS or custom.css:
   

   #header .container, #social_container .container {
      position: fixed !important;
      left: 50% !important;
      margin-left: -465px !important;
   }
   
   #header .container {
      margin-top: 40px;
   }
   
   #main {
      margin-top: 200px;
   }

   Just adjust the margin-top value. :)

   Regards,
   Ismael

   Posted 8 months ago #
3. 

   peezar
   Member

   Very cool Ismael, it does work except for one thing. The background is transparent. Can you help me fix that?

   I've installed it on a staging site: http://dev.notashamedofthegospel.com/

   Posted 8 months ago #
4. 

   Ismael
   Moderator

   Hi peezar,

   Just replace this code:
   

   #header .container, #social_container .container {
      position: fixed !important;
      left: 50% !important;
      margin-left: -465px !important;
   }

   With this code:
   

   #header .container, #social_container .container {
      position: fixed !important;
      left: 50% !important;
      margin-left: -465px !important;
      background: white !important;
   }

   Hope this helps. :)

   Regards,
   Ismael

   Posted 8 months ago #
5. 

   peezar
   Member

   That is a HUGE help, thanks Ismael! Can I ask you please just one last question? How can I get the blue line in the header to also scroll down with the rest?

   http://dev.notashamedofthegospel.com/

   Posted 8 months ago #
6. 

   Ismael
   Moderator

   Hi,

   Please edit the snippet I gave you and add this.

   #header .container, #social_container .container {
      position: fixed !important;
      left: 50% !important;
      margin-left: -465px !important;
      background: white !important;
      top: 7px;
   }
   
   .color_strip {
   position: fixed;
   width: 100%;
   height: 7px;
   top: 0px;
   z-index: 100000;
   }

   Regards,
   Ismael

   Posted 8 months ago #
7. 

   peezar
   Member

   Awesome, thanks so much :-)

   Posted 8 months ago #
8. 

   Ismael
   Moderator

   Hi peezar,

   Glad that we could help you. :)

   Cheers,
   Ismael

   Posted 8 months ago #

RSS feed for this topic

Topic Closed

This topic has been closed to new replies.