Hide sub menu on mobile

Site URL: https://grouse-tiger-z66t.squarespace.com/

Hi

I have hidden the sub menu with the css code you see below, but on mobile the sub menu continues to be seen, it does not disappear.

Any tips? Manu thanks! 🙂

.tweak-header-primary-nav-hover-style-fade .Header-nav .Header-nav-folder-item 
{display: none;}

Hide all sub-menus?

Can you share access password?

Yes, all sub-menu.

https://grouse-tiger-z66t.squarespace.com/ 

pw:0123456789

Many thanks!

7 minutes ago, annasammarone said:

Yes, all sub-menu.

https://grouse-tiger-z66t.squarespace.com/ 

pw:0123456789

Many thanks!

Add to Home > design > Custom CSS

.Mobile-overlay-folder.is-active-folder {
    display: none;
}

It works but when I click on the menu item "shop the collection" nothing opens.

It's possible to open the first folder? Exactly as happens by default if you open the website from PC and not from phone.

Many thank!

Any news? 😅

You mean: Click Shop the collection > Browser will redirect to shop page, without opening submenu?

Yes! 🙂

I want that the menu redirect here: https://grouse-tiger-z66t.squarespace.com/shopthecollection

this is the first folder under the menu.

On desktop it already works like this... the problem is only on phone and tablet now

Add to Home > Settings > Advanced > Code Injection > Footer

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.5.0/jquery.min.js"></script>
<script>
$(document).ready(function() { 
	$('button.Mobile-overlay-nav-item.Mobile-overlay-nav-item--folder:nth-child(2)').click(function() {
		window.location = "/shopthecollection";
	});
});
</script>

Work perfect! 🙂

Many thanks!

Hello,

the website is online: https://www.annasammarone.com/

I noticed one thing: the "shop the collection" page takes on strange behavior. For example, unlike the other pages, the hamburger menu does not work and then the gallery does not have two columns when you open the page.

Any news? 🙂

I see burger fine here.

With 2 columns, add this to Home > Design > Custom CSS

@media screen and (max-width:640px) {
body#collection-5ecf99485167fa039bc6a663 {
  .sqs-gallery-design-autocolumns {
      height: unset !important;
      display: grid;
      grid-template-columns: repeat(2,minmax(0,1fr)) !important;
	grid-column-gap: 10px;
  }
.collection-type-gallery.gallery-design-grid .slide {
    top: unset !important;
    width: 100% !important;
    height: auto !important;
    position: relative;
}
}
}

On the "shop the collection" page takes - unlike the other pages, the hamburger menu does not works on iPad and then the gallery does not have two columns when you open the page. I will like two columns.

Many thanks!

@annasammarone were you wanting this 2 column layout for iPad only? 

 

Yes, for iPad only.

Many thanks!

@annasammarone 

/* Add this code to Design -> Custom CSS */
 

.sqs-gallery-design-autocolumns {
    display: grid;
    grid-template-columns: 1fr 1fr;
    height: unset !important;
    width: 100%;
    grid-gap:0 10px
}

.sqs-gallery-design-autocolumns-slide {
    position: unset !important;
    grid-column: span 1;
    width: 100% !important;
    height: unset !important;
    top: unset !important;
    left: unset !important;
}

On the iPad it now works well when the iPad is vertical.

If the iPad is in a horizontal position, the menu item does not work 😕

And I see 2 columns on mobile now 😞

On mobile I want one column

Any news?

???

It is very interesting to pay 50 euros per month and not receive any response after days of asking for help.

We are considering changing platforms for our site, thank you.