(Dawn 2.0) I want to use the mobile/tablet header on PC without having to narrow the browser window.

[Revan]

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?

[suyash1]

@Revan - can you please share the page link? it may need css

[Revan]

Sure thing,

4-onlineservices.myshopify.com

@suyash1 

[suyash1]

@Revan - do you want like this?

[suyash1]

@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;}
}

[Revan]

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?

[Revan]

@suyash1 

[suyash1 · 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]

Thank you so much your solution worked perfectly and easily. @suyash1 

[suyash1]

@Revan - welcome.