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

Adjusting the mobile breakpoint in 7.1


sabinestage

Question

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 

Screenshot 2020-04-25 at 18.51.34.png

Link to comment

16 answers to this question

Recommended Posts

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

 

Email me if you have need any help (free, of course.). Answer within 24 hours.

How to: Setup password & share url - Insert Custom CSS - Page Header - Upload Custom Font - Upload File - Find Block ID - Contact Customer Care - Learn CSS - Custom Popup - Testimonial Slider

I'm Tuan, blogger/owner of a free library for children in Vietnam. Helping the community is a hobby. Contact me via email.

Link to comment
  • 1

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!

Link to comment
  • 1
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.
 

Edited by creedon

Find my contributions useful? Please like, upvote, mark my answer as best , and see my profile. Thanks for your support!

Link to comment
  • 1
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?

Email me if you have need any help (free, of course.). Answer within 24 hours.

How to: Setup password & share url - Insert Custom CSS - Page Header - Upload Custom Font - Upload File - Find Block ID - Contact Customer Care - Learn CSS - Custom Popup - Testimonial Slider

I'm Tuan, blogger/owner of a free library for children in Vietnam. Helping the community is a hobby. Contact me via email.

Link to comment
  • 0

Can you share link to page in screenshot?

Email me if you have need any help (free, of course.). Answer within 24 hours.

How to: Setup password & share url - Insert Custom CSS - Page Header - Upload Custom Font - Upload File - Find Block ID - Contact Customer Care - Learn CSS - Custom Popup - Testimonial Slider

I'm Tuan, blogger/owner of a free library for children in Vietnam. Helping the community is a hobby. Contact me via email.

Link to comment
  • 0
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?

Email me if you have need any help (free, of course.). Answer within 24 hours.

How to: Setup password & share url - Insert Custom CSS - Page Header - Upload Custom Font - Upload File - Find Block ID - Contact Customer Care - Learn CSS - Custom Popup - Testimonial Slider

I'm Tuan, blogger/owner of a free library for children in Vietnam. Helping the community is a hobby. Contact me via email.

Link to comment
  • 0
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

Link to comment
  • 0
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.

Email me if you have need any help (free, of course.). Answer within 24 hours.

How to: Setup password & share url - Insert Custom CSS - Page Header - Upload Custom Font - Upload File - Find Block ID - Contact Customer Care - Learn CSS - Custom Popup - Testimonial Slider

I'm Tuan, blogger/owner of a free library for children in Vietnam. Helping the community is a hobby. Contact me via email.

Link to comment
  • 0

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

 

Link to comment

Create an account or sign in to comment

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

×
×
  • Create New...