A user sought help aligning the main navigation menu to the right side of the header on a Shopify Dawn theme site. Their initial CSS attempt using text-align: right on .header__inline-menu did not work.
Solutions provided:
PageFly-Richard suggested adding custom CSS code to the theme.liquid file above the </head> tag, though the specific code appears garbled in the conversation.
Shadab_dev recommended adding CSS to base.css:
.header--middle-left {
grid-template-areas: 'heading navigation icons';
grid-template-columns: auto 1fr auto;
}
.header__inline-menu {
text-align: right;
column-gap: 2rem;
}
The issue was resolved using Shadab_dev’s solution, which restructured the header grid layout to properly position the menu on the right side.
I’m currently working on this site: https://maison-rouge-ny.myshopify.com/
Password: thifis
I’m trying to align the menu on my header to the right side of the screen, like this example:
I tried using this code, and it didn’t work. What am I doing wrong?
nav.header__inline-menu {
text-align: right;
}
This is Richard from PageFly - Shopify Page Builder App
Please add this code to your theme.liquid above the to get this solved
Step 1: Online Stores > Themes > More Actions > Edit code
Step 2: click on theme.liquid and paste the code above the
Hope this can help you solve the issue
Best regards,
Richard | PageFly
Try this in base.css under everything.
.header–middle-left{
grid-template-areas: ‘heading navigation icons’;
grid-template-columns: auto 1fr auto;
column-gap: 2rem;
}
.header__inline-menu{
text-align: right;
}
Result:
This solved it! Thank you!
