Solved

I want my header to be black

learningdesign
Shopify Partner
109 1 15

https://6xilfks8zyytyzz0-61177004168.shopifypreview.com/pages/shop

I want my header to be black can some one please help me in it

Password  miaffi

Accepted Solution (1)

Fyney
Excursionist
37 4 15

This is an accepted solution.

Your logo is not visible beacouse of this lil part of code, just go to edit code > base.css and add this 

.branding img {
   filter: unset !important;
}

 

but if you know where you added this then, deleted and you got your header!

View solution in original post

Replies 17 (17)

yashgarg
Shopify Partner
102 26 32

Hey @learningdesign ,

 

Go to theme.css file and add the following code at the end

.header__mid {

background: black;

}

 

Thanks

Yash Garg

If this works for you, please give it a like and mark it as the solution! Thanks 🙂
Feel free to contact me for Shopify tech support
Email: yashgarg.tech@gmail.com
learningdesign
Shopify Partner
109 1 15

It did not work

yashgarg
Shopify Partner
102 26 32

Just for confirmation - you meant this right ?

yashgarg_0-1705318391827.png

 

If earlier solution did not work, try this

.header__mid {

background: black !important;

}

 

 

If this works for you, please give it a like and mark it as the solution! Thanks 🙂
Feel free to contact me for Shopify tech support
Email: yashgarg.tech@gmail.com
learningdesign
Shopify Partner
109 1 15

Not home page home page is fine open any other sub page i need it black  and the menu buttons white so it can be visible

Capture.PNG

learningdesign
Shopify Partner
109 1 15

in customiser it worked but then logo  icons and menu buttons  not visible

yashgarg
Shopify Partner
102 26 32

can you paste screenshot

If this works for you, please give it a like and mark it as the solution! Thanks 🙂
Feel free to contact me for Shopify tech support
Email: yashgarg.tech@gmail.com

Anshul_arora
Trailblazer
233 48 30

Hello @learningdesign ,

As per my understanding you are looking to change the background of the header section.

You can change the background color by adding the below mentioned code.

Please add the below mentioned code by following these steps -:

1. Go to Online Store - Themes- Click on three dots ->Edit Code

2. Search for theme.liquid file and open it.

3. Add the below mentioned code at the bottom of theme.liquid file before </body> tag

<style>

.header__mid {
background-color: black;
}

</style>

4. Save changes.

Output -> https://prnt.sc/87-pFd6KQvIE

I hope the solution helps you.

Please let me know if you have any query.

I look forward to your response.

Please remember to like and accept the solution to help other store owners.

For Shopify Design & Development | Custom Coding -Visit Here
learningdesign
Shopify Partner
109 1 15

not homepage please open any other page there you will se white space in heading i want that part to be black

learningdesign
Shopify Partner
109 1 15

@Fyney    CAN SOMEONE PLEASE HELP ME IN THIS ?

Fyney
Excursionist
37 4 15

Do you want this part to be black too?Screenshot 2024-01-15 121705.png

 

Fyney
Excursionist
37 4 15

This is an accepted solution.

Your logo is not visible beacouse of this lil part of code, just go to edit code > base.css and add this 

.branding img {
   filter: unset !important;
}

 

but if you know where you added this then, deleted and you got your header!

Fyney
Excursionist
37 4 15

Screenshot 2024-01-15 122204.png

 

Fyney
Excursionist
37 4 15

Screenshot 2024-01-15 124351.png

 

Fyney
Excursionist
37 4 15

Let me help you change the color of the menu icon

 

1. go to base.css

2 scroll down to the bottom part

 add this:

 

/*change the hamburger icon color*/
.push-menu-btn>svg {
    fill: white !important;
}

 

Screenshot 2024-01-15 124219.png

 

Fyney
Excursionist
37 4 15

I'm also thinking you don't want the header and the images be separated by a white space of blank:

Screenshot 2024-01-15 124913.png

 

To fix this, do this

1. go to base.css

2 scroll down to the bottom part

 add this:

 

/*removes the gap between the header and body*/
header#ntheader {
    height: 0px !important;
}
Fyney
Excursionist
37 4 15

this is what it would look like, with all the changes i told you:

Screenshot 2024-01-15 130110.png

 

Fyney
Excursionist
37 4 15

did it worked?