Jump to content

Fixed navigation bar with logo and Donate button

Recommended Posts

Site URL: http://plenitudpr.org

Hi there,

I would like one button from our navigation and our logo to remain fixed at the top of the screen when you scroll on the site. A perfect example of this is in charitywater.org.

This is the nav for their website before scrolling:

1568980639_ScreenShot2022-05-13at11_30_12AM.thumb.png.807e4543af842baea931e1266e3369f3.png

 

 

This is the nav once you begin scrolling:

1411794975_ScreenShot2022-05-13at11_30_26AM.thumb.png.f03a5de85935aa2bb941439c75d591b9.png

 

I would like to be able to do that with our site as well and also with our donate button.

 

Thank you!

Link to comment
  • Replies 7
  • Views 334
  • Created
  • Last Reply

Top Posters In This Topic

On 5/19/2022 at 12:16 AM, pleni said:

Hmm. I guess I would say a fixed narrow bar (just enough to give button some padding on top and bottom)  with solid background + logo + button.

Try adding to Design > Custom CSS

header.Header.Header--top {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    z-index: 9999;
}
main.Index {
    margin-top: 50px;
}

 

Email me if you have need any help (free, of course.). Answer within 24 hours. 
Or send to forum message

Contact Customer Care - Learn CSS - Buy me a coffee (thank you!)

Link to comment
On 5/20/2022 at 12:16 PM, tuanphan said:

Try adding to Design > Custom CSS

header.Header.Header--top {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    z-index: 9999;
}
main.Index {
    margin-top: 50px;
}

 

Hi there! Thank you!

I just tried adding it to the site but it didn't work. 😕 Any other thoughts?

Link to comment
  • 3 weeks later...
On 5/27/2022 at 7:14 AM, tuanphan said:

I see the code works here. What should header look like in your mind?

Hi there! It should look like the navigation that shows up when you start to scroll down on charitywater.org

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

Squarespace Webinars

Free online sessions where you’ll learn the basics and refine your Squarespace skills.

Hire a Designer

Stand out online with the help of an experienced designer or developer.