Jump to content
Search In
  • More options...
Find results that contain...
Find results in...
Advanced Search
  • 0
Sign in to follow this  
antoniascholz

Five: CSS for sticky/fixed navigation bar?

Question

I'm looking for some code that will make my navigation bar sticky. My site is: http://www.monstersoftherunway.com. It uses the FIVE template.

The few suggestions in the forum don't seem to work for my template. Either the navigation bar stops being centered or the text scrolls over the nav bar and looks really messy.

Thanks!

Edited by Aisfofo

Share this post


Link to post

5 answers to this question

Recommended Posts

  • 0

I did manage to find a fix for this, albeit a bootlegged version. Try inserting the following bit of code under Custom CSS. Note: I also added a solid black border to my navigation bar. If you do not want the border, simply delete the: border-bottom: 2px solid black;

Since this is specific to my site, you may need to play around with some of the numbers to make it fit to your site. Let me know if you have any questions.


#navigation-top {
 width: 100%;
 padding: 4px;
 position: fixed;
 z-index: 99999;
 border-bottom: 2px solid black;
}

#site-title {
 padding: 35px;
}

@media only screen and (min-device-width: 320px)
and (max-device-width : 480px) {
 #navigation-top {
   position: absolute;
 }
}

Edited by antoniascholz

Share this post


Link to post
  • 0

Hi antonia! thanks for the reply. I also have the same problem.. and I use the five template and want to get the navigation fixed on the top..

just tried this code your provided but nothing happened.. my bad is mvdtrading.com maybe you can take a look to it. thanks!

Share this post


Link to post
  • 0

I took a look at your site. You are using a different header/navigation format than I use, which is why the code isn't doing anything for you.

Unfortunately, I always have to play around with my code. It's a trial/error process for me. Since I can't actually play around with your site, I'm probably not able to be that helpful.

I believe in the format you are using for your template, the element is called page-header-wrapper. So you could try to insert this and see what happens:

page-header-wrapper {

width: 100%;
padding: 4px;
position: fixed;
z-index: 99999;
}

Share this post


Link to post
  • 0

Hi antonia thanks again for the try! I tries the code you provided but it didnt work again.. its frustrating as my CSS is empty so there is nothing already on it that can be messing with future code..

Share this post


Link to post
  • 0

Hey Antonia - Do you mind sharing what you did to get your logo under the navigation bar to show up consistently on each page? Did you insert this as part of the header, or as a banner image?

Share this post


Link to post

Create an account or sign in to comment

You need to be a member in order to leave a comment

Sign in to follow this  

×
×
  • Create New...