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

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


Dario

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

 

Link to post
  • Answers 20
  • Created
  • Last Reply

Top Posters For This Question

Top Posters For This Question

Popular Posts

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 */ .hea

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 ver

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.

Posted Images

20 answers to this question

Recommended Posts

  • 1

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.

Link to post
  • 1
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;
}
}

 

You can send your question to my email to get detail answer. / How to Setup Password & Share URL 

-- I'm seriously sick. Off some time.

Link to post
  • 1

For those asking about Hamburger thickness —
Adding this code to Custom CSS worked for me on 7.1

*Edit height to whatever you want, default is 1px
 

.burger-inner .top-bun, .burger-inner .patty, .burger-inner .bottom-bun {
	height: 1px;
}

 

Edited by thompsonry
Link to post
  • 1
5 hours ago, laurasharp said:

Is it possible to add a third line to the hamburger menu icon?

Add to Home > Design > Custom CSS

/* burger 3 lines */
.burger-box .patty {
    transform: translatey(0) !important;
    height: 2px;
}

 

You can send your question to my email to get detail answer. / How to Setup Password & Share URL 

-- I'm seriously sick. Off some time.

Link to post
  • 0
On 6/12/2020 at 8:42 PM, RyanDejaegher said:

@laurasharp, yes you can adjust the height value to make the lines thicker

 

image.thumb.png.1713a17f16d69a26cd9f79d354160a09.png


.burger-inner:before, .burger-inner:after {
	height: 2px;
}



 

This header layout is EXACTLY what I want (with a 3px) burger height. I'm having trouble with it, though. Every code I've tried causes the cart to disappear and the logo to be slightly off-center (towards the right). Any tips on how to get it like this example? Thanks.

Link to post
  • 0
On 7/29/2020 at 8:35 PM, robnudds said:

This header layout is EXACTLY what I want (with a 3px) burger height. I'm having trouble with it, though. Every code I've tried causes the cart to disappear and the logo to be slightly off-center (towards the right). Any tips on how to get it like this example? Thanks.

Can you share link to your site? We can check easier.

You can send your question to my email to get detail answer. / How to Setup Password & Share URL 

-- I'm seriously sick. Off some time.

Link to post
  • 0

Hi there everybody! First of all thank you for posting the above, very helpful! I was wondering whether anybody knew how to change the spacing between the menu items when the mobile menu then pops up. Mine was fine when I started, but now the vertical spacing between the menu items is very big. I appreciate your help in advance! 

Link to post
  • 0
50 minutes ago, lilly1 said:

Hi there everybody! First of all thank you for posting the above, very helpful! I was wondering whether anybody knew how to change the spacing between the menu items when the mobile menu then pops up. Mine was fine when I started, but now the vertical spacing between the menu items is very big. I appreciate your help in advance! 

Can you share site url? We can check easier.

You can send your question to my email to get detail answer. / How to Setup Password & Share URL 

-- I'm seriously sick. Off some time.

Link to post
  • 0

Hi everybody,

Thank you @tuanphan and @thompsonry !!! 😊

Worked out well for me. I have the hamburger menu now on the desktop side, as I wanted it. It has three lines which is fine. Two would be even better, but that's not the big concern.

My problem is just now, that it is so small. So there are three little fat lines now. Is the a css to make them bigger (larger) as well?

Thanks, hanna

Link to post
  • 0
21 hours ago, hanna38 said:

Hi everybody,

Thank you @tuanphan and @thompsonry !!! 😊

Worked out well for me. I have the hamburger menu now on the desktop side, as I wanted it. It has three lines which is fine. Two would be even better, but that's not the big concern.

My problem is just now, that it is so small. So there are three little fat lines now. Is the a css to make them bigger (larger) as well?

Thanks, hanna

Can you share site url? We can check easier

You can send your question to my email to get detail answer. / How to Setup Password & Share URL 

-- I'm seriously sick. Off some time.

Link to post
  • 0

Hi guys,

I have the opposite issue. When I view on my tablet, it shows the mobile navbar even though I have plenty of space to show the desktop version. 

How do I force to show desktop navbar style for screens above a certain width?

Thanks,
Sean

Link to post
  • 0
2 hours ago, SeanC said:

Hi guys,

I have the opposite issue. When I view on my tablet, it shows the mobile navbar even though I have plenty of space to show the desktop version. 

How do I force to show desktop navbar style for screens above a certain width?

Thanks,
Sean

Can you share site url? We can help easier

You can send your question to my email to get detail answer. / How to Setup Password & Share URL 

-- I'm seriously sick. Off some time.

Link to post
  • 0
On 10/23/2020 at 11:49 PM, SeanC said:

Sure, Tuan. It's seanchen.work

Thanks for taking a look!

Add to Home > Design > Custom CSS

@media screen and (max-width:991px) and (min-width:768px) {
.header-display-desktop {
    display: flex !important;
}
.header-display-mobile {
    display: none !important;
}
.header-burger {
    display: none;
}
.header-title-nav-wrapper {
    flex: 1 0 100% !important;
}
.header-nav {
    display: flex !important;
    width: 70% !important;
    flex: 1 1 70% !important;
}
.header-title {
    flex: 1 0 30% !important;
}
}

 

You can send your question to my email to get detail answer. / How to Setup Password & Share URL 

-- I'm seriously sick. Off some time.

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