change background color dropdown homepage

Solved
Highlighted
Tourist
10 0 1

Hi!

I'm with the Brooklyn theme and I have a question. 

I want my desktop dropdown menu to be like the mobile one, just on the homepage.

so with a black background and white text. I tried some of the CSS on the forum, but none worked.

 

Thank you very much!

 

Capture d’écran, le 2020-08-01 à 19.03.21.png

Capture d’écran, le 2020-08-01 à 19.02.22.png

0 Likes
Highlighted
Shopify Partner
2763 602 743

Hey @migrenier,

Please share your website URL. I will check and provide a solution here.

Thanks!

If helpful then please Like and Accept Solution.
Do you need custom changes on store ? Hire me.
Feel free to Contact me on dmw.webartisan@gmail.com
Follow us on Instagram @dmw.webartisan
0 Likes
Highlighted
Highlighted
Shopify Partner
2763 602 743

Hey @migrenier,

This needs admin access. Can you please provide your frontend URL and password?

So I can check.

Thanks!

If helpful then please Like and Accept Solution.
Do you need custom changes on store ? Hire me.
Feel free to Contact me on dmw.webartisan@gmail.com
Follow us on Instagram @dmw.webartisan
0 Likes
Highlighted
Tourist
10 0 1

Oops, www.a-deux.ca and the password is : michele

thank you!

0 Likes
Shopify Partner
2763 602 743

Hey @migrenier 

Please add following code in your assets/theme.scss.liquid or assets/timber.scss.liquid file.

.mobile-nav>.mobile-nav__item {background-color: #1f2021 !important;}
.site-nav__dropdown a, .site-nav__grandchild-dropdown a {background-color: #1f2021 !important;}
.header-wrapper .site-nav__link, .header-wrapper .site-header__logo a, .header-wrapper .site-nav__dropdown-link, .header-wrapper .site-nav--has-dropdown > a.nav-focus, .header-wrapper .site-nav--has-dropdown.nav-hover > a, .header-wrapper .site-nav--has-dropdown:hover > a {
color: #fff !important;
}
.site-nav__dropdown {background-color: #1f2021 !important;}
.header-wrapper.header-wrapper--transparent .site-nav--has-dropdown.nav-hover > .site-nav__link {color: #000000 !important;}
.site-nav__dropdown-grandchild ul {background-color: #1f2021 !important;}


Hope this works for you.


Thanks!

If helpful then please Like and Accept Solution.
Do you need custom changes on store ? Hire me.
Feel free to Contact me on dmw.webartisan@gmail.com
Follow us on Instagram @dmw.webartisan
0 Likes
Highlighted
Tourist
10 0 1

Yes it worked, thank you so much!!! But the boutique button is still white, can it be black as well and written in white like the dropdown?

thanks

0 Likes
Highlighted
Shopify Partner
2763 602 743

This is an accepted solution.

Hey @migrenier 

Solution for the boutique button.

Please add following code in your assets/theme.scss.liquid file.

 

.site-nav--has-dropdown:hover>a, .site-nav--has-dropdown>a.nav-focus, .site-nav--has-dropdown.nav-hover>a {
background-color: #1f2021 !important;
}

.header-wrapper.header-wrapper--transparent .site-nav--has-dropdown.nav-hover > .site-nav__link {color: #ffffff !important;}

 


Hope this works for you.


Thanks!

If helpful then please Like and Accept Solution.
Do you need custom changes on store ? Hire me.
Feel free to Contact me on dmw.webartisan@gmail.com
Follow us on Instagram @dmw.webartisan
0 Likes
Highlighted
Tourist
10 0 1

Yes thank you so much!!

Have a great day!

1 Like
Highlighted
Tourist
10 0 1

Hi!

I was wondering if you know how, my other pages are white so I wanted the colors to be reversed from white to black unlike the home page?

 

Thanks!

0 Likes