How to Change Menu Font Color and Display Mega-menu on When Hovering (Trade Theme)

[jordanbford1]

Hi!

I am trying to make a few adjustments on my website to my main menu bar and an having trouble figuring out how to make the following changes in Trade Theme:

1. Change the font color to Black #000000

2. Change the font color on hover to #8F6B2C and also show the mega-menu options on hover

3. Remove the arrows

4. Keep the Clearance menu item font color #641832 and bolded

[LizHoang]

Hi @jordanbford1

You follow this instruction here:

1. Go to Shopify > Theme > Customize

2. Copy and paste this code on Theme settings > Custom CSS section

.header__menu-item {
    color: #000000 !important;
}
.header__menu-item:hover {
    color: #8F6B2C !important;
}
summary.list-menu__item svg {
    display: none !important;
}
a#HeaderMenu-clearance {
    color: #641832 !important;
}

[jordanbford1]

@LizHoang This worked – the only thing I cannot get is to display the mega-menu on hover of that menu item. Is there a way to enable that as well?

[LizHoang]

Hi @jordanbford1

The matter you are referring to requires a more in-depth modification of the theme code, rather than just customizing CSS code like I just did.

Regrettably, I do not have the capability to assist with these deeper modifications. I suggest that you reach out to a qualified developer who can be granted access to the theme code to make the necessary adjustments to the theme files.

I appreciate your understanding, and please feel free to mark our response as a solution if it has been helpful. Thank you!

[websensepro]

Hi @jordanbford1

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

@media(min-width:769px){
 .list-menu__item {
    color: #000 !important;
}
.list-menu__item a:hover {
    color: #8F6B2C !important;
}
ul.list-menu.list-menu--inline svg.icon.icon-caret {
    display: none !important;
}

.mega-menu {
  position: relative;
  display: inline-block;
}
.mega-menu__content {
  display: none;
  position: absolute;
  top: 100%;
  left: 0;
  background-color: white;
  z-index: 1000;
  width: 1000px;
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
  padding: 1rem;
}
.mega-menu:hover .mega-menu__content {
  display: block;
}
.mega-menu__content a {
  text-decoration: none;
  color: black;
  display: block;
  padding: 0.5rem 1rem;
}
.mega-menu__content a:hover {
  background-color: #F4F4F4;
}
}

If my reply is helpful, kindly click like and mark it as an accepted solution.
If you are happy with my help, you can help me buy a COFFEE
Thanks!

[Dan-From-Ryviu]

Hi @jordanbford1

You can try to add this code to theme.liquid file, before in Sales channels > Online Store > Themes > Editcode to make mega menu appear when hovering

[Made4uo-Ribe]

Hi @jordanbford1

To make the mege-menu options color change on hover. Add this one.

1. From your Shopify admin dashboard, click on “Online Store” and then “Themes”.
2. Find the theme that you want to edit and click on “Actions” and then “Edit code”.
3. In the “Assets” folder, click on “base.css, style.css or theme.css” file, depending on which file your theme uses to store its CSS styles. At the bottom of the file, add the following CSS code:

.mega-menu__link:hover,
.mega-menu__link--active {
  color: #8F6B2C !important;
}

• And Save.
• Result:
• 

Your Feedback Matters! Please mark the solution and give likes to posts that helped you. Your appreciation fuels our motivation to assist you better!

[jordanbford1]

@websensepro Are there any brackets or scripts that open or close this code? I tried pasting it into Theme.liquid following your instruction but nothing happened. Please let me know more details please if possible. Thank you!

[jordanbford1]

@LizHoang How would I keep the arrows but on mobile only?