Underline text in menu and blue text on clickable menu

Technical Q&A
,
1

I have added code for my header menu to have a submenu when you hover over it with the cursor. Also the header from the submenu text is clickable. Only problem is that my header clickable text is blue (like a URL link) and the text is also underlined. Which I want to have removed.

I have tried multiple sulitions from this community and online but it just wont work. Anyone that can help me?

I am using theme: Dawn.

1689711733044.jpg
1689711733044.jpg4000Ă—3000 3.18 MB

1 Like
2

Hi @darkcloud367 ,

Would you mind to share your URL website? with password if its protected. Thanks!

3

https://elite-pokemon-1203.myshopify.com/

4

Thank you fro the information. I just like to confirm you like to remove the color blue text and the underline? When hover the underline still there.

  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:
  4. And Save.
ul.list-menu.list-menu--inline a {
    text-decoration: none;
    color: black;
}

Result:

Ribe_Dagandara_0-1689718134860.png
Ribe_Dagandara_0-1689718134860.png442Ă—127 2.97 KB

I hope it help.

5

Thank you so much it worked!

Just one more thing I would like to change is that now when I hover over the text in the main menu (header) the text I hover over has a underline. Is it possible to change the colour of the text instead of a underline when I hover over it?

Just wondering if it is possible?

1 Like
6

Welcome! Yeah, that why I tell there still underline style when hover. Let me see If i can do that.

1 Like
7

Try this one. Another question: also the drop down icons youll like to put some color? or only the text.

This code is without color with the drop down icons.

  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:
  4. And Save.
details[open]:hover>summary#HeaderMenu-pokemon {
    text-decoration: none;
}
details[open]:hover>summary#HeaderMenu-sets {
    text-decoration: none;
}
summary#HeaderMenu-pokemon a:hover {
    color: red;
}
summary#HeaderMenu-sets a:hover {
    color: red;
}

Result:

Ribe_Dagandara_0-1689774395294.png
Ribe_Dagandara_0-1689774395294.png429Ă—192 26.6 KB

Note: you can change the colors you like.

1 Like
8

Thank you so much, it is nearly how I want it and I really appreciatie all your help.

Only a few things I would like to change is that every text item in the header menu changes colour when you hover over them, not just the dropdown menu ones. For example; Home and contact don’t change colour currently.

And I would like to change the colour of the text in the dropdown field to be red. Hope you can make this work, I am allready very happy with the changes you could make for me!

1 Like
9

Your Welcome, Please replace the code with this new one.

Same Instructions.

a#HeaderMenu-home span:hover {
    color: red;
}
details[open]:hover>summary#HeaderMenu-pokemon {
    text-decoration: none;
    color: red;
}
details[open]:hover>summary#HeaderMenu-sets {
    text-decoration: none;
    color: red;
}
ul.list-menu.list-menu--inline a:hover {
    color: red;
}

As I said before you can change the colors, even change the colors every text :joy: or default color in your store.

1 Like
10

Perfect thank you so much! :grinning_face: :grinning_face:

1 Like