On main menu the drop down navigation is black not white

[vibehome]

Hi guys,

On our main menu bar on top home page - I have just added a sub-section drop down box.

For example - Home Electricals > added Kettles to drop down for customers to choose from.

However since I've done this the font has gone black and not contrast. I did a few months ago. someone said to add some code to contrast it. 

Anyone know how to make it the same as all the rest of the menu options. You see this more on a mobile device.

Greatly appreciate if anyone could help. Screenshot attached.

[Raj-webdesigner · Accepted solution]

Add This css in your edit code > base.css file

.header__submenu .image__menu {
    filter: drop-shadow(1px 1px 2px black);
}

[niraj_patel]

Hello @vibehome 

You can add code by following these steps

1. Go to Online Store -> Theme -> Edit code.
2. Open your theme.liquid file

3. Paste the below code before </body> on theme.liquid
<style>
@media screen and (max-width: 767px) {
  .menu-drawer summary.menu-drawer__menu-item {
        color: #fff !important;
   }

   .menu-drawer__close-button {
         color: #fff !important;
    }
}
</style>

Was my reply helpful? Click Like to let me know!
Was your question answered? Mark it as an Accepted Solution.

[vibehome]

Thats great. Displays perfect on mobile now thanks.

Is there anyway to fix : The drop down boxes on main menu on desktop. as currently when you drop down ' Electricals ' the font is write and does not contrast to see clearly.

Screen shot attached

[Raj-webdesigner · Accepted solution]

Add This css in your edit code > base.css file

.header__submenu .image__menu {
    filter: drop-shadow(1px 1px 2px black);
}

[niraj_patel · Accepted solution]

You can add code by following these steps

1. Go to Online Store -> Theme -> Edit code.
2. Open your theme.liquid file

3. Paste the below code before </body> on theme.liquid
<style>
.header__submenu .image__menu {
filter: drop-shadow(1px 1px 2px black) !important;
}
</style>

Was my reply helpful? Click Like to let me know!
Was your question answered? Mark it as an Accepted Solution.

[vibehome]

Thank you so much 😊

[K-Mahesh]

Hello @lukeeys 

You can add code by following these steps

1. Go to Online Store -> Theme -> Edit code.
2. Open your base.css file

3. Paste the below code bottom on base.css

<style>
@media screen and (min-width: 768px) {
 .image__menu {
   filter: drop-shadow(1px 1px 2px black) !important;
 }
}
</style>

Was my reply helpful? Click Like to let me know!
Was your question answered? Mark it as an Accepted Solution.

[vibehome]

Thank you so much 😃