Adjusting the mobile breakpoint in 7.1

Hi! 

Is there a way of adjusting the mobile breakpoint in version 7.1? The navigation of my website and also some text looks weird on an iPad landscape view and I would like to change it so the navigation changes to a hamburger icon and the text moves on top of pictures. Happy about any suggestions!

Thank you!

Sabine 

Can you share link to page in screenshot?

www.osteopatsabinestage.se

18 hours ago, sabinestage said:

www.osteopatsabinestage.se

Add to Home > design > custom CSS

@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;
}
}

Thank you @tuanphan! Appreciate it!

I added the CSS Code to my website. Now, the navigation is only with a burger icon even on my MacBook. Can that be adjusted just to iPad size?

Best

Sabine

I mean, some of the font (headers) are still not right. I would like them to move on top of the text as they do in the mobile version. It is about changing the breaking point for the mobile version I guess. 

Thank you!

On 5/3/2020 at 12:44 AM, sabinestage said:

Thank you @tuanphan! Appreciate it!

I added the CSS Code to my website. Now, the navigation is only with a burger icon even on my MacBook. Can that be adjusted just to iPad size?

Best

Sabine

On 5/3/2020 at 12:49 AM, sabinestage said:

I mean, some of the font (headers) are still not right. I would like them to move on top of the text as they do in the mobile version. It is about changing the breaking point for the mobile version I guess. 

Thank you!

Have you solved yet?

no.

Hey! I was also having trouble with this – you just need to change 'min-width' to 'max-width' I think

So – on the website I was designing, the nav links kept going to multiple lines, and I wanted it to just snap to the hamburger/mobile mode earlier

I couldn't get the code provided here to work, until I realised you need to change it to max-width.

On my site, I needed it to switch to mobile mode once it hit 1240px

Quote

@media screen and (max-width:1240px) {
 /* 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;
}
}

Hope this helps!

Thanks @seannygorman — worked perfectly for me.

On 4/30/2020 at 2:24 PM, tuanphan said:

Add to Home > design > custom CSS

@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;
}
}

 

Hi there, thanks for the code. That's great. Is there a way to force the burger menu to be right aligned? It somehow appears on the left. Many thanks

12 hours ago, alexscasny said:

Hi there, thanks for the code. That's great. Is there a way to force the burger menu to be right aligned? It somehow appears on the left. Many thanks

Can you share site url? We can check easier.

On 9/23/2020 at 12:28 AM, tuanphan said:

Can you share site url? We can check easier.

https://www.delicario.com/home

Removed the code already but would be helpful anyway

Hi everyone. I used the code below and it worked very well, thank you!! But now unfortunately the font colour has turned black, it was my site-wide turquoise colour for headings before. Does anybody know how to change the colour within this? Also, has anybody experienced problems with loading speed once the site has more visitors? 

On 4/30/2020 at 3:24 PM, tuanphan said:

@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;
}
}

Site URL: https://drum-keyboard-blas.squarespace.com/ pass: weavelg

worked perfectly thanks! 

However, On desktop the space between the navigation items is huge, I have to scroll to see them all, how do I adjust that?

Thanks

6 hours ago, nzricky said:

On desktop the space between the navigation items is huge,

Add the following to Design > Custom CSS.

/* adjust burger menu spacing on desktop */

@media screen and ( min-width : 768px ) {

  .header-menu-nav-item a {
  
    margin : 2vw;
    
    }
    
  }

This is for v7.1 and specific the the poster's need.

Let us know how it goes.
 

On 4/1/2021 at 4:58 AM, nzricky said:

Site URL: https://drum-keyboard-blas.squarespace.com/ pass: weavelg

worked perfectly thanks! 

However, On desktop the space between the navigation items is huge, I have to scroll to see them all, how do I adjust that?

Thanks

The url doesn't exist. Can you check it again?

@tuanphan this worked perfectly for me thank you!

On 9/22/2020 at 7:09 AM, alexscasny said:

Hi there, thanks for the code. That's great. Is there a way to force the burger menu to be right aligned? It somehow appears on the left. Many thanks

How do I get it to float right? I'd like it to be 35% width, float right.

On 12/22/2021 at 8:57 PM, thevelveteenstudio said:

How do I get it to float right? I'd like it to be 35% width, float right.

Use this code

@media screen and (min-width:768px) {
.header-menu {
    width: 35%;
    left: unset;
}
}

On 12/25/2021 at 3:57 AM, tuanphan said:

Use this code

@media screen and (min-width:768px) {
.header-menu {
    width: 35%;
    left: unset;
}
}

 

Thank you SO much!

I've used this code on a website I'm working on, but the shopping cart icon disappears on tablet view. Any thoughts?

peregrineplants.com

On 3/24/2022 at 6:02 AM, GraemeWalker said:

I've used this code on a website I'm working on, but the shopping cart icon disappears on tablet view. Any thoughts?

peregrineplants.com

It looks like you figured it out? I see cart icon on tablet now

Hi, I would love to know how to get the cart icon to re-appear!

Thanks

Solved thanks!