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

Solved

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

bellevo
Explorer
65 0 19

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": Screenshot 2024-06-17 161622.png 

 

Example of the style that i would like to change it to: Screenshot 2024-06-17 161737.png

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!

Accepted Solutions (2)

BSSCommerce-HDL
Shopify Expert
997 336 397

This is an accepted solution.

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

BSSCommerceHDL_0-1718630918124.png

 

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

BSSCommerceHDL_1-1718630922232.png

 

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: 

BSSCommerceHDL_2-1718630961583.png

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 😍

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


B2B Solution & Custom Pricing | Product Labels by BSS


Need help from our expert? Kindly share your request with us via community@bsscommerce.com


BSS Commerce - Full-service eCommerce Agency

View solution in original post

BSSCommerce-HDL
Shopify Expert
997 336 397

This is an 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: 

BSSCommerceHDL_1-1718632097737.png

 

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 😍

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


B2B Solution & Custom Pricing | Product Labels by BSS


Need help from our expert? Kindly share your request with us via community@bsscommerce.com


BSS Commerce - Full-service eCommerce Agency

View solution in original post

Replies 6 (6)

BSSCommerce-HDL
Shopify Expert
997 336 397

This is an accepted solution.

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

BSSCommerceHDL_0-1718630918124.png

 

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

BSSCommerceHDL_1-1718630922232.png

 

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: 

BSSCommerceHDL_2-1718630961583.png

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 😍

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


B2B Solution & Custom Pricing | Product Labels by BSS


Need help from our expert? Kindly share your request with us via community@bsscommerce.com


BSS Commerce - Full-service eCommerce Agency
bellevo
Explorer
65 0 19

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: Screenshot 2024-06-17 163731.png

BSSCommerce-HDL
Shopify Expert
997 336 397

This is an 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: 

BSSCommerceHDL_1-1718632097737.png

 

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 😍

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


B2B Solution & Custom Pricing | Product Labels by BSS


Need help from our expert? Kindly share your request with us via community@bsscommerce.com


BSS Commerce - Full-service eCommerce Agency
bellevo
Explorer
65 0 19

Thank you!

BSSCommerce-HDL
Shopify Expert
997 336 397

@bellevo No problem. Have a good day 😍

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


B2B Solution & Custom Pricing | Product Labels by BSS


Need help from our expert? Kindly share your request with us via community@bsscommerce.com


BSS Commerce - Full-service eCommerce Agency

PageFly-Henry
Shopify Partner
1184 335 283

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.

PageFlyHenry_0-1718631420198.png

 

 

 

Hope that my solution works for you.

Best regards,

Henry | PageFly

Please let me know if it works by giving it a Like or marking it as a solution!


PageFly - #1 Page Builder for Shopify merchants.


All features are available from Free plan. Live Chat Support is available 24/7.