How to move the main menu on the below logo of Dawn theme?
Topic summary
A user seeks to reposition the main navigation menu below the logo in Shopify’s Dawn theme.
Proposed Solutions:
Two approaches have been suggested:
-
PageFly-Victor’s method: Edit the
theme.liquidfile by adding custom code before the</body>tag to restructure the header layout. -
Litos’s CSS approach: Insert CSS code into the
style.cssfile (Assets folder) targeting screens wider than 990px. The code modifies grid template areas to place navigation below the header elements and centers the menu items.
Both solutions involve custom code modifications to the theme files. The CSS solution includes a visual reference showing the expected result with the menu centered beneath the logo.
Status: The discussion remains open with no confirmation from the original poster about which solution was implemented or whether either resolved the issue.
Hi @lichael06 ,
This is Victor from PageFly - Landing page builder, I’d like to suggest this idea:
Step 1. Go to Online Store → Theme → Edit code
Step 2. Open your theme.liquid theme file
Step 3. Paste below code before :
Hope my answer will help you.
Best regards,
Victor | PageFly
Hi @lichael06 ,
Please go to Actions > Edit code > Assets > style.css file and paste this at the bottom of the file:
@media screen and (min-width: 990px){
.header_new.header--top-center{
grid-template-areas:
"drawer heading icons"
"navigation navigation navigation" !important;
grid-template-columns: 1fr 1fr 1fr !important;
}
header-drawer {
grid-area: drawer;
}
.header--top-center .header__inline-menu>.list-menu--inline {
justify-content: center !important;
}
}
it will display like this
