How can I align all items in my hamburger menu to the center?

[ddai]

Can any of you help me center all of the items in my hamburger menu. I have added code to make the menu open across the whole screen, now i just need the links to be lined up in the middle like how the logo is. i have included picture of what i am looking to do . my site is ysamani.com thank you for any and all help. 

[ZestardTech · Accepted solution]

Hello There,
1. In your Shopify Admin go to online store > themes > actions > edit code
2. Find Asset -> base.css and paste this at the bottom of the file:

.list-menu__item {
    display: inherit!important;
    text-align: center;
}

[AliReviews]

Hello @ddai ,

You can try to follow these steps:

• Go to Online Store -> Themes -> Actions -> Edit code
• Go to Assets folder -> go to the file that contains your hamburger menu code. This is usually named something like "theme.js" or "scripts.js".
• Find the code that controls the styling of your hamburger menu. This could be a class or ID assigned to the menu element, or it could be a specific section of the code that begins with something like $(".hamburger-menu").click(function(){.
• Add the following code to center the items in your hamburger menu:

var menuWidth = $(".mobile-nav__list").width();
var windowWidth = $(window).width();
var offset = (windowWidth - menuWidth) / 2;
$(".mobile-nav__list").css("left", offset);

• Save and preview 

Hope this can help. Let us know if you need any further support.

Ali Reviews team.

[ddai]

I am not sure where to put it. I have tried under component_menu_drawer.css and theme-editor.js with no luck

[StoreWatchers]

Hi, @ddai 

Greetings from the Store Watchers Support Team! Happy to help you today.

1. Go to online store > theme > edit code > assets > base.css(file) and Paste the below code at the bottom of the file -> Save

.menu-drawer__menu .list-menu__item {
    justify-content: center;
}

After applying the above CSS code , it will show like the following screenshot:

Let me know If need further assistance

Regards,

Store Watchers Support Team

[ddai]

You all are the best. Thank you !

[ZestardTech · Accepted solution]

Hello There,
1. In your Shopify Admin go to online store > themes > actions > edit code
2. Find Asset -> base.css and paste this at the bottom of the file:

.list-menu__item {
    display: inherit!important;
    text-align: center;
}

[INA_MSWEB · Accepted solution]

Hi @ddai 

I hope you are doing good and welcome to the Shopify Community!
I am San from MS Web Designer.

Please add this css in your bottom of the css file:
.menu-drawer__menu .list-menu__item {justify-content: center;}

Regards,

San

[ddai]

You all are the best. Thank you !!