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

Fixed menu in Brine templates


rschnell1

Question

Wondering if anyone has CSS code to make sure my navigation remains fixed at the top of the browser on PC, as well as mobile. I know there are some out there, but looking for any that have been vetted.

Thanks!

Edited by rschnell1
Initial Revision
Link to comment
  • Answers 10
  • Created
  • Last Reply

Top Posters For This Question

10 answers to this question

Recommended Posts

  • 0

I'm making the site 1800px max for now, so I put this:

.Header (this will fix it in place)

{position: fixed; (site width) width: 1800px; (not sure this is necessary) margin: 0; (so it's on top of all the layers) z-index: 1000;}

My site is actually not 1800px wide, because I have side padding, but however the SP code was written, it disregards the padding amount and it works with matching the header size here to the site width.

Now I got to figure out how to make it shrink down. Will post once I figure it out.

If your site stretches all the way across, you can put "width: 100%;"

Edited by Bill1965
Link to comment
  • 0

@rschnell1 Add to Home > Design > Custom CSS


/* Fixed Top Header: Logo, Social Icon */
header.Header.Header--top {
   top: 0;
   left: 0;
   right: 0;
   z-index: 999;
   position: fixed;
}
/* Fixed Navigation */
header.Header.Header--bottom.Header--overlay {
   position: fixed;
   top: 70px;
   left: 0;
   right: 0;
   z-index: 999;
}




Email me if you have need any help (free, of course.). Answer within 24 hours.

How to: Setup password & share url - Insert Custom CSS - Page Header - Upload Custom Font - Upload File - Find Block ID - Contact Customer Care

Link to comment
  • 0
15 hours ago, SouthernSunEvents said:

@tuanphan Trying to figure this out as well for mobile and tablet.

http://www.southernsunevents.com

PW: sse2020

 

I see you did for logo. Now you want do similar for both navigation & logo?

Email me if you have need any help (free, of course.). Answer within 24 hours.

How to: Setup password & share url - Insert Custom CSS - Page Header - Upload Custom Font - Upload File - Find Block ID - Contact Customer Care

Link to comment
  • 0
On 7/20/2021 at 7:56 AM, SouthernSunEvents said:

Still trying to tackle this one. I can't seem to keep the logo/nav sticky at the top. Anyone have any ideas? 

 

http://www.southernsunevents.com

PW: sse2020

Hi. Sticky on desktop only or tablet/mobile?

Email me if you have need any help (free, of course.). Answer within 24 hours.

How to: Setup password & share url - Insert Custom CSS - Page Header - Upload Custom Font - Upload File - Find Block ID - Contact Customer Care

Link to comment

Create an account or sign in to comment

You need to be a member in order to leave a comment


×
×
  • Create New...