How to add solid line under collection dropdown?

Solved
Highlighted
Excursionist
31 0 5

I am looking to add a sold line under each main collection title when i hover over the drop down mega menu. I would also like to reduce the spacing between the collections (dresses,R&J, outerwear, tops, bottoms)  any ideas?

 

 

Screen Shot 2020-08-04 at 9.35.57 PM.png

0 Likes
Highlighted
Shopify Partner
2271 496 647

Hey @LeahandRosemary,

Please provide your website URL. I will check and provide a solution here.

Thanks!

If helpful then please Like and Accept Solution.
Do you need custom changes on store ? Hire me.
Feel free to Contact me on dmw.webartisan@gmail.com
Follow us on Instagram @dmw.webartisan
1 Like
Highlighted
Excursionist
31 0 5

Thank you @dmwwebartisan  ! 

I would like to just have a solid line appear under each main "sub category collection" so that it is clear to the customer. As of now they blend it with all the collections below them. 

Thank you for taking a look:

 

https://mgox1qq3d84lh3id-41120923809.shopifypreview.com

 

Screen Shot 2020-08-05 at 8.28.09 AM.png

 

0 Likes
Highlighted
Shopify Partner
311 33 56

@LeahandRosemary 

can you please try this code

1. Go to Online Store->Theme->Edit code
2. Asset->/theme.scss.liquid->paste below code at the bottom of the file.

 

.megamenu .h5 {
    border-bottom: 2px solid;
display: inline-block;
}

 

 

Thanks,
Ittanta Technologies Pvt. Ltd. | Shopify Expert
If reply is helpful, please Like and Accept Solution.
To hire us, contact us at info@ittanta.com
0 Likes
Highlighted
Excursionist
31 0 5

Thank you! @IttantaTech 

 

But is there a possible way to just have it under the word and not have the line under blank space? It would be great to have the line stop after the last letter of the word.

 

Thank you!

 

Screen Shot 2020-08-05 at 9.23.33 AM.png

0 Likes
Highlighted
Shopify Partner
2271 496 647

This is an accepted solution.

Hey @LeahandRosemary 

Please add following code in your assets/theme.scss.liquid file.

 

 

.megamenu {
padding: 10px 0;
}

@media only screen and (min-width: 769px){
.site-nav__dropdown .grid .grid__item {width: 10.66667% !important;}
}

.megamenu .h5 {
    border-bottom: 2px solid;
   display:inline-block;
}

 

 

Hope this works for you.


Thanks!

If helpful then please Like and Accept Solution.
Do you need custom changes on store ? Hire me.
Feel free to Contact me on dmw.webartisan@gmail.com
Follow us on Instagram @dmw.webartisan
0 Likes
Highlighted
Shopify Partner
311 33 56

@LeahandRosemary 

we're update my code please add again

Thanks,
Ittanta Technologies Pvt. Ltd. | Shopify Expert
If reply is helpful, please Like and Accept Solution.
To hire us, contact us at info@ittanta.com
0 Likes
Highlighted
Shopify Partner
2271 496 647

@LeahandRosemary 

we update my code please add again

If helpful then please Like and Accept Solution.
Do you need custom changes on store ? Hire me.
Feel free to Contact me on dmw.webartisan@gmail.com
Follow us on Instagram @dmw.webartisan
0 Likes
Highlighted
Excursionist
31 0 5

Thank you @IttantaTech @dmwwebartisan 

 

Are either one of you aware of a way to make "Rompers & Jumpsuits" appear on one line like all of the other collection titles? I am trying to get that one collection to show on one line so everything is the same at the top. 

 

Thank you!!

0 Likes
Highlighted
Shopify Partner
2271 496 647

This is an accepted solution.

Hey @LeahandRosemary,

Please add the following code at the end of your assets/theme.scss.liquid file.

a.site-nav__dropdown-link.site-nav__dropdown-link--top-level {
    letter-spacing: 0.7px;
}

 

Hope this works.

 

Thanks! 

If helpful then please Like and Accept Solution.
Do you need custom changes on store ? Hire me.
Feel free to Contact me on dmw.webartisan@gmail.com
Follow us on Instagram @dmw.webartisan
1 Like