Change menu color background venture theme

Store Design
1

Hi! my current dropdown menu on the homepage has white background with black text both on desktop and mobile.
I would like to change both, black background with white text.
this is my website : www.blacksanctuary.eu

Hope someone can help me : )
thanks so much.

Susi
x

2

@Blacksanctuary

Please add the following code at the bottom of your assets/theme.scss.liquid file.

@media only screen and (min-width:750px){
.meganav {background-color: #000 !important;}
.meganav__link {color: #fff !important;}
.meganav__title {color: #fff !important;}
.meganav__link:focus, .meganav__link:hover {color: #fff !important;}
}

#NavDrawer.drawer{ background-color: #000 !important;}
#NavDrawer.drawer__nav-link--top-level{color: #fff !important;}
#NavDrawer.drawer__nav-toggle-btn{ color: #fff !important;}
#NavDrawer.drawer__search {background-color: #000 !important;}
.meganav--drawer {background-color: #000 !important;}

Hope this works.

Thanks!

3

@Blacksanctuary

sorry for that but you have change background color so doesn’t visible product image is this fine?

please confirm this look

KetanKumar_0-1629341465335.png
KetanKumar_0-1629341465335.png1920×1080 292 KB

4

thank you so much for your reply!
i pasted the code but it didn’t worked on mobile and on desktop only half, as you can see the products images have still white background.
can you help me? thanks a lot for your time!

5

actually i don’t care about products in the menu, i would delete them if i could

6

@Blacksanctuary

can you please confirm look?

7

@dmwwebartisan thanks! it only worked on desktop but not on mobile!

8

@KetanKumar it worked on desktop, total black ( i deleted the products ) but not on mobile

9

@Blacksanctuary

Please remove previous code try this new code

@media only screen and (min-width:750px){
.meganav {background-color: #000 !important;}
.meganav__link {color: #fff !important;}
.meganav__title {color: #fff !important;}
.meganav__link:focus, .meganav__link:hover {color: #fff !important;}
}

#NavDrawer.drawer{ background-color: #000 !important;}
.drawer__nav-link--top-level{color: #fff !important;}
.drawer__nav-toggle-btn{ color: #fff !important;}
.drawer__search {background-color: #000 !important;}
.meganav--drawer {background-color: #000 !important;}
10

@dmwwebartisan now the headings are visible on mobile but not the subheadings :disappointed_face:
thanks for your time!!

11

@Blacksanctuary

add css for subheading

.drawer__nav-link {
    display: block;
    color: #fff !important;
}
12

@dmwwebartisan it worked!
thanks again for all the help! much appreciated!

13

@Blacksanctuary

Thanks!

14

@dmwwebartisan sure i already accepted both

15

@dmwwebartisan Hi again, sorry i have one last question, is it possible to delete the underlines on the subheadings? ( on mobile , on desktop there are no underlines )

thank you

16

@Blacksanctuary

Please add this code your css file

@media only screen and (max-width: 749px){
.drawer__nav-item {0px solid transparent !important;}
}

Thanks!

17

@dmwwebartisan not working, it makes all the website white with text everywhere

18

@Blacksanctuary

try this code

.meganav__list .drawer__nav-item {
    border-bottom: 0px solid transparent !important;
}
19

@dmwwebartisan worked! THANK YOUUU