Smudo Posted January 6 Share Posted 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. Link to comment
Solution tuanphan Posted January 8 Solution Share Posted 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; } } Email me if you have need any help (free, of course.). Answer within 24 hours. Or send to forum message How to: Setup Password & Share url - Insert Custom CSS - Page Header - Upload Custom Font - Upload File - Find Block ID - Contact Customer Care Link to comment
Smudo Posted January 8 Author Share Posted 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? 😃 Link to comment
Ahsan222 Posted January 8 Share Posted 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. Link to comment
Smudo Posted January 8 Author Share Posted 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. Link to comment
Recommended Posts
Create an account or sign in to comment
You need to be a member in order to leave a comment