How can I change my webpage header to black?

[learningdesign]

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

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

Password  miaffi

[yashgarg]

Hey @learningdesign ,

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

.header__mid {

background: black;

}

Thanks

Yash Garg

[learningdesign]

It did not work

[yashgarg]

Just for confirmation - you meant this right ?

If earlier solution did not work, try this

.header__mid {

background: black !important;

}

[learningdesign]

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

[learningdesign]

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

[yashgarg]

can you paste screenshot

[Anshul_arora]

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.

[learningdesign]

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

[learningdesign]

@Fyney    CAN SOMEONE PLEASE HELP ME IN THIS ?

[Fyney]

Do you want this part to be black too?

[Fyney · 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]

[Fyney]

[Fyney]

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

[Fyney]

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

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]

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

[Fyney]

did it worked?