Jump to content
Search In
  • More options...
Find results that contain...
Find results in...
Advanced Search
  • 0
Dario

How to force mobile menu to remain on desktop site - v. 7.1

Question

Hello everyone,

Can you please advise on how to force the mobile menu on a desktop?

I am new to squarespace and trying to keep the hamburger menu on with all screen sizes.

I'm using version 7.1  - and all online resources are based on a previous versions were you can edit mobile settings that are not available anymore.

It would be great if you can suggest any tips or custom code. 

website: tarpon-reed-27ss.squarespace.com 

password: 1234

many thanks,

Dario

 

Share this post


Link to post

4 answers to this question

Recommended Posts

  • 0

Hey there,

Going to preface that I am not a coder. I poke around and add custom code until I break the site, then I try to fix it to the way I like it.

The following code worked for me on my site: http://mattehue.com :

@media screen and (min-width: 1px) {
 
.header-layout-nav-right .header-nav-list {
display: none;
} 

.header-burger {
  display:flex;
}
  
.header--menu-open .header-menu {
opacity: 1;
visibility: visible;
}


}

You're basically telling the browser that at all times—anytime the screen is greater than 1px wide—to hide the web nav, display the hamburger menu, then make the mobile menu visible.

Share this post


Link to post
  • 0
On 1/23/2020 at 4:54 AM, rsmith3074 said:

Did you ever have any luck with this? I'm looking to do the same thing. 

I also can't see the post from sarahnoni.

 

On 2/14/2020 at 7:16 AM, Marfthew said:

Hey there,

Going to preface that I am not a coder. I poke around and add custom code until I break the site, then I try to fix it to the way I like it.

The following code worked for me on my site: http://mattehue.com :


@media screen and (min-width: 1px) {
 
.header-layout-nav-right .header-nav-list {
display: none;
} 

.header-burger {
  display:flex;
}
  
.header--menu-open .header-menu {
opacity: 1;
visibility: visible;
}


}

You're basically telling the browser that at all times—anytime the screen is greater than 1px wide—to hide the web nav, display the hamburger menu, then make the mobile menu visible.

Thank you. I just tweaked your code to work on my site, 7.1

Here is code

/* 768 for tablet - desktop - 992 for desktop */
@media screen and (min-width:768px) {
 /* hide navigation */
    .header-nav {
    display: none;
}
/* Hide header button */
.header-actions {
    display: none;
}
/* show burger */
.header-burger {
  display: flex;
}
/* Show overlay mobile menu */
.header--menu-open .header-menu {
opacity: 1;
visibility: visible;
}
}

 


COVID-19Free priority support for all users (29/03 - 30/04). You can tag me (@tuanphan) or send to my email.

With paid support, see here

How to Setup Password & Share URL | 120+ SS 7.1 code

 

Share this post


Link to post

Create an account or sign in to comment

You need to be a member in order to leave a comment


×
×
  • Create New...