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

Help requested for Sticky/Fixed Navigation for Mojave

Question

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!

Edited by carla_dee
Initial Revision

Share this post


Link to post

25 answers to this question

Recommended Posts

  • 3

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

Edited by wiriamu

Share this post


Link to post
  • 0

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

screen-shot-2016-11-18-at-34637-pm.png.8232ec97453dfc47f37f22b05eac39b3.png

Share this post


Link to post
  • 0

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

screen-shot-2016-11-18-at-34637-pm.png.d12f79b6f3afc95dd8cb16a31756d717.png

Share this post


Link to post
  • 0

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.

Share this post


Link to post
  • 0

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?

Share this post


Link to post
  • 0

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.

Share this post


Link to post
  • 0

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.

Share this post


Link to post
  • 0

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

Share this post


Link to post
  • 0

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;
  } }


Edited by wiriamu

Share this post


Link to post
  • 0

@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.

Share this post


Link to post
  • 0

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

Share this post


Link to post
  • 0

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

Share this post


Link to post
  • 0

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

Edited by wiriamu
Initial Revision

Share this post


Link to post
  • 0

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.

Share this post


Link to post
Guest
This topic is now closed to further replies.

×
×
  • Create New...