How To Make Spacing Lines Shorter In Menu Drawer

Solved

How To Make Spacing Lines Shorter In Menu Drawer

MMast
Trailblazer
182 1 25

Thanks in advance!

I am looking to make the lines in between my menu drawer items shorter (on both sides of the drawer). Example shown below.

How my site looks:

IMG_0803.jpeg

How I would like my site to look:

IMG_0804.jpeg

https://decemberschild.com
password: dc

Accepted Solutions (3)

BSSCommerce-TA
Shopify Expert
123 24 24

This is an accepted solution.

@MMast You can add this CSS code at the bottom of "theme.css" or "base.css" file: 

 

 

.menu-drawer__navigation .menu-drawer__menu {
    justify-content: center;
    display: flex;
    flex-direction: column;
    align-items: center;    
}
.menu-drawer__navigation .menu-drawer__menu li {
    width: 80%;
}

 

If you want those lines to be a little longer, just increase the percentage, 85%, 90%.

If it works, please mark my reply as resolution. 

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

SIMICART: Mobile App Builder |Ironwork Theme - Coming Soon | 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-TA
Shopify Expert
123 24 24

This is an accepted solution.

Yes, @MMast . Add this line right after the code I just gave you above: 

.menu-drawer__navigation .menu-drawer__menu li a {
    padding-left: 0 !important;
}

 

Here, result: 

BSSCommerceTA_0-1719288591551.png

 

If it works, please mark my 2 replies as resolutions. 

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

SIMICART: Mobile App Builder |Ironwork Theme - Coming Soon | 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-TA
Shopify Expert
123 24 24

This is an accepted solution.

@MMast ,  add all this CSS code at the bottom of "theme.css" or "base.css" file: 

 

.menu-drawer__navigation .menu-drawer__menu {
    justify-content: center;
    display: flex;
    flex-direction: column;
    align-items: center;    
}
.menu-drawer__navigation .menu-drawer__menu li {
    width: 80%;
}

.menu-drawer__navigation .menu-drawer__menu li a {
    padding-left: 0 !important;
}

 

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

SIMICART: Mobile App Builder |Ironwork Theme - Coming Soon | 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 4 (4)

BSSCommerce-TA
Shopify Expert
123 24 24

This is an accepted solution.

@MMast You can add this CSS code at the bottom of "theme.css" or "base.css" file: 

 

 

.menu-drawer__navigation .menu-drawer__menu {
    justify-content: center;
    display: flex;
    flex-direction: column;
    align-items: center;    
}
.menu-drawer__navigation .menu-drawer__menu li {
    width: 80%;
}

 

If you want those lines to be a little longer, just increase the percentage, 85%, 90%.

If it works, please mark my reply as resolution. 

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

SIMICART: Mobile App Builder |Ironwork Theme - Coming Soon | 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
MMast
Trailblazer
182 1 25

Is there a way to make the menu items align with the left side of the lines?

Example:

Screenshot 2024-06-24 235729.png

BSSCommerce-TA
Shopify Expert
123 24 24

This is an accepted solution.

Yes, @MMast . Add this line right after the code I just gave you above: 

.menu-drawer__navigation .menu-drawer__menu li a {
    padding-left: 0 !important;
}

 

Here, result: 

BSSCommerceTA_0-1719288591551.png

 

If it works, please mark my 2 replies as resolutions. 

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

SIMICART: Mobile App Builder |Ironwork Theme - Coming Soon | 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
BSSCommerce-TA
Shopify Expert
123 24 24

This is an accepted solution.

@MMast ,  add all this CSS code at the bottom of "theme.css" or "base.css" file: 

 

.menu-drawer__navigation .menu-drawer__menu {
    justify-content: center;
    display: flex;
    flex-direction: column;
    align-items: center;    
}
.menu-drawer__navigation .menu-drawer__menu li {
    width: 80%;
}

.menu-drawer__navigation .menu-drawer__menu li a {
    padding-left: 0 !important;
}

 

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

SIMICART: Mobile App Builder |Ironwork Theme - Coming Soon | 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