Align menu navigation to right (Studio theme)

[thrilly]

Hi. I'm using the Studio theme, and I would like to align the menu navigation in the header to the right (on desktop). There'll be more menu items soon, and I've taken out the shopping cart and search functions as I currently don't need them. This is the URL: https://sjappavaar.myshopify.com/

Thanks for any help!

[AvadaCommerce · Accepted solution]

Hi @thrilly ,

You can follow the instruction below:

1. Go to Online Store->Theme->Edit code
2. Asset->/base.css->paste below code at the bottom of the file:

@media (min-width: 990px) {
.header--middle-left {
     grid-template-columns: auto 1fr !important;
}
.header__icons {
     display: none !important;
}
.header--middle-left .header__inline-menu {
    text-align: right !important;
}
}

If you feel like my answer is helpful, please mark it as a SOLUTION. Let me know if you have any further questions.

[thrilly]

Thank you! This worked perfectly. @AvadaCommerce 

[KetanKumar]

@thrilly 

can you try this code

1. Go to Online Store->Theme->Edit code
2. Asset->/base.css->paste below code at the bottom of the file:

.header--middle-left {grid-template-columns: auto 1fr !important;}
.header__icons {display: none !important;}
.header--middle-left .header__inline-menu {text-align: right !important;}

[PaulNewton]

Also note since it's grid you can rearrange the template areas.

.header--middle-left {
    grid-template-columns: auto 1fr 3fr;
    grid-template-areas: "heading icons navigation";
}

or with the icons area omitted when they are not displayed by css or not rendered

.header--middle-left {
    grid-template-columns: auto 1fr;
    grid-template-areas: "heading navigation";
}