Force the desktop header on mobile devices like iPad (1024px)

Smudo · January 6

How can I force the desktop header (without the hamburger menu) on an iPad of width 1024px.

My site: https://duck-blackbird-74nd.squarespace.com (currently public)

Thx so much.

tuanphan · January 8

Hi,

Add to Design > Custom CSS

@media screen and (max-width:991px) {
	.header-display-desktop {
    display: flex !important;
}
.header-display-mobile {
    display: none;
}
.header-burger {
    display: none;
}
.header-nav {
    display: flex !important;
}
.header-nav {
    display: flex !important;
    flex: 70% !important;
    justify-content: flex-end;
    width: 70% !important;
}
.header-title {
    flex: 50% !important;
}
.header-layout-nav-right .header-actions, .header-actions-action {
    display: flex !important;
}
.header-title-nav-wrapper {
    flex: 1 0 50px !Important;
}
}

Smudo · January 8

Great! Thanks so much, tuanphan.

May I ask how I find the Squarespace element names like .header-display-desktop, .header-burger, etc. so I can experiment by deducing the meaning myself? In other words, how can I learn a little bit of what you know? 😃

Ahsan222 · January 8

On an iPad, you can force the desktop header by using the following @media query in your CSS:

Copy code

@media only screen and (min-device-width: 1024px) { /* desktop header styles go here */ }

This will apply the styles specified within the curly braces only to devices with a minimum device width of 1024 pixels. This means that the desktop header will be displayed on iPads and other devices with a screen width of 1024 pixels or greater.

Alternatively, you can use the max-width property instead of min-width to apply the styles to devices with a maximum screen width of 1024 pixels.

Copy code

@media only screen and (max-device-width: 1024px) { /* desktop header styles go here */ }

Keep in mind that this will apply the styles to all devices with a maximum screen width of 1024 pixels, including smartphones and other smaller devices.

Smudo · January 8

Thanks Ahsan,

I know the @media keyword. But I didn't know the instructions, that go into the brackets {} to switch to the desktop header.

Force the desktop header on mobile devices like iPad (1024px)

Recommended Posts

Smudo

Link to comment

Top Posters In This Topic

Popular Days

Top Posters In This Topic

Popular Days

tuanphan

Link to comment

Smudo

Link to comment

Ahsan222

Link to comment

Smudo

Link to comment

Create an account or sign in to comment

Resources

Squarespace Webinars

Hire a Designer

Support

Community

Developers

Resources