Solved

Removing underline from homepage menu Header in Dawn 12.0.0

Dibiesse
Tourist
9 0 1

Hello everyone,

I'm encountering a small issue that I can't seem to resolve. I recently updated my Dawn theme to version 12.0.0, and a problem has surfaced. On the homepage, the header menu items are underlined by default, which I do not want.

Dibiesse_0-1698917736448.png

 

This underlining does not occur when I navigate to any submenus or other pages.

 

Dibiesse_1-1698917870338.png

 

How can I remove the default underlining from the menu items on the homepage?

Thank you in advance for your help!

Accepted Solution (1)
Dan-From-Ryviu
Shopify Partner
7832 1519 1540

This is an accepted solution.

Hi @Dibiesse 

Go to your Online store > Navigation > Main menu, add a link to all parent menus, and then check again.

- Helpful? Like and Accept solution.
- Ryviu - Product Reviews app, collect product reviews, import reviews from AliExpress, Amazon, Etsy, Shopee and Walmart and CSV.
- Lookfy app: Easy and fast to create Photo Gallery, Lookbook, Shop The Look.
- Enjoy 1 month of Shopify for $1. Sign up now.

View solution in original post

Replies 17 (17)

Dan-From-Ryviu
Shopify Partner
7832 1519 1540

Hi @Dibiesse Could you drop your store link here to check?

- Helpful? Like and Accept solution.
- Ryviu - Product Reviews app, collect product reviews, import reviews from AliExpress, Amazon, Etsy, Shopee and Walmart and CSV.
- Lookfy app: Easy and fast to create Photo Gallery, Lookbook, Shop The Look.
- Enjoy 1 month of Shopify for $1. Sign up now.

Dibiesse
Tourist
9 0 1

Hi @Dan-From-Ryviu, 

Thank you for offering to help! My store isn't active yet.

https://anais-nail-design.myshopify.com/
Password: chatso

I appreciate your time and assistance with this issue.

 

Moeed
Shopify Partner
3858 974 1216

Hey @Dibiesse 

 

Follow these Steps:

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 </body> tag

<style>
.header__active-menu-item {
    text-decoration: unset !important;
}
</style>

RESULT:

Moeed_0-1698920784822.png

 

If I managed to help you then, don't forget to Like it and Mark it as Solution!

 

Best Regards,
Moeed

Need a Shopify developer? Chat on WhatsApp


- For Shopify Design Changes | Shopify Custom Coding | Custom Modifications
- Your Coffee Tip and my code, A perfect blend. ❤️
Dibiesse
Tourist
9 0 1

The previous fix worked, but now the menu items do not underline on hover. Could you please advise on how to restore the hover underline effect?

Moeed
Shopify Partner
3858 974 1216

Hey @Dibiesse 

 

Remove the previous code and add this new code above </body> in theme.liquid file with the same steps.

<style>
.header__active-menu-item {
    text-decoration: unset;
}
.header__active-menu-item:hover {
    text-decoration: underline !important;
}
</style>

 

If I managed to help you then, don't forget to Like it and Mark it as Solution!

 

Best Regards,
Moeed

Need a Shopify developer? Chat on WhatsApp


- For Shopify Design Changes | Shopify Custom Coding | Custom Modifications
- Your Coffee Tip and my code, A perfect blend. ❤️
Dibiesse
Tourist
9 0 1

Hey Moeed, thanks!

The fix worked, but another issue has arisen: when I'm in a menu, it no longer stays underlined to indicate that it's the active one.

Dibiesse
Tourist
9 0 1

Additionally, when I'm in a menu, it no longer remains underlined to indicate that it is the active one.

VanIslandWhale
Excursionist
15 0 3

Is there an equivalent code for the Debut theme? I don't want underlines in my header at all

Dan-From-Ryviu
Shopify Partner
7832 1519 1540

This is an accepted solution.

Hi @Dibiesse 

Go to your Online store > Navigation > Main menu, add a link to all parent menus, and then check again.

- Helpful? Like and Accept solution.
- Ryviu - Product Reviews app, collect product reviews, import reviews from AliExpress, Amazon, Etsy, Shopee and Walmart and CSV.
- Lookfy app: Easy and fast to create Photo Gallery, Lookbook, Shop The Look.
- Enjoy 1 month of Shopify for $1. Sign up now.

Dibiesse
Tourist
9 0 1

Hi @Dan-From-Ryviu 

Here? They are all linked to home page (besides contact).

Dibiesse_0-1698925085318.png

 

Dan-From-Ryviu
Shopify Partner
7832 1519 1540

That causes the issue of why you get your menu text underlined when you are on the homepage. If it does not have a link, you can add # in links

- Helpful? Like and Accept solution.
- Ryviu - Product Reviews app, collect product reviews, import reviews from AliExpress, Amazon, Etsy, Shopee and Walmart and CSV.
- Lookfy app: Easy and fast to create Photo Gallery, Lookbook, Shop The Look.
- Enjoy 1 month of Shopify for $1. Sign up now.

Dibiesse
Tourist
9 0 1

Thank you for your reply. That makes sense! However, after adding # to all the links, the problem still persists.

Dibiesse_0-1698925698275.png

 

Dan-From-Ryviu
Shopify Partner
7832 1519 1540

Did you Save the menu after adding it? 

Screenshot_6.jpg

- Helpful? Like and Accept solution.
- Ryviu - Product Reviews app, collect product reviews, import reviews from AliExpress, Amazon, Etsy, Shopee and Walmart and CSV.
- Lookfy app: Easy and fast to create Photo Gallery, Lookbook, Shop The Look.
- Enjoy 1 month of Shopify for $1. Sign up now.

Dibiesse
Tourist
9 0 1

Yes I did.

Dibiesse
Tourist
9 0 1

I've figured out the issue: the submenus were also linked to the homepage.

Thank you so much for your help!

 

Dibiesse_0-1698926441406.png

 

Dan-From-Ryviu
Shopify Partner
7832 1519 1540

You are very welcome

- Helpful? Like and Accept solution.
- Ryviu - Product Reviews app, collect product reviews, import reviews from AliExpress, Amazon, Etsy, Shopee and Walmart and CSV.
- Lookfy app: Easy and fast to create Photo Gallery, Lookbook, Shop The Look.
- Enjoy 1 month of Shopify for $1. Sign up now.

erika97
Visitor
1 0 1

THANK YOU, I was wondering the same thing and had the same issue. I appreciate you posting the solution.