change Header backgroud colour

Solved

change Header backgroud colour

Alyssa4965
Excursionist
44 0 8

I want to add colour to this header, I want the colour to be F6B700 using code. Please i need help. I'm using wookie theme logo background.PNG

 

Accepted Solutions (3)

BSSCommerce-HDL
Shopify Expert
1004 342 408

This is an accepted solution.

Hi @Alyssa4965
Step 1: Go to Shopify Admin -> Online Store ->Theme -> Edit code

BSSCommerceHDL_0-1718724593545.png

 

Step 2: Search file base.css, theme.css, styles.css or theme.scss.liquid

BSSCommerceHDL_1-1718724598153.png

 

Step 3: Insert the below code at the bottom of the file -> Save

.tt-desktop-header {
    background-color: #F6B700 !important;
}

Hope this can help you,

If our suggestions are useful, please let us know by giving it a like or marking it as a solution. Thank you 😍

If our suggestions are useful, please let us know by giving it a like, marking it as a solution, or donating here .


B2B Solution & Custom Pricing | Product Labels by BSS


Need help from our expert? Kindly share your request with us via community@bsscommerce.com


BSS Commerce - Full-service eCommerce Agency

View solution in original post

BSSCommerce-HDL
Shopify Expert
1004 342 408

This is an accepted solution.

Hi @Alyssa4965
Step 1: Go to Shopify Admin -> Online Store ->Theme -> Edit code

BSSCommerceHDL_0-1718725613720.png

 

Step 2: Search file theme.liquid

Step 3: Inside head tags. You need create style tags. After insert my code inside style tag

BSSCommerceHDL_1-1718725654489.png

Hope this can help you,

If our suggestions are useful, please let us know by giving it a like or marking it as a solution. Thank you 😍

If our suggestions are useful, please let us know by giving it a like, marking it as a solution, or donating here .


B2B Solution & Custom Pricing | Product Labels by BSS


Need help from our expert? Kindly share your request with us via community@bsscommerce.com


BSS Commerce - Full-service eCommerce Agency

View solution in original post

BSSCommerce-HDL
Shopify Expert
1004 342 408

This is an accepted solution.

Hi @Alyssa4965, Similar to above, insert this code into the style tag in the theme.liquid file

 

.tt-obj-options.obj-move-right.tt-position-absolute {
    display: flex !important;
}


.tt-parent-box:nth-child(2) {
    order: 3;
}

.tt-parent-box:nth-child(3) {
    order: 1;
}

 

Here is result: 

BSSCommerceHDL_0-1718728969286.png

Hope this can help you,

If our suggestions are useful, please let us know by giving it a like or marking it as a solution. Thank you 😍

 

If our suggestions are useful, please let us know by giving it a like, marking it as a solution, or donating here .


B2B Solution & Custom Pricing | Product Labels by BSS


Need help from our expert? Kindly share your request with us via community@bsscommerce.com


BSS Commerce - Full-service eCommerce Agency

View solution in original post

Replies 11 (11)

BSSCommerce-B2B
Shopify Expert
554 111 134

Hi @Alyssa4965 
Can you kindly share your store link (with the password, if any) with us? We will check it and suggest you a solution if possible.

If our suggestions are useful, please let us know by giving it a like, marking it as a solution.


B2B Solution & Custom Pricing |BSS: B2B Portal, Quote, Net 30 | BSS: B2B Login Lock Hide Price


Need help from our expert? Kindly share your request with us via community@bsscommerce.com


BSS Commerce - Full-service eCommerce Agency
Alyssa4965
Excursionist
44 0 8

BSSCommerce-HDL
Shopify Expert
1004 342 408

This is an accepted solution.

Hi @Alyssa4965
Step 1: Go to Shopify Admin -> Online Store ->Theme -> Edit code

BSSCommerceHDL_0-1718724593545.png

 

Step 2: Search file base.css, theme.css, styles.css or theme.scss.liquid

BSSCommerceHDL_1-1718724598153.png

 

Step 3: Insert the below code at the bottom of the file -> Save

.tt-desktop-header {
    background-color: #F6B700 !important;
}

Hope this can help you,

If our suggestions are useful, please let us know by giving it a like or marking it as a solution. Thank you 😍

If our suggestions are useful, please let us know by giving it a like, marking it as a solution, or donating here .


B2B Solution & Custom Pricing | Product Labels by BSS


Need help from our expert? Kindly share your request with us via community@bsscommerce.com


BSS Commerce - Full-service eCommerce Agency
Alyssa4965
Excursionist
44 0 8

I've pasted the code there. It's not showing yet. I only have theme.css and style.rtl.css in my themecode.PNG

 

BSSCommerce-HDL
Shopify Expert
1004 342 408

This is an accepted solution.

Hi @Alyssa4965
Step 1: Go to Shopify Admin -> Online Store ->Theme -> Edit code

BSSCommerceHDL_0-1718725613720.png

 

Step 2: Search file theme.liquid

Step 3: Inside head tags. You need create style tags. After insert my code inside style tag

BSSCommerceHDL_1-1718725654489.png

Hope this can help you,

If our suggestions are useful, please let us know by giving it a like or marking it as a solution. Thank you 😍

If our suggestions are useful, please let us know by giving it a like, marking it as a solution, or donating here .


B2B Solution & Custom Pricing | Product Labels by BSS


Need help from our expert? Kindly share your request with us via community@bsscommerce.com


BSS Commerce - Full-service eCommerce Agency
Alyssa4965
Excursionist
44 0 8

Do you mind me giving you access to my site? It's not going through please

Alyssa4965
Excursionist
44 0 8

Thanks, I just got it. It work out well.

BSSCommerce-HDL
Shopify Expert
1004 342 408

Hi @Alyssa4965, I'm very happy to hear that. Have a good day 😍

If our suggestions are useful, please let us know by giving it a like, marking it as a solution, or donating here .


B2B Solution & Custom Pricing | Product Labels by BSS


Need help from our expert? Kindly share your request with us via community@bsscommerce.com


BSS Commerce - Full-service eCommerce Agency
Alyssa4965
Excursionist
44 0 8

 Is there also a way you can help me to rearrange the top menu of my website? I want need help to come first, followed by my account, then my gifts please?new top menu.PNG

 

BSSCommerce-HDL
Shopify Expert
1004 342 408

This is an accepted solution.

Hi @Alyssa4965, Similar to above, insert this code into the style tag in the theme.liquid file

 

.tt-obj-options.obj-move-right.tt-position-absolute {
    display: flex !important;
}


.tt-parent-box:nth-child(2) {
    order: 3;
}

.tt-parent-box:nth-child(3) {
    order: 1;
}

 

Here is result: 

BSSCommerceHDL_0-1718728969286.png

Hope this can help you,

If our suggestions are useful, please let us know by giving it a like or marking it as a solution. Thank you 😍

 

If our suggestions are useful, please let us know by giving it a like, marking it as a solution, or donating here .


B2B Solution & Custom Pricing | Product Labels by BSS


Need help from our expert? Kindly share your request with us via community@bsscommerce.com


BSS Commerce - Full-service eCommerce Agency
Alyssa4965
Excursionist
44 0 8

It really worked. I appreciate your effort. Thanks a lot