Changing underline style on collection titles in header (Dawn Theme)

[bellevo]

Hey, I would like to know if there is a way to change the style of the underline that comes up when hovering over the collection titles in the header. I will add some pictures of the issue below.

My store url: https://bellevodesign.com/

Picture of the "Issue":  

Example of the style that i would like to change it to: 

So basically just making the underline a bit thinner and having a little padding between the collection title and the underline. I would appreciate any help with this issue, thank you in advance!

[BSSCommerce-HDL · Accepted solution]

Hi @bellevo, 
Step 1: Go to Shopify Admin -> Online Store ->Theme -> Edit code

Step 2: Search file base.css, theme.css, styles.css or theme.scss.liquid

Step 3: Insert the below code at the bottom of the file -> Save

details[open]:hover > .header__menu-item {
    text-decoration-thickness: 0 !important;
    text-underline-offset: 1.3rem !important;
}

Here is result: 

Hope this can help you,

If our suggestions are useful, please let us know by giving it a like or marking it as a solution. Thank you 😍

[BSSCommerce-HDL · Accepted solution]

Hi @bellevo, 
Step 1: Go to Shopify Admin -> Online Store ->Theme -> Edit code

Step 2: Search file base.css, theme.css, styles.css or theme.scss.liquid

Step 3: Insert the below code at the bottom of the file -> Save

details[open]:hover > .header__menu-item {
    text-decoration-thickness: 0 !important;
    text-underline-offset: 1.3rem !important;
}

Here is result: 

Hope this can help you,

If our suggestions are useful, please let us know by giving it a like or marking it as a solution. Thank you 😍

[bellevo]

Works perfectly, thank you! One more question, is it possible to get this same effect on the collection titles in the drop down menu?

Picture: 

[BSSCommerce-HDL · Accepted solution]

Hi @bellevo, Pls insert this code to your file css: 

.header__submenu.list-menu .header__menu-item {
    line-height: 30px !important;
    text-underline-offset: 1rem !important;
}

Here is result: 

Hope this can help you,

If our suggestions are useful, please let us know by giving it a like or marking it as a solution. Thank you 😍

[bellevo]

Thank you!

[BSSCommerce-HDL]

@bellevo No problem. Have a good day 😍

[PageFly-Henry]

Hi @bellevo 

This is Henry from PageFly - Landing Page Builder App

You can try this code by following these steps: 

Step 1: Go to Online Store->Theme->Edit code.

Step 2: Search file base.css

Step 3: Paste the below code at bottom of the file -> Save

details[open]:hover .header__menu-item {

    text-decoration-thickness: 1px !important;

}

In addition, I find that the headings on the banner should change color to make it more prominent, and users can easily see that there is a discount program.

Hope that my solution works for you.

Best regards,

Henry | PageFly