Change Navigation Bar Colour on One Page/Make logo smaller

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.

@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))

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!! 🙂

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;

}

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

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

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

On 2/21/2021 at 2:27 AM, tuanphan said:

You want to change navigation items color or??

I want to make the main navigation menu a color on one page only. 

On 2/24/2021 at 12:05 AM, toripintar said:

I want to make the main navigation menu a color on one page only. 

Add to Page Header

<style>
  .header-nav * {
    color: black !important;
}
</style>

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