nathan.j.p 585 Share Posted February 25, 2014 (edited) I am trying to have the navigation bar on Bedford be fixed. How can I make that happen? Edited February 3, 2015 by Nathan Parker Tidy acervo, evolve_advertising, Flo and 2 others 5 Link to post
1 squareology 1,300 Solution Share Posted August 6, 2015 Might need to add the Important declaration: header#header { position: fixed !important;} evolve_advertising 1 Link to post
1 nathan.j.p 585 Author Share Posted February 25, 2014 (edited) I came up with one solution for this so far, I have added this to the Custom CSS Editor and it seems to be working: header#header { position: fixed } Edited February 25, 2014 by Nathan Parker evolve_advertising 1 Link to post
0 nathan.j.p 585 Author Share Posted February 27, 2014 Another update. Just noticed that as long as youre not using transparent header the header stays fixed. If you use transparent header, on pages where the header is transparent it will not be fixed. This works for me but for some they may want it to stay fixed. Link to post
0 ghpictures 0 Share Posted February 3, 2015 Worked great for locking the navigation header to the top when scrolling. Thanks! Link to post
0 varresa 54 Share Posted March 5, 2015 I have applied this to my Bedford template b/c I would like a fixed nav bar on all pages, but for some strange reason, it is covering more of the banner image than it does when there is no fixed nav code. Any ideas on how to adjust the code so it does not cover any of the banner image? Site: https://sustainableharvest.squarespace.com Thanks! Link to post
0 jcuvdb 440 Share Posted November 18, 2015 You can use this code to keep the banner height size: .view-list .banner-thumbnail-wrapper, .collection-type-page .banner-thumbnail-wrapper, .collection-type-index .banner-thumbnail-wrapper { margin-top: 100px; /* nav bar height */ } It's from this article, Thanks to isabellemt Link to post
0 Guest Share Posted November 18, 2015 There's another layer to this you probably haven't found yet... because you won't until you do this properly. Here's a good method: header { position: fixed !important; width: 100% !important; } Once you have a nice fixed header, you'll soon discover that the hamburger menu duplicates itself with a slight overlay after you scroll partway down the page. You'll also have issues with the mobile nav appearing skewed. Infuriating. Kill it thusly: .fix-header-nav .mobile-nav-toggle-label.fixed-nav-toggle-label { visibility: hidden !important; }.back-to-top { display: none !important;} Link to post
0 yfcsask 0 Share Posted May 6, 2016 @jcuvdb this works great on my banner images, but when I am using a slideshow banner, the top nav bar is still cutting off the top portion of the banner, so my slideshow is not centered and undesirable cropping is occurring. Any tips on how to fix this problem with the slideshow banner? Link to post
0 yfcsask 0 Share Posted May 6, 2016 @varresa, I love your site! Question, on the blog section, you are using a slideshow banner, with the fixed nav bar, how did you get the slideshow banner to remain uncropped? Right now my slideshow banners are starting at the very top of the page, so the nav bar is covering the top portion of the slideshow banner. How did you fix this issue? Link to post
0 calanthachan 0 Share Posted June 25, 2016 (edited) Hi Team @squareology I'm able to fix the text but is there a way of putting a block colour underneath the text like https://sustainableharvest.squarespace.com because at the moment when the navigation bar scrolls over the pages, you sometimes can't see it. Site: https://calanthachan.com Thanks! Edited June 25, 2016 by calanthachan Initial Revision Link to post
0 sarahcurds 0 Share Posted July 21, 2016 Nathan's solution works really well for me but our h1 page headings (we don't have a banner at the top of every page) are overlapped by the fixed navigation. Is there any suggested solution for this? Thanks! Link to post
0 spaghetti_squashley 0 Share Posted January 6, 2017 Same issue as @sarahC - any possible way to prevent it from overlapping? Thanks! Link to post
0 kaleighruth 0 Share Posted May 8, 2017 @Sam Shay The first code you provided to keep the header fixed works great. However, I also entered this code to fix the navigation bar duplicating on mobile:.fix-header-nav .mobile-nav-toggle-label.fixed-nav-toggle-label { visibility: hidden !important; } .back-to-top { display: none !important;}Unfortunately, it didn't change anything on mobile for me. I'm still getting the skewed mobile nav as I scroll down the website homepage. Do you know what could be going wrong? Link to post
0 ta22 0 Share Posted July 9, 2018 (edited) Had the same issue, found a solution: .sqs-gallery-design-strip img { padding-top: 130px; } Just change the padding to whatever the height of your nav menu is to match. Edited July 9, 2018 by troyarias22 Link to post
0 Maggen 0 Share Posted August 29, 2019 I know this is an old thread haha, but i'm having issues with the navbar still overlapping banner in the blog posts. Do you have an idea on how to fix this? Link to post
Question
nathan.j.p 585
I am trying to have the navigation bar on Bedford be fixed. How can I make that happen?
Edited by Nathan ParkerTidy
Link to post
Top Posters For This Question
3
2
1
1
Popular Days
Feb 25
2
Nov 18
2
May 6
2
Aug 6
1
Top Posters For This Question
nathan.j.p 3 posts
yfcsask 2 posts
kaleighruth 1 post
ta22 1 post
Popular Days
Feb 25 2014
2 posts
Nov 18 2015
2 posts
May 6 2016
2 posts
Aug 6 2015
1 post
Popular Posts
nathan.j.p
I am trying to have the navigation bar on Bedford be fixed. How can I make that happen?
nathan.j.p
I came up with one solution for this so far, I have added this to the Custom CSS Editor and it seems to be working: header#header { position: fixed }
squareology
Might need to add the Important declaration: header#header { position: fixed !important;}
15 answers to this question
Recommended Posts