Solved

How can I change my header background color full black?

MohammedZoubi
Explorer
46 0 3

Good day everyone. 

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

Accepted Solutions (3)
oscprofessional
Shopify Partner
15830 2369 3072

This is an accepted solution.

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

oscprofessional_0-1618483535635.png

 

Get pass your Store Core Web Vital Free Speed Optimization Audit, Chat on WhatsApp | Skype : oscprofessionals-87 | Email: pallavi@oscprofessionals.com | Custom Pricing Wholesale App : Free | Hire us | Guaranteed Site Speed Optimization | Website Free Audit | Shopify Theme Customization | Build Shopify Private App | Shopify SEO | Digital Marketing

View solution in original post

oscprofessional
Shopify Partner
15830 2369 3072

This is an accepted solution.

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

#header-navigation {
    background-color: black;
}
Get pass your Store Core Web Vital Free Speed Optimization Audit, Chat on WhatsApp | Skype : oscprofessionals-87 | Email: pallavi@oscprofessionals.com | Custom Pricing Wholesale App : Free | Hire us | Guaranteed Site Speed Optimization | Website Free Audit | Shopify Theme Customization | Build Shopify Private App | Shopify SEO | Digital Marketing

View solution in original post

oscprofessional
Shopify Partner
15830 2369 3072

This is an accepted solution.

Hello MohammedZoubi,
To remove that white section.
Add this css

footer {
    margin-top: 0px;
}
Get pass your Store Core Web Vital Free Speed Optimization Audit, Chat on WhatsApp | Skype : oscprofessionals-87 | Email: pallavi@oscprofessionals.com | Custom Pricing Wholesale App : Free | Hire us | Guaranteed Site Speed Optimization | Website Free Audit | Shopify Theme Customization | Build Shopify Private App | Shopify SEO | Digital Marketing

View solution in original post

Replies 28 (28)

oscprofessional
Shopify Partner
15830 2369 3072

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

Get pass your Store Core Web Vital Free Speed Optimization Audit, Chat on WhatsApp | Skype : oscprofessionals-87 | Email: pallavi@oscprofessionals.com | Custom Pricing Wholesale App : Free | Hire us | Guaranteed Site Speed Optimization | Website Free Audit | Shopify Theme Customization | Build Shopify Private App | Shopify SEO | Digital Marketing
MohammedZoubi
Explorer
46 0 3

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

 

oscprofessional
Shopify Partner
15830 2369 3072

Hi,
Please share your site url.

Get pass your Store Core Web Vital Free Speed Optimization Audit, Chat on WhatsApp | Skype : oscprofessionals-87 | Email: pallavi@oscprofessionals.com | Custom Pricing Wholesale App : Free | Hire us | Guaranteed Site Speed Optimization | Website Free Audit | Shopify Theme Customization | Build Shopify Private App | Shopify SEO | Digital Marketing
MohammedZoubi
Explorer
46 0 3
oscprofessional
Shopify Partner
15830 2369 3072

This is an accepted solution.

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

oscprofessional_0-1618483535635.png

 

Get pass your Store Core Web Vital Free Speed Optimization Audit, Chat on WhatsApp | Skype : oscprofessionals-87 | Email: pallavi@oscprofessionals.com | Custom Pricing Wholesale App : Free | Hire us | Guaranteed Site Speed Optimization | Website Free Audit | Shopify Theme Customization | Build Shopify Private App | Shopify SEO | Digital Marketing
Intulani
Excursionist
20 0 9

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

Zworthkey
Shopify Partner
5581 642 1565

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

Thank you

Intulani
Excursionist
20 0 9

The url is productableme.com

Thank you

Zworthkey
Shopify Partner
5581 642 1565

@Intulani you want to change your header black

Intulani
Excursionist
20 0 9

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. 

MohammedZoubi
Explorer
46 0 3

password is whadre

MohammedZoubi
Explorer
46 0 3

@oscprofessional pasword is whadre

oscprofessional
Shopify Partner
15830 2369 3072

This is an accepted solution.

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

#header-navigation {
    background-color: black;
}
Get pass your Store Core Web Vital Free Speed Optimization Audit, Chat on WhatsApp | Skype : oscprofessionals-87 | Email: pallavi@oscprofessionals.com | Custom Pricing Wholesale App : Free | Hire us | Guaranteed Site Speed Optimization | Website Free Audit | Shopify Theme Customization | Build Shopify Private App | Shopify SEO | Digital Marketing
MohammedZoubi
Explorer
46 0 3

