Change Scrolling Navigation Bar Colour

Site URL: https://www.ridgemontpartners.com.au/

Hello,

I am trying to change my scrolling navigation bar background colour from Burgundy to White.
I would also like the navigation links and logo to remain in the colour burgundy as you scroll.
At the moment, the whole navigation bar turns burgundy on scrolling and the navigation links + logo are not visible at all.

www.ridgemontpartners.com.au

Version 7.1

Thank you kindly

13 hours ago, michaelpga said:

Site URL: https://www.ridgemontpartners.com.au/

Hello,

I am trying to change my scrolling navigation bar background colour from Burgundy to White.
I would also like the navigation links and logo to remain in the colour burgundy as you scroll.
At the moment, the whole navigation bar turns burgundy on scrolling and the navigation links + logo are not visible at all.

www.ridgemontpartners.com.au

Version 7.1

Thank you kindly

Hi @michaelpga,

You can try adding in Home > Design > Custom Css

#header {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
}

.header-announcement-bar-wrapper {
  background: #fff;
}

Let me know how it works on your site

Press 👍 or mark this answer as solution to help another one too

My testing result

11 hours ago, bangank36 said:

Hi @michaelpga,

You can try adding in Home > Design > Custom Css

#header {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
}

.header-announcement-bar-wrapper {
  background: #fff;
}

Let me know how it works on your site

Press 👍 or mark this answer as solution to help another one too

Hey, thanks however I would like the navigation to be transparent until users start to scroll. On scrolling I would like the colour to change to white (as you have shown below). Is this possible? Thanks

2 hours ago, michaelpga said:

Hey, thanks however I would like the navigation to be transparent until users start to scroll. On scrolling I would like the colour to change to white (as you have shown below). Is this possible? Thanks

Hi @michaelpga,

Can you check on your site with header if the fixed position has been set yet?

If not, please set it and we can continue to figure out

On 11/17/2021 at 4:50 PM, bangank36 said:

Hi @michaelpga,

Can you check on your site with header if the fixed position has been set yet?

If not, please set it and we can continue to figure out

Hello, 

Yes, I have just changed it to the fixed position and it still does not turn transparent when sitting at the top of the page?

@michaelpga Add to Design > Custom CSS

body.homepage article section:first-child {
    padding-top: 0px !important;
}

body.homepage header#header {
    background-color: transparent !important;
}

body.homepage .header-announcement-bar-wrapper {
    background-color: transparent !important;
}

20 minutes ago, tuanphan said:

@michaelpga Add to Design > Custom CSS

body.homepage article section:first-child {
    padding-top: 0px !important;
}

body.homepage header#header {
    background-color: transparent !important;
}

body.homepage .header-announcement-bar-wrapper {
    background-color: transparent !important;
}

Thank you, this fixed the issue on the homepage, however all the other pages are still showing a white navigation bar when you land on each page? Is there a way to fix this?

11 hours ago, michaelpga said:

Thank you, this fixed the issue on the homepage, however all the other pages are still showing a white navigation bar when you land on each page? Is there a way to fix this?

Your site is private now. Pls turn on the protected password again

7 hours ago, bangank36 said:

Your site is private now. Pls turn on the protected password again

Hey there, sorry, Ive just changed the site back to pubic for now. Thank you 🙏 

On 11/20/2021 at 10:43 AM, michaelpga said:

Thank you, this fixed the issue on the homepage, however all the other pages are still showing a white navigation bar when you land on each page? Is there a way to fix this?

Thanks @tuanphan's solution

Beside that, I suggest adding to Home > Design > Custom Css to make the navigator white when scroll down.

body.homepage header#header.shrink {
  background: #fff !important;
}

Let me know how it works on your site

Press 👍 or mark this answer as solution to help another one too

5 hours ago, bangank36 said:

Thanks @tuanphan's solution

Beside that, I suggest adding to Home > Design > Custom Css to make the navigator white when scroll down.

body.homepage header#header.shrink {
  background: #fff !important;
}

Let me know how it works on your site

Press 👍 or mark this answer as solution to help another one too

Thank you, that worked for the homepage. However, can you please modify the code so that the same navigation style appears on all 7 of my site's pages?

3 hours ago, michaelpga said:

Thank you, that worked for the homepage. However, can you please modify the code so that the same navigation style appears on all 7 of my site's pages?

Hi, you can try adding this

#header:not(.shrink) .header-announcement-bar-wrapper {
  background: transparent;
}

#header.shrink .header-announcement-bar-wrapper {
  background: #fff;
}

Thanks @bangank36 - that has worked for all the pages now, however, the navigation 'Contact' button is not changing to the colour I have listed in "Site Styles'. I would like it to display with a burgundy background and white text. Do you know how I can change this?

See screenshot attached, thank you.

31 minutes ago, michaelpga said:

Thanks @bangank36 - that has worked for all the pages now, however, the navigation 'Contact' button is not changing to the colour I have listed in "Site Styles'. I would like it to display with a burgundy background and white text. Do you know how I can change this?

See screenshot attached, thank you.

 

Hi @bangank36, this white button only shows like this on homepage, on all other pages it displays in the correct colour...

@michaelpga It looks like you solved this?

On 11/26/2021 at 5:27 PM, tuanphan said:

@michaelpga It looks like you solved this?

Solved, thank you