Hello I want to change the location of where the menu items show in my header, my url is: Unique Home Decor & Lighting - Create Your Perfect Space – InteriorGlows, but I do not know how to do this
Topic summary
A Shopify store owner wants to reposition menu items in their header from below the logo to the right side of it, creating a horizontal layout.
Solutions Offered:
-
Guleria provided CSS code to be added to the base.css file using flexbox with gap spacing. Initial attempt moved items to the top but caused issues with language/currency selectors. A second code snippet with increased gap (25%) was suggested.
-
DaisyVo recommended adding CSS through Theme Settings > Custom CSS instead, using CSS Grid to reorganize header layout with specific grid-template-areas and columns.
Current Status:
The issue remains unresolved. After trying Guleria’s solutions, the menu items still appear below the logo rather than in the desired horizontal position next to it. The original poster removed language/currency selectors attempting to fix the layout but the core positioning problem persists.
Hello @TrendBlend ,
Follow these steps:
-
Go to Online Store → Theme → Edit code
-
Open your base.css file and paste the following code at the bottom:
@media screen and (min-width: 767px) {
header.header.header--top-left.header--mobile-center.page-width.header--has-menu.header--has-social.header--has-account.header--has-localizations {
display: flex;
gap: 15%;
}
}
Regards
Guleria
1 Like
Hello @Guleria this placed it on top but it is not placed that nice, and my language selector moved due to it. I have now removed the language and currency selectors in the header and it is again placed under my logo. do you know how to place it like this:
1 Like
Use this code
@media screen and (min-width: 767px) {
header.header.header--top-left.header--mobile-center.page-width.header--has-menu.header--has-social.header--has-account.header--has-localizations {
display: flex;
gap: 25%;
}
}
Regards
Guleria
Hi @TrendBlend
To complete your requests, please follow these steps:
- Go to Shopify Admin > Online Store > Theme > Customize > Theme Settings > Custom CSS https://prnt.sc/i8ljAMlHJUKl
- Paste the code provided into the Custom CSS section.
@media screen and (min-width: 1024px){
header.header {
grid-template-areas: "heading . navigation icons";
grid-template-columns: auto 20px 1fr auto !important;
}
Here is the result:
I hope this helps
Best,
Daisy
Hello @Guleria , it still shows up like this to me, URL: Unique Home Decor & Lighting - Create Your Perfect Space – InteriorGlows