Thank you so much sir! Now its better. 

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

 

oscprofessional
Shopify Partner
15830 2369 3072

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;
}
Get pass your Store Core Web Vital Free Speed Optimization Audit, Chat on WhatsApp | Skype : oscprofessionals-87 | Email: pallavi@oscprofessionals.com | Custom Pricing Wholesale App : Free | Hire us | Guaranteed Site Speed Optimization | Website Free Audit | Shopify Theme Customization | Build Shopify Private App | Shopify SEO | Digital Marketing
Intulani
Excursionist
20 0 9

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

Kinjaldavra
Shopify Partner
2302 570 1422


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

 

Intulani
Excursionist
20 0 9

@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 

oscprofessional
Shopify Partner
15830 2369 3072

Hello Intulani,
Add this css at the bottom of
Online Store->Theme->Edit code->Assets->theme.css

header.site-header.border-bottom.logo--left {
    background-color: #ccc;
}
.grid.grid--no-gutters.grid--table.site-header__mobile-nav {
    background-color: #ccc;
}
button.btn--link.site-header__icon.site-header__search-toggle.js-drawer-open-top {
    color: #fff;
}
a.site-header__icon.site-header__cart {
    color: #fff;
}


Change the color as per your choice.
Hope this will work for you.
Thanks....

Get pass your Store Core Web Vital Free Speed Optimization Audit, Chat on WhatsApp | Skype : oscprofessionals-87 | Email: pallavi@oscprofessionals.com | Custom Pricing Wholesale App : Free | Hire us | Guaranteed Site Speed Optimization | Website Free Audit | Shopify Theme Customization | Build Shopify Private App | Shopify SEO | Digital Marketing
Intulani
Excursionist
20 0 9

@oscprofessional The color changed successfully! But the menu tab to the far left is still black and I can't seem to change it.

Also, I would like to move the logo to the middle and the menu lines to the left 

oscprofessional
Shopify Partner
15830 2369 3072

Hello Intulani,
To change the color of menu tab and To make footer shorter by creating two columns instead of one.
Add this css

button.btn--link.site-header__icon.site-header__menu.js-mobile-nav-toggle.mobile-nav--open {
    color: #fff;
}
@media only screen and (max-width: 749px){
.site-footer__item.site-footer__item--one-half {
    flex: 1 1 50%;
}
}
Get pass your Store Core Web Vital Free Speed Optimization Audit, Chat on WhatsApp | Skype : oscprofessionals-87 | Email: pallavi@oscprofessionals.com | Custom Pricing Wholesale App : Free | Hire us | Guaranteed Site Speed Optimization | Website Free Audit | Shopify Theme Customization | Build Shopify Private App | Shopify SEO | Digital Marketing
Intulani
Excursionist
20 0 9

@oscprofessional Thank you so much! It worked! 

Now I just want to move the logo to the center and the menu tab on the left 🙂

Thanks a lot! 

Intulani
Excursionist
20 0 9

Hello @oscprofessional. @

I have added the user login button to my tab and i need code to change the color to white on the debut theme. 

Thank you.

MohammedZoubi
Explorer
46 0 3

Thank you so much @oscprofessional . 

I have another problem on the Footer area.. I cant remove this white section. Please see the picture below

Capture1.PNG

oscprofessional
Shopify Partner
15830 2369 3072

This is an accepted solution.

Hello MohammedZoubi,
To remove that white section.
Add this css

footer {
    margin-top: 0px;
}
Get pass your Store Core Web Vital Free Speed Optimization Audit, Chat on WhatsApp | Skype : oscprofessionals-87 | Email: pallavi@oscprofessionals.com | Custom Pricing Wholesale App : Free | Hire us | Guaranteed Site Speed Optimization | Website Free Audit | Shopify Theme Customization | Build Shopify Private App | Shopify SEO | Digital Marketing
MohammedZoubi
Explorer
46 0 3

Thank you so much. Now my website is ready to launch. Thank you so much @oscprofessional 

Bhaktraj
Visitor
2 0 0

Hi, my website url is trenfort.com
I am using a ride theme. I want to keep the menu bar color and footer color the same (i.e. black). But when I try to change it from theme settings via color scheme it also changes the color of the body and product page which I dont want. Please help. 

MohammedZoubi
Explorer
46 0 3

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

 

Capture.PNG