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
9124 1135 1481

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

 

To build shopify pages use pagefly You are welcome to contact me - suyash.patankar@gmail.com , My timezone is GMT+5:30.
Paranormal story video using AI
Join me for beginner level training session

View solution in original post

Replies 9 (9)

suyash1
Shopify Partner
9124 1135 1481

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

To build shopify pages use pagefly You are welcome to contact me - suyash.patankar@gmail.com , My timezone is GMT+5:30.
Paranormal story video using AI
Join me for beginner level training session
Revan
Excursionist
14 1 2

Sure thing,

4-onlineservices.myshopify.com

@suyash1 

suyash1
Shopify Partner
9124 1135 1481

@Revan - do you want like this?

suyash1_0-1644604508269.png

suyash1_1-1644604526581.png

 

 

To build shopify pages use pagefly You are welcome to contact me - suyash.patankar@gmail.com , My timezone is GMT+5:30.
Paranormal story video using AI
Join me for beginner level training session
suyash1
Shopify Partner
9124 1135 1481

@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;}
}
To build shopify pages use pagefly You are welcome to contact me - suyash.patankar@gmail.com , My timezone is GMT+5:30.
Paranormal story video using AI
Join me for beginner level training session
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
9124 1135 1481

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

 

To build shopify pages use pagefly You are welcome to contact me - suyash.patankar@gmail.com , My timezone is GMT+5:30.
Paranormal story video using AI
Join me for beginner level training session
Revan
Excursionist
14 1 2

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

suyash1
Shopify Partner
9124 1135 1481

@Revan - welcome.

To build shopify pages use pagefly You are welcome to contact me - suyash.patankar@gmail.com , My timezone is GMT+5:30.
Paranormal story video using AI
Join me for beginner level training session