Jump to content

Change Scrolling Navigation Bar Colour

Recommended Posts

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

Link to comment
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

BeyondSpace - Squarespace Website Developer

🖼️ Lightbox Studio (Enable Pinch/Zoom on lightbox)
🗓️ Delivery Date Picker (Squarespace Date format)
💫 Animated Buttons (Referral URL)
🥳 Sparkplugin Customisations Browsers (Browse +100 Spark plugin customisations)
🥳 Elfsight Template Browsers (Browse +1000 Elfsight widget Templates)

If you find my answer useful, let's leave a like or upvote so others with the same issue can find their solution. Thank you!

 

Link to comment

My testing result

image.thumb.png.925ae996483fb2ef175d8e87cd7a0a58.png

BeyondSpace - Squarespace Website Developer

🖼️ Lightbox Studio (Enable Pinch/Zoom on lightbox)
🗓️ Delivery Date Picker (Squarespace Date format)
💫 Animated Buttons (Referral URL)
🥳 Sparkplugin Customisations Browsers (Browse +100 Spark plugin customisations)
🥳 Elfsight Template Browsers (Browse +1000 Elfsight widget Templates)

If you find my answer useful, let's leave a like or upvote so others with the same issue can find their solution. Thank you!

 

Link to comment
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

Link to comment
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?

image.thumb.png.2232095f34aa8dee32c1a255b32a97e3.png

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

BeyondSpace - Squarespace Website Developer

🖼️ Lightbox Studio (Enable Pinch/Zoom on lightbox)
🗓️ Delivery Date Picker (Squarespace Date format)
💫 Animated Buttons (Referral URL)
🥳 Sparkplugin Customisations Browsers (Browse +100 Spark plugin customisations)
🥳 Elfsight Template Browsers (Browse +1000 Elfsight widget Templates)

If you find my answer useful, let's leave a like or upvote so others with the same issue can find their solution. Thank you!

 

Link to comment

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

image.thumb.png.749b724cc8fdf7c09218f087703b3c22.png

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

image.thumb.png.749b724cc8fdf7c09218f087703b3c22.png

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?

Link to comment
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

BeyondSpace - Squarespace Website Developer

🖼️ Lightbox Studio (Enable Pinch/Zoom on lightbox)
🗓️ Delivery Date Picker (Squarespace Date format)
💫 Animated Buttons (Referral URL)
🥳 Sparkplugin Customisations Browsers (Browse +100 Spark plugin customisations)
🥳 Elfsight Template Browsers (Browse +1000 Elfsight widget Templates)

If you find my answer useful, let's leave a like or upvote so others with the same issue can find their solution. Thank you!

 

Link to comment
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

Edited by bangank36

BeyondSpace - Squarespace Website Developer

🖼️ Lightbox Studio (Enable Pinch/Zoom on lightbox)
🗓️ Delivery Date Picker (Squarespace Date format)
💫 Animated Buttons (Referral URL)
🥳 Sparkplugin Customisations Browsers (Browse +100 Spark plugin customisations)
🥳 Elfsight Template Browsers (Browse +1000 Elfsight widget Templates)

If you find my answer useful, let's leave a like or upvote so others with the same issue can find their solution. Thank you!

 

Link to comment
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?

Link to comment
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;
}

BeyondSpace - Squarespace Website Developer

🖼️ Lightbox Studio (Enable Pinch/Zoom on lightbox)
🗓️ Delivery Date Picker (Squarespace Date format)
💫 Animated Buttons (Referral URL)
🥳 Sparkplugin Customisations Browsers (Browse +100 Spark plugin customisations)
🥳 Elfsight Template Browsers (Browse +1000 Elfsight widget Templates)

If you find my answer useful, let's leave a like or upvote so others with the same issue can find their solution. Thank you!

 

Link to comment
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.

 

Screen Shot 2021-11-22 at 8.30.01 pm.png

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

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.