Change Menu Text (Mobile) Color Drop Down

Store Design
1

Hello!

I hope the week is going well so far!

I want to change the mobile menu drop down text color to be white (currently a dark grey). My site was built by a developer (custom not template), who is now unreachable to give edits.

shopifydesign issue.JPG
shopifydesign issue.JPG646×532 14 KB

My site: www.shredsurfcompany.com

Here is some of the code I feel I might need to change based on the active hover functionality mentioned:

I attempted to change “color: var(–body_color);” to “color: #f4f4f4;” without any success

.toolbar .toolbar-col .dropdown-menu {
    padding: 5px 0;
    margin: 2px 0;
    right: 0;
    -moz-border-radius: 0;
    -webkit-border-radius: 0;
    -ms-border-radius: 0;
    -o-border-radius: 0;
    border-radius: 0;
    font-size: var(--font_size);
    color: var(--body_color);
    min-width: 100%
}

.toolbar .toolbar-col .dropdown-menu li * {
    display: block;
    padding: 4px 14px 3px 15px;
    cursor: pointer;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis
}

.toolbar .toolbar-col .dropdown-menu li.active *,
.toolbar .toolbar-col .dropdown-menu li:hover * {
    background-color: #f4f4f4;
    color: #66787f
}

Thanks so much for the help!

2

@shredsurfco ,

.site-nav .menu-lv-1 a {
    color: #fff;
}
span.wishlist-text.text-hover {
    color: #fff;
}

Add this css at the bottom of Online Store->Theme->Edit code->Assets->theme.min.scss.liquid

1 Like
3

Hello @shredsurfco

Open code editor and paste below lines in theme-styles.css or theme-styles.css.liquid file at the bottom.

@media screen and (max-width: 1199px){
.main-menu .site-nav .menu-lv-1>a, 
.main-menu span.wishlist-text.text-hover, 
.main-menu .site-nav .menu-lv-1>a:hover  {
    color: #fff !important;
}
}