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

[learningdesign]

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

[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 tag

.header__mid { background-color: black; }

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.

[yashgarg]

Just for confirmation - you meant this right ?

If earlier solution did not work, try this

.header__mid {

background: black !important;

}

[yashgarg]

can you paste screenshot

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

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]

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]

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]

[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?