Remove Bottom Borders From Nav Items in Debut Theme

Solved
Highlighted
Tourist
27 0 5

I was wondering how can I remove the bottom borders on the menu in the header. When an option is selected and when it is hovered, there is a 1px border. How can I fix this?

Screen Shot 2020-06-21 at 11.47.27 PM.png

0 Likes
Highlighted
Shopify Partner
1292 276 377

HI

Please share your URL & password.

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
Tourist
27 0 5
Highlighted
Tourist
27 0 5

I was able to find where the bottom border is for the Nav menu in the Header and remove it. 

For my "shop" page, is there a way I can change it to 1 product per row only on Mobile?

And for my dropdown nav menu on Mobile, how can I change the text alignment/size?

IMG_0743.jpgIMG_0747.jpg

 

0 Likes
Highlighted

This is an accepted solution.

@bwbrian 

You can add this code to get a single column for your products on mobile.

Go to Themes -> Actions -> Edit Code -> Assets -> theme.scss.liquid  

Add the code to the bottom of this file. This should be the result. PixelSnap 2020-06-22 at 21.09.29@2x.png

 

@media(max-width:640px) {
#Collection .grid__item {
    width: 100%;
}

#Collection .grid > * + *  {
    margin-top: 2.5em !important;
}

.product-card__image-wrapper {
    max-width: unset !important;
    margin: 0 !important;

}
.product-card__image-wrapper img {
    max-width: unset !important;
    max-height: unset !important;
}
}

 

Chat/Message on FB Messenger for quickest response: https://m.me/dejaegherryan
Available for custom development
0 Likes
Highlighted
Tourist
27 0 5

Thank you!

Is there a way I can modify the alignment and text size for this burger style dropdown menu for Mobile?

IMG_0743-1.jpg

0 Likes
Highlighted

This is an accepted solution.

#MobileNav a {
    text-align: center;
    font-size: 18px;
}

@bwbrian code will center the font and let you control the font-size. 

 

Result: 

Screen Shot 2020-06-23 at 12.05.26 PM.png

Chat/Message on FB Messenger for quickest response: https://m.me/dejaegherryan
Available for custom development
1 Like
Highlighted
Tourist
27 0 5

Thank you very much Ryan! This worked!

1 Like
Highlighted
Tourist
27 0 5

One other thing! Would you be able to change the product title size on Mobile?

IMG_5F82663C8141-1.jpeg

0 Likes
Highlighted

This is an accepted solution.

@media only screen and (max-width: 749px) {
.grid-view-item__title {
    font-size: 20px;
}
}

@bwbrian this'll do it :)

 

Chat/Message on FB Messenger for quickest response: https://m.me/dejaegherryan
Available for custom development
0 Likes