FROM CACHE - en_header

change menu background color debut theme

Solved
Tessmichelle
Tourist
8 0 1

Hi! 

I wanted to change the header color of my webshop to black, which I managed to do, but now it seems that the menu (background) has its own color as well. 

how do I change this?

TIA! 

Accepted Solution (1)

Accepted Solutions
itryhard
Excursionist
17 2 12

This is an accepted solution.

Are you trying to change the whole top header part to black? 

 

Looks like you just change the background color. 

 

This will make you header all black. you need to use the code from above to change the menu colors to something different

 

header.site-header {
  background-color: #000000 ;
}
  
.site-header__mobile-nav {
  background-color: #000000 !important;
}

div#shopify-section-header.shopify-section {
  background-color: #000000 ;
}

 

View solution in original post

Replies 10 (10)
itryhard
Excursionist
17 2 12

Send URL I can check it out

 

Just in case I don't see the message I made a quick video for some  guidance on how to.

 

https://youtu.be/vfLl9mTi-90

 

 

#AccessibleNav .site-nav__link {
 color: #FFFFFF;
}

 

Add this code to the bottom of theme.scss.liqd

Tessmichelle
Tourist
8 0 1

added it but still shows white.

 

URL: https://bella-box-beauty.myshopify.com/

password: claffi

itryhard
Excursionist
17 2 12

This is an accepted solution.

Are you trying to change the whole top header part to black? 

 

Looks like you just change the background color. 

 

This will make you header all black. you need to use the code from above to change the menu colors to something different

 

header.site-header {
  background-color: #000000 ;
}
  
.site-header__mobile-nav {
  background-color: #000000 !important;
}

div#shopify-section-header.shopify-section {
  background-color: #000000 ;
}

 

Tessmichelle
Tourist
8 0 1

It worked! Thank you so much!

martinezarpaula
New Member
2 0 1

Thaaaaaaank you for this!

teobaldoc
New Member
1 0 0

I just tried to used those lines of code but nothing happened

diego_ezfy
Shopify Partner
2791 526 714

@teobaldoc 

Are you using the Debut theme? Can you please forward your website so we'll take a look.

Kind regards,
Diego

Kcasucci
New Member
1 0 0

I'm trying to change the navigation drop-down menu color does anyone know how to do this?

Sugarcoated
Tourist
7 0 1

DISCLAIMER: I am not a professional coder... I'm simply trying to make my website work with what I have... but this is how I was able to get my background to change to the color I wanted in my dropdown list.

I went into the theme.css file and found the .site-nav__dropdown code. There you'll see the background where you can change your color to whatever you want. I'll show my example below...

Most people use "background-color: #ffffff;" but w/e. Hope this helps!

 

.site-nav__dropdown {
  display: none;
  position: absolute;
  padding: 11px 30px 11px 0;
  margin: 0;
  z-index: 7;
  text-align: left;
  border: 1px solid var(--color-border);
  background: #FFFFFF;
  left: -1px;
  top: 41px; }
  .site-nav__dropdown .site-nav__link {
    padding: 4px 15px 5px; }
  .site-nav--active-dropdown .site-nav__dropdown {
    display: block; }
  .site-nav__dropdown li {
    display: block; }

 

 

FilipposD
Shopify Partner
45 1 18

Here's a guide to help with finding out the right code to change if you're uncertain.