Help requested for Sticky/Fixed Navigation for Mojave

Hello,

I've been trying to add a sticky navigation to my site (www.fuseforward.com)

I've tried the following code:header { position: fixed !important; width: 100% !important; }

This works, but then the navigation awkwardly covers my banner image so the text is no longer appears vertically centred. Has anyone been able to solve this issue before?

Many thanks!

Hello @octopus,

This is great, thank you!

This has been the best solution I've found after all of my attempts, but it still isn't perfect.

It works perfectly when scrolling up and down the page, however it does create an initial awkward space between the banner (see attached image)

I've tried editing options under the "style editor" but it doesn't seem to help.

Any further suggestions would be much appreciated.

Kind regards,Carla

Hello @octopus,

This is great, thank you!

This has been the best solution I've found after all of my attempts, but it still isn't perfect.

It works perfectly when scrolling up and down the page, however it does create an initial awkward space between the banner (see attached image)

I've tried editing options under the "style editor" but it doesn't seem to help.

Any further suggestions would be much appreciated.

Kind regards,Carla

Thanks!

It works! This is my first time using CSS, so sorry for the oversight :-)

Carla

Thanks!

It works! This is my first time using CSS, so sorry for the oversight :-)

Carla

Hello, I am using this fix on my site at https://jwjrealty.squarespace.com/home-jwj but when I inserted the code, the menu items switched from the bottom to the top, and the logo/tagline also switched places. I would like the fixed header to have the logo on top, and the tagline/nav bar below

Please advise. Thanks!

@carla_dee

I have same requirement,would you be able to share the code?

much thanx in anticipationMohit

@carla_dee

I have same requirement,would you be able to share the code?

much thanx in anticipationMohit

@carla_dee did you find a solution? I'm looking to make my nav sticky in the Mojave template as well. Thank you in advance!!!

change the z index

header { z-index: 9999; position: fixed !important; width: 100% !important; }

Fixed Navigation on desktop (NOTE: This is only for Index Pages, for other pages the header will overlap the Page Content)

.Header-inner { z-index: 9999; width: 100%; }
.Header{ z-index: 9998; position: fixed; width: 100%; }

@media screen and (max-width: 3000px) {
.Index-page--has-image .Index-page-content {
   margin-top:104px !important;
 } }

@media screen and (max-width: 500px) {
.Index-page--has-image .Index-page-content {
   margin-top:0px !important;
 } }

(You may need to tweak the margin-top to work with your own site - 104px works with the default header height for Brine)

This should work for Brine Aria Basil Blend Burke Cacao Clay Ethan Fairfield Feed Foster Greenwich Hatch Heights Hunter Hyde Impact Jaunt Juke Keene Kin Lincoln Maple Margot Marta Mentor Mercer Miller Mojave Moksha Motto Nueva Pedro Polaris Pursuit Rally Rover Royce Sofia Sonny Sonora Stella Thorne Vow Wav West

Hello,I have been looking for a solution for sticky navigation ever since, for the BRINE template.The code above, when added to Design/Custom CSS works well but with a glitch:

1. The banner/header image gets reduced in verticle size. (can live with that)
2. It eats up some space on the top of the page, so whatever text written there gets hidden.

as a solution, I added an empty spacer on top of every page on the website,got the hidden text to show again, which looks fine on the desktop version,but shows as a big blank space on top of every page in the MOBILE version.

The Brine template already has a fixed navigation option for mobile but not for desktop.Any solution for this please?

my solution has been updated for this

Hello again,Firstly, thank you much for trying to solve my problem.The effect of your new (above) code is exactly the same as the one posted before:

.Header-inner { z-index: 9999; width: 100%; } .Header{ z-index: 9998; position: fixed; width: 100%; }

as suggested, i tried tweaking the margin-top and played around with other HEADER settings,but no success.

let me rephrase my observations as a problem:after applying the mentioned 2 line code, the navigation bar becomes fixed successfully.

Its other effect is such that it overlaps the header/banner image making it small in height vertically, which i can live with, not a problem!But... some pages dont have a header/banner image, so it overlaps the text on the main content page thus hiding couple of text lines.

my temporary solution is to add an empty spacer on top of every page, so fixed nav bar overlaps blank area (spacer) and text can be seen as usual, but such solution is fine on desktop, on mobile it shows as a huge blank area on top of every page.

Though it doesnt stay, but if i try to scroll to see top of the page, i see the banner image underneath, which is being overlapped by fixed nav bar.

see: www.picturecraft.in

I added code to A) fix the height of the banner image and B) make sure it doesn't affect mobile devices.

Not sure if you saw the new code I added there:

.Header-inner { z-index: 9999; width: 100%; }
.Header{ z-index: 9998; position: fixed; width: 100%; }

@media screen and (max-width: 3000px) {
.Index-page--has-image .Index-page-content {
    margin-top:104px !important;
  } }

@media screen and (max-width: 500px) {
.Index-page--has-image .Index-page-content {
    margin-top:0px !important;
  } }

@wiriamu, thanks for providing this code! While it did successfully make the navigation fixed, the margin adjustment isn't working. The content has shifted up behind the nav bar and changing the number from 104px to anything else has no effect. It'd also be great to add a subtle drop shadow once you start scrolling, but obviously that's not what you were going for here.

I have the same problem with code.Forget the code, just buy this plugin FIXED HEADERS from square studio.It works perfectly on all the templates,https://squarestud.io/collections/plugins/navigation

Forget the code, just buy this plugin FIXED HEADERS from square studio.It works perfectly on all the templates,https://squarestud.io/collections/plugins/navigation

Feel free to include your site URL and I'll check it out

chateng.me is the URL. Thank you!

the issue with this is that the code provided only works for Index Pages with banner images - for this to work on different pages you would need to manually write code that would apply to each different page type for your site.

I would recommend to redesign your site so every page is an Index Page.

Use this image as the banner image:

https://static1.squarespace.com/static/54c13dc2e4b01648ee2bf6c0/t/5b71beb470a6ad9686585ff0/1534181044869/Teach+With+Us+%E2%80%94+ChatENG+2018-08-13+12-56-55.png

Try it out

A lot of the site is still in-progress at the moment, but each page will be an Index Page when I'm done, with different sections on each page. I'm a little confused about what you mean with banner images though, and it looks like part of your comment isn't there.