Shopify themes, liquid, logos, and UX
As the title suggests I want to use the mobile/tablet header when using desktop PC without having to narrow the browser window.
This is in relation to the mobile friendly built-in dynamic theme Dawn 2.0, which will swap into tablet mode when the window is narrowed, what do I need to paste in to make it like this 24/7?
Solved! Go to the solution
This is an accepted solution.
@Revan - you can remove the css given above and please add this complete css and check, should be like screenshot below
@media screen and (min-width: 990px){
.header--middle-left {grid-template-areas: "drawer heading icons";
grid-template-columns: auto 1fr auto;}
header-drawer {display: initial !important; grid-area: drawer;}
.header__heading, .header__heading-link {grid-area: heading; justify-self: center !important;}
.header__inline-menu {display: none; visibility:hidden;}
}
@Revan - can you please share the page link? it may need css
@Revan - do you want like this?
@Revan - if you want like above screenshots then please add this css to the very end of your base.css file and check
@media screen and (min-width: 990px){
.header--middle-left {grid-template-areas: "drawer heading navigation icons";}
header-drawer {display: initial !important; grid-area: drawer;}
}
Hello mate, that is almost it but would it be possible to have it how it is when the window is narrowed? i.e. (removes links, centres logo) - you can see this by clicking and dragging your window to become narrow and the default theme will convert into tablet mode.
Much appreciated, are you running vista?
This is an accepted solution.
@Revan - you can remove the css given above and please add this complete css and check, should be like screenshot below
@media screen and (min-width: 990px){
.header--middle-left {grid-template-areas: "drawer heading icons";
grid-template-columns: auto 1fr auto;}
header-drawer {display: initial !important; grid-area: drawer;}
.header__heading, .header__heading-link {grid-area: heading; justify-self: center !important;}
.header__inline-menu {display: none; visibility:hidden;}
}
@Revan - welcome.
2m ago Learn the essential skills to navigate the Shopify admin with confidence. T...
By Shopify Feb 12, 2025Learn how to expand your operations internationally with Shopify Academy’s learning path...
By Shopify Feb 4, 2025Hey Community, happy February! Looking back to January, we kicked off the year with 8....
By JasonH Feb 3, 2025