I want one single underline as animated menu, not like i have now woth thick and thin

Store Design
, , ,
1

I have a issue with the menu underline animated slider, it goes from thick to thin while moving over menu with mouse. If you try to move the mousepointer over the header menu so you see what i mean on my site.

Hope there is possible to make this as a thin or thicker underline, not both thick and thin.

My site is:

www.dekanten.no

Hope someone have some tricks here. I wil be very gratefull. :slightly_smiling_face:

2

Hello @Dekanten

Thank you for reaching out to the Shopify community.

Here are the steps to ensure the underline animation remains the same throughout on hover of items in navigation:

  1. Navigate to the theme editor Online Store → Themes → Edit Code.

  2. Search for the asset named as base.css, open the file and search for the below code:

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

Replace the above code with:

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

Save the changes and please have a check once. Let me know if this was helpful.

Thanks.

3

It works like a charm, a big thank u for this. This is great to have some guys like you to help. :slightly_smiling_face:

AMAZING

4

One more thing, is is possible to make the underline thicker? :slightly_smiling_face:

5

Hey @Dekanten ,

Glad to know it helped. Here is the code to make the underline thicker.

  1. Navigate to the theme editor Online Store → Themes → Edit Code.

  2. Search for the asset named as base.css, open the file and search for the below code:

.header__menu-item span:after {
    content: '';
    height: 2px;
    width: 0;
    background-color: currentColor;
    position: absolute;
    bottom: 0px;
    left: 0;
    -webkit-transition: width .25s;
    transition: width .25s;
}

Replace the above code with:

.header__menu-item span:after {
    content: '';
    height: 3px;
    width: 0;
    background-color: currentColor;
    position: absolute;
    bottom: -2px;
    left: 0;
    -webkit-transition: width .25s;
    transition: width .25s;
}

Save the changes and please have a check once. Let me know if this was helpful.

Thanks.

6

All is fine, thank u very much. :slightly_smiling_face: