Fixed navigation bar with logo and Donate button

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:

This is the nav once you begin scrolling:

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

Thank you!

Hi,

Fixed button only or fixed header with solid background + Logo + button?

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.

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

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?

11 hours ago, pleni said:

Hi there! Thank you!

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

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

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

On 5/27/2022 at 6:50 AM, pleni said:

Hi there! Thank you!

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

Can you add & keep the code? We will checking it again