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

Brine/Keene sticky navigation


bluefluidmotion

Question

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
Link to post
  • Answers 6
  • Created
  • Last Reply

Top Posters For This Question

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)

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


You can send your question to my email to get detail answer. / How to Setup Password & Share URL 

-- I came back. Will answer soon.

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

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

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

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