Goal: move the Dawn theme’s top navigation to the right while keeping the logo in the middle-left position on desktop.
Key solution (CSS on desktop ≥990px):
Clarifications: The user asked where to place the code; guidance was given for base.css and an alternative inline placement in theme.liquid. Images were included to illustrate the exact location in the code editor.
Outcome: The user confirmed the change worked. Scope is desktop-only due to the media query.
Status: Resolved; no remaining open questions.
Quick question.
I am using the Dawn Theme. Currently, the logo is middle left, which is perfect. But is there anyway to move the navigation to the right side of the website? There only appears to be 3 options when it comes to logo and navigation placement. I love the location of the logo but would like to move only the navigation.
My site:
Thanks in advance!
Hi @Justin34 ,
I’m Kate from PageFly - Landing Page Builder, Please give it a try with this new solution
<>
@media screen and (min-width: 990px)
base.css?v=…? [sm]:2228
.header–middle-left {
grid-template-areas: “heading navigation icons”;
grid-template-columns: auto auto 1fr;
column-gap:17rem;
<>
What section of the code editor do I add this code? Thanks so much!
hello,
Please add code given below above in theme.liquid.
layout >> theme.liquid
@media screen and (min-width: 990px){ .header--middle-left { grid-template-areas: "heading heading heading navigation icons"!important; }after the adding given code looks like this,
Worked perfectly. Thanks!
