Remove underline on mega menu and embolden instead

Store Design
, ,

Topic summary

A user seeks to modify their Shopify mega menu hover behavior: removing underlines and applying bold text to links, similar to a reference site (thefrankieshop.com).

Initial Solutions Provided:

  • CSS code snippets targeting .meganav__nav a:hover to remove text decoration and set font-weight to 700
  • Additional code to adjust unselected link colors using hex values (#919191, #939191)

Evolving Requirements:
The user refined their request multiple times:

  • Initially wanted bold on hover
  • Then requested unselected links to appear lighter in color
  • Later changed from bold to having the hovered link remain black while other links turn grey (referencing thefrankieshop.com’s behavior)
  • Finally asked about removing underlines from the main navigation header above the mega menu dropdown

Current Status:
The discussion remains open with the user struggling to target the correct CSS classes for the header navigation. Multiple contributors (Dan-From-Ryviu, PageFly-Richard) provided CSS solutions, but the requirements continue evolving as implementation reveals additional desired changes.

Summarized with AI on November 15. AI used: claude-sonnet-4-5-20250929.
1

I am wanting to remove underline and instead embolden on hover all links in mega menu similar to the site shown.

url: https://afca7f-2.myshopify.com/

Screenshot 2023-10-28 at 9.06.32 AM.png
Screenshot 2023-10-28 at 9.06.32 AM.png3104×1974 927 KB

2

Hi @blakelyhi

You can do that by going to your Online store > Themes > Edit code > Assets > open them.css or theme.css.liquid file, add this code at the bottom and save file

.meganav__nav a:hover {
    text-decoration: unset !important;
    font-weight: 700 !important;
}
3

Thank you! Is there any additional code I could add to make the unselected links lighter in color?

4

Hi @blakelyhi

You can do that by updating code to this

.meganav__inner .meganav__primary .meganav__nav h4 {
    color: #939191;
}
.meganav__nav a:hover {
    color: #191919 !important;
    text-decoration: unset !important;
    fon-weight: 700;
}
5

Thank you - that’s so helpful. I realized I would like it the #191919 color on initial dropdown, then for those links not hovered over to turn grey where the one you click on will be black. Do you have any idea how to do that? Seems more complicated. Here is inspo nav: thefrankieshop.com

6

Hi @blakelyhi

This is Richard from PageFly - Shopify Page Builder App, I’d like to suggest this idea:
Online Store ->Theme ->Edit code
Assets ->Theme.css

.meganav__nav a:hover {
    text-decoration: unset !important;
    font-weight: bold !important;
}

Hope you find my answer helpful!
Best regards,
Richard | PageFly

7

Thank you! That is helpful, after adding in the code though I need to revise my initial ask - instead of make bold, I would like for the link hovered on to remain black while the rest of the links turn grey or another lighter color - like this store’s nav: thefrankieshop.com

8

Hi Richard I was wondering if you could help me to remove the underline from the main nav above the mega menu dropdown? All of my attempts have been unsuccessful in targeting the right .header class :confused: