How can I change my header background color full black?

Store Design

Topic summary

Main issue: change the store header background to full black, with related style tweaks for footer, icons, and mobile layout.

What worked (via custom CSS in theme assets):

  • Header to black by targeting the header container (e.g., #header-navigation or Debut’s header selectors) and setting background-color: black. Icons set to white.
  • Footer background color changed by styling #shopify-section-footer.
  • Removed unwanted white space above footer by adjusting footer margin-top to 0.
  • On Debut (mobile), created a two-column footer using responsive CSS (50% width items).

Implementation details:

  • Edits made in Online Store > Theme > Edit code, adding CSS at the bottom of styles.min.css or theme.css depending on theme.
  • Images were shared to illustrate the header and footer areas, but the solutions relied on CSS changes.

Outcomes:

  • First store’s header/footer styling resolved; site ready to launch.
  • Debut store: color changes and two-column footer confirmed working.

Open items:

  • Debut: center the logo and move the menu icon to the left not yet provided; request to make the user login icon white remains pending.
  • Ride theme: keep only header/footer black without affecting body/product pages; no solution posted yet.
Summarized with AI on January 6. AI used: gpt-5.
1

Good day everyone.

I would like to ask some help… How can I change my header to full black?

2

Hello,
Please share your store URL with password (If Needed), So that I will give you proper solution here !

1 Like
3

I apologize. Why will I send my password? Is it necessary?

4

Hi,
Please share your site url.

1 Like
5

I just need to change this to full black. Please see the picture below.

Capture.PNG
Capture.PNG1896×912 230 KB

6

https://arabisk-vape.myshopify.com/

7

Your site is password protected.
Can you please share password?

oscprofessional_0-1618483535635.png
oscprofessional_0-1618483535635.png1207×691 137 KB

8

Hello. I am also interested in the solution to this.

Also, on mobile view, I want my footer to have 2 columns instead of one long column. looking for help

9

@Intulani Share me your store URL with a password if needed.

Thank you

10

password is whadre

11

The url is productableme.com

Thank you

12

@oscprofessional pasword is whadre

13

@Intulani you want to change your header black

14

Yes. I want to make the header black and make the icons white.

I also want to make the footer have two columns instead of one long column

I would also like to move the logo to the middle and the menu tab to the left

Thank you.

15

Hello MohammedZoubi,
Add this css at the bottom of
Online Store->Theme->Edit code->Assets->styles.min.css

#header-navigation {
    background-color: black;
}
16

Thank you so much sir! Now its better.

Is it the same HTML code for footer to change the background colour ?

17

Hello MohammedZoubi,
To change the footer background color.
Add this css at the bottom of
Online Store->Theme->Edit code->Assets->styles.min.css

#shopify-section-footer {
    background-color: #ccc;
}
18

Hello. I am still waiting for some help. I am using the debut theme

19

please Go to Online Store->Theme->Edit code then go to assets/theme.css ->paste below code at the bottom of the file.

#shopify-section-footer {
    background-color: #000000 !important;
}
1 Like
20

@Kinjaldavra @Zworthkey Hello. I have a different theme but a similar problem. I am using the debut theme

I would like to do three things.

  1. Change the header to black

  2. Move the logo to the middle and the menu tab to the left

  3. Make my footer shorter by creating two columns instead of one