Switch to Mobile Menu on smaller devices – Farro Template

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

@AnnieTimmins

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

Great thanks :) You're solving all my problems! Is there a simple solution for the footer and the about page as well? (I'd like the design to collapse to single column for these sections below 768px).

Great thanks :) You're solving all my problems! Is there a simple solution for the footer and the about page as well? (I'd like the design to collapse to single column for these sections below 768px).

@AnnieTimmins I see footer/about page is normal. Can you describe details (screenshot is better)?

@tuanphan My mistake, I meant to say contact page. Screen shot attached, the text overlaps rather than collapsing to 1 x column. The footer is still legible but messy. Would prefer for it to collapse to 1 x column too.

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

Amazing, thanks! Worked for the contact page but the code for the footer just makes it disappear (at least on Chromes developer tools, I don't have a device that size with me currently to test it on).

@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 :(

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

@tuanphan super! That fixed it. Thanks so much :D

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

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?