How can I modify menu link hover effects in the Modular theme?

Store Design
, ,

Topic summary

A user wants to modify the Modular theme’s menu hover effects by removing the underline and making text slightly lighter instead.

Solutions provided:

• Multiple CSS approaches were shared to remove the underline by targeting .menu-item__link:hover:after with border-bottom: none

• Opacity adjustment suggested using opacity: 0.7 on hover to achieve the lighter text effect

• Code should be added to either theme.liquid (within <style> tags above </body>) or base.css file

Follow-up issue:

The original solution worked for the main menu but not for submenu dropdown links. Additional CSS targeting .submenu-item__link:hover:after was provided to address submenu styling.

Status: The main menu issue appears resolved, with supplementary code offered for consistent submenu behavior. All solutions involve adding custom CSS to remove default underline styling and adjust hover opacity.

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

Hello everyone,

When hover over linked menu items an underline appears under the link. I want to remove the underline and just make the text turn slightly lighter (as seen in images)

Could someone please help me which code to add, thank you!!

Theme is ‘Modular’

Screenshot 2023-03-21 at 7.08.09 pm.png
Screenshot 2023-03-21 at 7.08.09 pm.png518×146 2.23 KB

Screenshot 2023-03-21 at 7.08.01 pm.png
Screenshot 2023-03-21 at 7.08.01 pm.png300×420 45 KB

I want it to look more like this

Screenshot 2023-03-21 at 7.08.34 pm.png
Screenshot 2023-03-21 at 7.08.34 pm.png439×203 5.35 KB

2

Hi @jr-rl Add below css

  1. Go to Online Store
  2. Edit Code
  3. Find theme.liquid file
  4. Add the following code in the bottom of the file above tag
.menu-item__link:hover{ opacity: 0.7!important; } .menu-item__link:after{ border-bottom: none!important; }
3

@jr-rl

Add this code in css file at bottom

.menu .menu-item .menu-item__link:hover:after{border-bottom:none;}
4

Thank you! this worked for the main menu but didn’t work for the submenu drop down links. Is there a way to also make them behave the same.

I have tried the same code but replaced .menu-item__link:hover with submenu-item__link:hover but that did not seem to work

5

  1. Go to online Store

  2. Edit the code

  3. File name base.css

  4. Pasted this code

.header__menu-item:hover span {
text-decoration: none;
}

details[open] > .header__menu-item {
text-decoration: none;
}

6

Add this code in same file

.submenu-item .submenu-item__link:hover:after{border-bottom: none;}
7

Hello @jr-rl

It’s GemPages support team and glad to support you today.

I would like to give you a solution to support you.

You can try with below code:

.menu .menu-item .menu-item__link:hover:after{
  border-bottom:none !important;
}
.menu .menu-item .menu-item__link:hover{
  font-weight: 100 !important;
  padding-left: 10px !important;
}

Hope my solution can work and support you!

Kind & Best regards!

GemPages Support Team.