Jump to content

Switch to Mobile Menu on smaller devices – Farro Template

Go to solution Solved by tuanphan,

Recommended Posts

Hello!I'm using the Farro Template and have found that for several screen sizes (iPad, iPad Pro Portrait, Mobile Landscape) the nav and footer aren't responsive. Is there some code I can use that will detect when the Nav is running over two lines or overlapping itself/ other content and switch to the mobile menu?Failing this, just a mobile query for screen sizes 768px width or below that will switch to mobile design – I have tried some suggestions in other threads but they haven't worked for this template. Site: https://clownfish-maracas-6wwx.squarespace.com

Edited by AnnieTimmins
Initial Revision
Link to comment
  • Replies 12
  • Created
  • Last Reply

Top Posters In This Topic

Top Posters In This Topic

Posted Images

  • Solution

@AnnieTimmins


@media screen and (max-width:768px) {
[data-nc-base="mobile-bar"] {
   display: block;
}
[data-nc-base="header"] {
   display: none;
}
}


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

@AnnieTimmins


@media screen and (max-width:991px) {
/* Contact Page */
body#collection-5cd1a15158ee3700014f8c4e .col.sqs-col-4.span-4 {
   float: none !important;
   width: auto !important;
}
body#collection-5cd1a15158ee3700014f8c4e .col.sqs-col-2.span-2 {
   display: none;
}
/* Footer */
/* If it doesnt work, add !important to after */
.Footer .col.sqs-col-2.span-2 {
   width: auto;
   float: none;
}
}


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

@AnnieTimmins I used Chrome Dev Tool to check CSS..I don't have iPad or Smartphone....Will check again tomorrow. In additional, you can tag me when commenting, no notification was sent to my email :(

Edited by tuanphan
Initial Revision

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

@AnnieTimmins Remove CSS I sent 1 hour ago, and use this


@media screen and (max-width:991px) {
/* Contact Page */
body#collection-5cd1a15158ee3700014f8c4e .col.sqs-col-4.span-4 {
    float: none !important;
    width: auto !important;
}
body#collection-5cd1a15158ee3700014f8c4e .col.sqs-col-2.span-2 {
    display: none;
}
/* Footer */
/* If it doesnt work, add !important to after */
.Footer .col.sqs-col-2.span-2 {
    width: auto;
    float: none;
   display: block !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
  • 10 months later...
On 7/2/2019 at 4:49 PM, tuanphan said:

@media screen and (max-width:768px) { [data-nc-base="mobile-bar"] { display: block; } [data-nc-base="header"] { display: none; } }

Hi, when i try this code on my website it works  for the menu but all my other content disapear at 768 px, do you know why?

I m working with the Brine template. Could you please help me. Thanks

Link to comment
1 hour ago, priscamichaux said:

Hi, when i try this code on my website it works  for the menu but all my other content disapear at 768 px, do you know why?

I m working with the Brine template. Could you please help me. Thanks

Can you share link to your site & what problem?

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

Create an account or sign in to comment

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

×
×
  • Create New...

Squarespace Webinars

Free online sessions where you’ll learn the basics and refine your Squarespace skills.

Hire a Designer

Stand out online with the help of an experienced designer or developer.