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
8957 1111 1456

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.
Support me

View solution in original post

Replies 9 (9)

suyash1
Shopify Partner
8957 1111 1456

@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.
Support me
Revan
Excursionist
14 1 2

Sure thing,

4-onlineservices.myshopify.com

@suyash1 

suyash1
Shopify Partner
8957 1111 1456

@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.
Support me
suyash1
Shopify Partner
8957 1111 1456

@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.
Support me
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
8957 1111 1456

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.
Support me
Revan
Excursionist
14 1 2

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

suyash1
Shopify Partner
8957 1111 1456

@Revan - welcome.

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