How To Make Spacing Lines Shorter In Menu Drawer

[MMast]

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:

 

How I would like my site to look:

 

https://decemberschild.com
password: dc

[BSSCommerce-TA · 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. 

[BSSCommerce-TA · 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: 

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

[BSSCommerce-TA · 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. 

[MMast]

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

Example:

[BSSCommerce-TA · 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: 

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

[BSSCommerce-TA · 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;
}