Jump to content

Switch to Mobile Menu on smaller devices – Farro Template

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

Link to comment
  • Replies 12
  • Views 658
  • Created
  • Last Reply

@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

Contact Customer Care - Learn CSS - Buy me a coffee (thank you!)

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

Contact Customer Care - Learn CSS - Buy me a coffee (thank you!)

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

Contact Customer Care - Learn CSS - Buy me a coffee (thank you!)

Link to comment

Archived

This topic is now archived and is closed to further replies.

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