How to remove the underline from the header menu in Dawn team?

Store Design
, , , , , ,

Topic summary

A Shopify store owner using the Dawn theme encountered an issue where all header menu items became underlined after clicking any menu item, instead of only the active/selected item being underlined.

Problem: On the homepage, the header displays correctly, but navigation causes all menu items to show underlines rather than just the active one.

Solutions Provided:

Multiple community members offered CSS-based fixes:

  • Remove border approach: Add CSS to base.css targeting .header-wrapper--border-bottom with border-bottom: 0 !important;

  • Remove underline from active items: Add CSS targeting .header__active-menu-item with text-decoration: none !important;

  • Direct CSS edit: Locate .header__active-menu-item in base.css and delete/comment out the text-decoration: underline property

  • Theme.liquid approach: Insert custom <style> block before </body> tag to override the underline styling

Resolution: The issue was successfully resolved. The original poster confirmed that editing the asset file (rather than theme.liquid) worked and marked a solution as accepted.

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

When I’m on the home page the header works as expected. After I click on a menu item, then all the menu items are underlined. You can refer to the screenshot. I only would like only the selected menu item to be underlined.

Screenshot 2024-12-30 at 14.51.18.png
Screenshot 2024-12-30 at 14.51.18.png2874×818 109 KB

You can also review my shop via https://iatp19-1s.myshopify.com/ (if this doesn’t work please try toskana.store because currently I’m waiting for the domain verification)

Any help is much appreciated!

1 Like
2

Hi @icllksknt1

Try 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:
.header-wrapper--border-bottom {
    border-bottom: 0 !important;
}

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

1 Like
3

Hi @icllksknt1

  1. Go to Online Store → Theme → Edit code.
  2. Open your theme.css / based.css file and paste the code in the bottom of the file.
.header__active-menu-item {
    text-decoration: none !important;   
}

Result:

websensepro_0-1735567563324.png
websensepro_0-1735567563324.png735×432 131 KB

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!

1 Like
4

Hey @icllksknt1 ,

In your base.css find.header__active-menu-item, and delete or comment the property text-decoration: underline. It should then remove all the underlines :slightly_smiling_face:

Let me know if you want us to do it for you, we’d love to.

Cheers!
Shubham | Untechnickle

5

Hello @icllksknt1

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 on theme.liquid

span.header__active-menu-item { text-decoration: none !important; } span.header__active-menu-item:hover { text-decoration: underline !important; }

RESULT:

Tech_Coding_0-1735571308806.png
Tech_Coding_0-1735571308806.png1349×369 50.4 KB

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

6

Many thanks :slightly_smiling_face: enjoy your coffee!

7

Hello, many thanks for your support! I tried but editing the theme.liquid file didn’t work. On the other hand editing the asset file does, fyi. Once again, your help is appreciated :slightly_smiling_face: