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

Switch to Mobile Menu on smaller devices – Farro Template

Question

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

Share this post


Link to post

10 answers to this question

Recommended Posts

  • 0

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).

Share this post


Link to post
  • 0

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).

Share this post


Link to post
  • 0

@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.

screen-shot-2019-07-03-at-92928-am.png.9ef2c6b233d1599502a4f79900a996ac.png

screen-shot-2019-07-03-at-92908-am.png.1210c0ae34a5e561df9057eb6ecd21e9.png

Share this post


Link to post
  • 0

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



COVID-19Free priority support for all users (29/03 - 30/04). You can tag me (@tuanphan) or send to my email.

With paid support, see here

How to Setup Password & Share URL

 

Share this post


Link to post
  • 0

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).

Share this post


Link to post
  • 0

@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

COVID-19Free priority support for all users (29/03 - 30/04). You can tag me (@tuanphan) or send to my email.

With paid support, see here

How to Setup Password & Share URL

 

Share this post


Link to post
  • 0

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



COVID-19Free priority support for all users (29/03 - 30/04). You can tag me (@tuanphan) or send to my email.

With paid support, see here

How to Setup Password & Share URL

 

Share this post


Link to post

Create an account or sign in to comment

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


×
×
  • Create New...