I need to move the menu in my header to the right side of the screen using Dawn theme

[Justin81]

As stated above, I just need to move my header menu to the right side of the screen and keep the logo on the left. I have tried adding .header__inline-menu {text-align: right;} to the base.css but that didn’t work.

My store URL is: www.assembleperformance.com

Thank you!

[Made4uo-Ribe]

Hi @Justin81 ,

Im not sure if this is what you mean.

1. From your Shopify admin dashboard, click on “Online Store” and then “Themes”.
2. Find the theme that you want to edit and click on “Actions” and then “Edit code”.
3. In the “Assets” folder, click on “base.css” file, depending on which file your theme uses to store its CSS styles. At the bottom of the file, add the following CSS code:
4. And Save.

header.header.header--middle-left.header--mobile-center.page-width.header--has-menu {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    grid-gap: 10px;
}
nav.header__inline-menu {
    justify-self: end;
}

Result:

I hope it help.

[Justin81]

That worked. Thank you so much!! Is there an easy way to increase the font size of the menu as well?

[Justin81]

Actually, that worked on the web, but on mobile my logo is now moved to the right and not centered. Do you know of a fix for that?

[Made4uo-Ribe]

To increase the font size, try this.

ul.list-menu.list-menu--inline a {
    font-size: 20px;
}

Result:

Note: you can adjust the size of the font.

[Justin81]

Awesome, thank you!!

This all looks great on the web, but on mobile my logo is now shifted to the right and not in the center. Is there a way to fix this?

[Made4uo-Ribe]

Yes, we can fix that my fault I didnt check before giving the code.

Try this one.

@media only screen and (max-width: 989px){
header.header.header--middle-left.header--mobile-center.page-width.header--has-menu {
    display: grid;
    grid-template-columns: repeat(3,1fr);
    grid-gap: 10px;
}
}

Result:

Same Instruction.

I hopei t help,.

[Justin81]

That reset the mobile view to be correct but the on the web view the menu is now back on the left.

[Made4uo-Ribe]

The code above didnt work? Still staying on the left? the different is just the 2 and 3 grid template column. In the mobile better repeat 3 so the logo is on the center. And the desktop is 2 so the menu stay on the right togethere with the search icons.

[Justin81]

Correct. Here is the code I have and what the site looks like on the web. It looks like another difference is the @media portion at the top.

[Justin81]

I got it to work! I didn’t realize I was just putting the code at the bottom of what was already there and not replacing the original code you sent. Thank you!!

[Made4uo-Ribe]

Thats great, Good to hear!