Move menu items in header

[TrendBlend]

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

[Guleria]

Hello @TrendBlend ,

Follow these steps:

1. Go to Online Store -> Theme -> Edit code

2. 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

[TrendBlend]

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:

[Guleria]

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

[TrendBlend]

Hello @Guleria , it still shows up like this to me, URL: Unique Home Decor & Lighting - Create Your Perfect Space – InteriorGlows

[DaisyVo · Accepted solution]

Hi @TrendBlend 

To complete your requests, please follow these steps:

1. Go to Shopify Admin > Online Store > Theme > Customize > Theme Settings > Custom CSS https://prnt.sc/i8ljAMlHJUKl
2. 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