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
  • Created
  • Last Reply

Top Posters In This Topic

@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

How to: Setup Password & Share url Insert Custom CSS - Page Header - Upload Custom Font - Upload File - Find Block ID - Contact Customer Care

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

How to: Setup Password & Share url Insert Custom CSS - Page Header - Upload Custom Font - Upload File - Find Block ID - Contact Customer Care

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

How to: Setup Password & Share url Insert Custom CSS - Page Header - Upload Custom Font - Upload File - Find Block ID - Contact Customer Care

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

 

Email me if you have need any help (free, of course.). Answer within 24 hours. 
Or send to forum message

How to: Setup Password & Share url Insert Custom CSS - Page Header - Upload Custom Font - Upload File - Find Block ID - Contact Customer Care

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

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.