Is there any way to alter the code so that the nav menu in the Studio theme switches with the logo and is on top? Basically I want the logo/title of the site and the nav menu to switch places so nav links are on top, with logo/title on the bottom.
Topic summary
A user wants to swap the positions of the navigation menu and logo/title in the Studio theme, placing the nav links at the top and the logo/title at the bottom.
Solution provided:
- Add custom CSS to the
header.liquidfile within the style tag - Ensure logo position is set to ‘Top-center’ in theme settings
- Use a media query targeting screens 990px and wider
- Modify the
grid-template-areasproperty to reorder the header layout
Outcome:
The solution was confirmed as working by the original poster.
That’s easy just add this css to your header.liquid in the style tag,
(while making sure logo position is ‘Top-center’)
@media screen and (min-width: 990px){
.header–top-center {
grid-template-areas:
"left-icons navigation icons "
“heading heading heading”;
}
}
and boom
Perfect thanks!