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

Brine/Keene sticky navigation

Question

Posted (edited)

I am trying to have the navigation sticky on all of my pages, but it seems to only work on one of the pages: link text

This is the code that I am using.

Thanks,Andrew T


Header {
       position: fixed;
       top: 0;
       left: 0;
       right: 0;
       z-index: 999    
   }
   // fix mobile nav
   .Mobile-bar--top
    {
     position: fixed;
       top: 0;
       left: 0;
       right: 0;
       background: #85C1E9;
   }
   .Mobile-bar {
       position: fixed;
       z-index: 99999;
   }
   // move mobile overlay down
   .Mobile-overlay-menu-main {
       padding-top: 80px;
   }


Edited by AndrewTomas
Initial Revision

Share this post


Link to post

6 answers to this question

Recommended Posts

  • 1

Hi there. I was going to chime in here and mention the plugin I created that solves issues like this with fixed headers in Brine templates. But, I see the site happens to be using it already! It's always fun to see it in the wild. I'll just also add that I appreciate your eye for detail @bluefluidmotion. Not everyone notices those small issues with the announcement bar, overlapping text, etc. and perseveres until they find a solution.


If a response helped you out, send a 'Like' 👍 (bottom-right) and/or 'Upvote' vote.jpg.c260784ece77aec852b0e3049c77a607.jpg (top-left)

Share this post


Link to post
  • 0

@AndrewTomas Edit


Header {
   position: fixed !important;
   top: 25px !important;
   left: 0 !important;
   right: 0 !important;
}

and add


/* Sticky Announcement Bar */
.sqs-announcement-bar-dropzone {
   position: fixed;
   top: 0;
   left: 0;
   right: 0;
}


Share this post


Link to post
  • 0

Having: Header { position: fixed !important; top: 25px !important;

Works as long there is an announcement. But when there isn't, it leaves a gap at the top and doesn't move the top-nav to the top of the page. Changing it to

Header { position: fixed !important; top: 0px !important;Fixes the issue, but covers the announcement.

Also, the page scrolls over the announcement. How do you make it go behind the announcement?link textThanks

Share this post


Link to post
  • 0

Having: Header { position: fixed !important; top: 25px !important;

Works as long there is an announcement. But when there isn't, it leaves a gap at the top and doesn't move the top-nav to the top of the page. Changing it to

Header { position: fixed !important; top: 0px !important;Fixes the issue, but covers the announcement.

Also, the page scrolls over the announcement. How do you make it go behind the announcement?link textThanks

Share this post


Link to post
  • 0

@AndrewTomas Use z-index:999; for sqs-announcement-bar-dropzone.Also, I think maybe Squarespace has a problem, if you don't tag me, there will be no email notifications. Weird!

Share this post


Link to post
  • 0

Thank you for providing these details.


I am a Web developer(Wordpress Expert) experienced in PHP & MySQL web programming, clean W3 compliant XHTML/HTML/CSS coding and Javascript/Jquery/AJAX programming.[link text][1] [1]: http://au-customer-service.com

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


×
×
  • Create New...