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

12 answers to this question

Recommended Posts

  • 0

@AnnieTimmins


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



You can send your question to my email to get faster answer. / How to Setup Password & Share URL 

-- I'm Tuan. I work for a non-profit project (build free libraries). I check the forum once or twice a day to help out the community. If you don't see me answering your question, you can send it to the email above. There are so many questions every day so I can't answer them all at once, I will try to answer them in the next few days.

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

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

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


You can send your question to my email to get faster answer. / How to Setup Password & Share URL 

-- I'm Tuan. I work for a non-profit project (build free libraries). I check the forum once or twice a day to help out the community. If you don't see me answering your question, you can send it to the email above. There are so many questions every day so I can't answer them all at once, I will try to answer them in the next few days.

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



You can send your question to my email to get faster answer. / How to Setup Password & Share URL 

-- I'm Tuan. I work for a non-profit project (build free libraries). I check the forum once or twice a day to help out the community. If you don't see me answering your question, you can send it to the email above. There are so many questions every day so I can't answer them all at once, I will try to answer them in the next few days.

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

You can send your question to my email to get faster answer. / How to Setup Password & Share URL 

-- I'm Tuan. I work for a non-profit project (build free libraries). I check the forum once or twice a day to help out the community. If you don't see me answering your question, you can send it to the email above. There are so many questions every day so I can't answer them all at once, I will try to answer them in the next few days.

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



You can send your question to my email to get faster answer. / How to Setup Password & Share URL 

-- I'm Tuan. I work for a non-profit project (build free libraries). I check the forum once or twice a day to help out the community. If you don't see me answering your question, you can send it to the email above. There are so many questions every day so I can't answer them all at once, I will try to answer them in the next few days.

Share this post


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

Share this post


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


You can send your question to my email to get faster answer. / How to Setup Password & Share URL 

-- I'm Tuan. I work for a non-profit project (build free libraries). I check the forum once or twice a day to help out the community. If you don't see me answering your question, you can send it to the email above. There are so many questions every day so I can't answer them all at once, I will try to answer them in the next few days.

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