A user seeks to center the main navigation menu in the Stiletto Shopify theme while keeping the logo left-aligned and icons right-aligned, for both desktop and mobile versions.
Solutions Provided:
Two community members offered CSS-based approaches:
First solution: Add CSS code to theme.css file targeting header elements with flexbox properties (justify-content: center, flex-grow: 1) to center the menu container
Second solution: Insert CSS in theme.liquid before the </body> tag using absolute positioning to center the primary navigation links, with specific adjustments for mobile viewports (max-width: 991px)
Both solutions include step-by-step instructions for accessing Shopify’s theme code editor. The second response includes before/after screenshots showing desktop and mobile implementations.
Status: The discussion remains open with no confirmation from the original poster about which solution worked or if the issue was resolved.
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; }
Hello @martujv
You can add code by following these steps
Go to Online Store → Theme → Edit code.
Open your theme.liquid file
Paste the below code before on theme.liquid
Mobile:
Desktop:
