Jump to content

Change Navigation Bar Colour on One Page/Make logo smaller

Recommended Posts

Hi! I was wondering if anyone can help me come up with a code to change my navigation bar colours to be different on my products page.

It is currently transparent and gets lost when scrolling.

My other question is how to code my logo and navigation bar to be fixed but get smaller upon scrolling.

The template I am using is Brine.

Link to comment
  • Replies 9
  • Views 3.8k
  • Created
  • Last Reply

@ecs_cares

1. Add to Home > Design > Custom CSS

If it doesn't work, please share product page url to check code.

.collection-type-products.view-item header.Header {
    background: #f1f2f3 !important;
}

2.  Fixed

.Header.Header--top {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    z-index: 999;
}

3. get smaller upon scrolling.

You need to use JavaScript, a bit complicated. Wait for someone to help you.

(or contact me, in signature (not free))

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
3 hours ago, tuanphan said:

@ecs_cares

1. Add to Home > Design > Custom CSS

If it doesn't work, please share product page url to check code.


.collection-type-products.view-item header.Header {
    background: #f1f2f3 !important;
}

2.  Fixed


.Header.Header--top {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    z-index: 999;
}

3. get smaller upon scrolling.

You need to use JavaScript, a bit complicated. Wait for someone to help you.

(or contact me, in signature (not free))

Okay, thank you so much!! 🙂

Link to comment
  • 1 year later...
On 11/25/2020 at 8:22 AM, NickBuild2 said:

Hi @tuanphan was wondering if you could help. I need transparent header on all pages except the blog page. I've tried targeting the page with #collection but it's not working. 

 

body#collection-5fb45b66870d86070fc87c95 header#header { 
 
    background-color: #000 !important;

}

Can you share site url? We can help easier

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
  • 2 months later...
On 2/19/2021 at 4:18 AM, toripintar said:

Hi @tuanphan, I am similarly trying to turn off the transparency on a single page, my new Member Area sales page. This is the url: goldfish-grape-wehm.squarespace.com. The page is https://www.mountainprojectmt.com/member-areas-1

Thank you so much!

Tori

You want to change navigation items color or??

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
  • 2 weeks later...
  • 2 weeks later...

Thank so much for all the help everyone. 

In case anyone else is in this situation, here is the code that allowed me to make my header bar not transparent and choose the color on a single page. 

Add to page header

<style>
  .header-announcement-bar-wrapper {
    background-color: #282D30;
}

Link to comment

Archived

This topic is now archived and is closed to further replies.


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