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

Solved

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

Revan
Excursionist
14 1 2

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?

Accepted Solution (1)
suyash1
Shopify Partner
9545 1194 1531

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

 

suyash1_0-1644634976176.png

 

Support me | To build shopify pages use pagefly | You are welcome to contact me - suyash.patankar@gmail.com , My timezone is GMT+5:30.

View solution in original post

Replies 9 (9)

suyash1
Shopify Partner
9545 1194 1531

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

Support me | To build shopify pages use pagefly | You are welcome to contact me - suyash.patankar@gmail.com , My timezone is GMT+5:30.
Revan
Excursionist
14 1 2

Sure thing,

4-onlineservices.myshopify.com

@suyash1 

suyash1
Shopify Partner
9545 1194 1531

@Revan - do you want like this?

suyash1_0-1644604508269.png

suyash1_1-1644604526581.png

 

 

Support me | To build shopify pages use pagefly | You are welcome to contact me - suyash.patankar@gmail.com , My timezone is GMT+5:30.
suyash1
Shopify Partner
9545 1194 1531

@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;}
}
Support me | To build shopify pages use pagefly | You are welcome to contact me - suyash.patankar@gmail.com , My timezone is GMT+5:30.
Revan
Excursionist
14 1 2

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
Excursionist
14 1 2
suyash1
Shopify Partner
9545 1194 1531

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

 

suyash1_0-1644634976176.png

 

Support me | To build shopify pages use pagefly | You are welcome to contact me - suyash.patankar@gmail.com , My timezone is GMT+5:30.
Revan
Excursionist
14 1 2

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

suyash1
Shopify Partner
9545 1194 1531

@Revan - welcome.

Support me | To build shopify pages use pagefly | You are welcome to contact me - suyash.patankar@gmail.com , My timezone is GMT+5:30.