Jump to content
Search In
  • More options...
Find results that contain...
Find results in...
Advanced Search

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 post
  • Replies 3
  • 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))

You can send your question to my email to get detail answer. / How to Setup Password & Share URL 

-- Pour your heart into it

Link to post
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 post
  • 1 year later...

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;

}

Link to post

Create an account or sign in to comment

You need to be a member in order to leave a comment


×
×
  • Create New...