Solved

Dawn Theme | Changing highlight color in drawer

Alventura
Excursionist
19 0 8

Hi all,

I'm having some trouble changing the highlight and bottom bar color in the drawer on Dawn theme from grey to black, could someone help me with doing this?

1.png

 


 

Accepted Solution (1)
Zworthkey
Shopify Partner
5581 642 1565

This is an accepted solution.

@Alventura 
Paste this code on top of the component-menu-drawer.css file.

.menu-drawer__utility-links {
    background: transparent !important;
}

Thank You.

View solution in original post

Replies 14 (14)

Zworthkey
Shopify Partner
5581 642 1565

Hii, @Alventura 
Kindly share your store URL so,
I can solve it perfectly.
Thank You.

Alventura
Excursionist
19 0 8

Hey @Zworthkey, thanks for your help

victorvictorpaul.com

Zworthkey
Shopify Partner
5581 642 1565

Hii, @Alventura 
Kindly share your store password so,
I can solve it perfectly.
Thank You.

Alventura
Excursionist
19 0 8

Sorry about that @Zworthkey - stotoh

Zworthkey
Shopify Partner
5581 642 1565

@Alventura 
You want to make text color black or  text background color black.

Alventura
Excursionist
19 0 8

@Zworthkey these are the settings that I have for text/bg color, are you talking about something else?

Screen Shot 2021-10-29 at 8.35.34 AM.png

Zworthkey
Shopify Partner
5581 642 1565

@Alventura 
Paste this code on top of the component-menu-drawer.css file.

a.menu-drawer__menu-item.list-menu__item.link.link--text.focus-inset.menu-drawer__menu-item--active {
    background: transparent !important;
}

Thank You.

Alventura
Excursionist
19 0 8

Hi @Zworthkey 

Your code made the grey highlight for the current page transparent which I think I like more than the black I initially wanted so thanks a bunch

The only issue now is grey still shows on the bar at the bottom and when you hover over a main menu item like I did below on Welcome. Is it possible for these to be black, if not, transparent is fine.

Screen Shot 2021-10-29 at 9.55.16 AM.png

Zworthkey
Shopify Partner
5581 642 1565

@Alventura 
Paste this code on top of the component-drawer-menu.css file.

ul.menu-drawer__menu.list-menu li {
    background-color: black !important;
}
.menu-drawer__menu-item {
    color: white !important;
}

Thank You.

Alventura
Excursionist
19 0 8

Hi @Zworthkey 

I want to thank you for all of your help with this so far, it is greatly appreciated. One more thing, it seems that the bottom bar in the drawer is still grey even with added codes. 

The string for it appears to be:

<div class="menu-drawer__utility-links"><ul class="list list-social list-unstyled" role="list"></ul>
                </div>

Screen Shot 2021-10-29 at 10.41.14 AM.png

Is this portion part of the theme and can't be changed like the rest could?

Zworthkey
Shopify Partner
5581 642 1565

@Alventura 

Can you mark the location which you want to edit.

Thank you.

Alventura
Excursionist
19 0 8

@Zworthkey 

the portion circled & in green 

Screen Shot 2021-10-29 at 1.37.13 PM.png

Zworthkey
Shopify Partner
5581 642 1565

This is an accepted solution.

@Alventura 
Paste this code on top of the component-menu-drawer.css file.

.menu-drawer__utility-links {
    background: transparent !important;
}

Thank You.

Alventura
Excursionist
19 0 8

Worked like a charm

Thanks for all of your help again @Zworthkey