How to center the menu on the Stiletto Theme

Hello! I am using the stiletto theme and I want to center the main menu while keeping the logo on the left and the icons on the right. I would like to center the menu both in mobile and desktop versions.

My store url would be: www.winnerofficial.com

Thank you!

Hi @martujv

try to add this code1. Go to Online Store->Theme->Edit code
2. Asset->theme.css-> paste bellow code in bottom of file

.header__inner [data-scroll-container], .header__inner [data-scroll-container][data-axis=horizontal] { width: 100%; } 
.header__row-segment.header__row-segment-desktop.left.contains-nav { flex-grow: 1; } div[data-scroll-container-viewport] { justify-content: center; }
1 Like

Hello @martujv

You can add code by following these steps

  1. Go to Online Store → Theme → Edit code.

  2. Open your theme.liquid file

  3. Paste the below code before on theme.liquid

.header__inner .header__row { position: relative; } .header__inner .header__links-primary-scroll-container { position: absolute; left: 41%; } @media screen and (max-width:991px) .header__inner button.header__menu-icon { position: absolute; right: 47%; } }

Mobile:

techlyser_web_0-1703690330284.png

Desktop:

1 Like