Jump to content
Search In
  • More options...
Find results that contain...
Find results in...
Advanced Search
  • 1

Bedford: Fixed navigation?


nathan.j.p
Go to solution Solved by squareology,

Question

  • Answers 15
  • Created
  • Last Reply

Top Posters For This Question

Top Posters For This Question

Popular Posts

I am trying to have the navigation bar on Bedford be fixed. How can I make that happen?

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 }

Might need to add the Important declaration: header#header { position: fixed !important;}

15 answers to this question

Recommended Posts

  • 0

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

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

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

@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

@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

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

@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

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 by troyarias22
Link to post
Guest
This topic is now closed to further replies.

×
×
  • Create New...