Hello! I would like for my inline navigation menu in the header to align left with the logo. I am on the Showcase Luna theme and it does not header formatting alternatives.
What is currently looks like:
Hello @spearsl07
You can follow these steps:
- Go to Online Store->Theme->Edit code
- Open your theme.liquid file, paste the below code before
I hope the above is useful to you.
Kind & Best regards,
GemPages Support Team
Hi @spearsl07 ,
Go to Assets > styles.css and paste this at the bottom of the file:
@media (min-width: 1100px) {
.site-control.nav-inline-desktop .site-control__inner {
display: grid !important;
grid-template-areas: "navigation logo icons";
grid-template-columns: auto 1fr auto;
}
.site-control.nav-inline-desktop .site-control__inner .logo {
grid-area: logo;
width: 100% !important;
}
.nav-inline-desktop .logo img {
margin: auto !important;
}
.site-control.nav-inline-desktop .site-control__inline-links {
grid-area: navigation;
}
.site-control.nav-inline-desktop .nav-right-side {
grid-area: icons;
}
}
Hope it helps!
Hello! That moves the inline nav to left, yes–see screenshot below. But it moves the Logo to the center. I want both logo and inline navigation on the left with logo first. Any additional edits.
Hello! Thanks for the proposed solution. Unfortunately, this didn’t do anything. Any updates?
Hi @spearsl07 ,
Please send me the preview link, I will help you check it
Hi @spearsl07 ,
Go to Assets > styles.css and paste this at the bottom of the file:
@media (min-width: 1100px) {
.site-control.nav-inline-desktop .site-control__inner .logo {
order: 1;
width: 20% !important;
}
.nav-inline-desktop .logo img {
margin: auto !important;
}
.site-control.nav-inline-desktop .site-control__inline-links {
order: 0;
width: 40% !important;
text-align: left !important;
}
.site-control.nav-inline-desktop .site-control__inner .nav-row {
text-align: left !important;
}
.site-control.nav-inline-desktop .nav-right-side {
order: 2;
width: 40% !important;
}
}
Hope it helps!