Jump to content

How to make mobile menu skip folder?

Recommended Posts

Posted

Site URL: https://www.nickwaldinger.com/

Hello,

My header uses a folder to house my primary navigation (see attached screenshot "Desktop"). It works perfectly on desktop, but on mobile it goes to a menu screen that shows the folder, and then I have to click the folder name (the folder is named with a plus sign "+" ) to see my primary navigation. I'd like for it to be when I click the mobile menu icon, my primary navigation comes up and skips the folder. I've attached two screenshots; "1" shows how it currently works, and "2" shows how I'd like it to work. Also, I'd like to hide/remove the "back" button above my primary navigation.

Does anybody know how to do this?

Thank you!

Desktop.png

1.jpg

2.jpg

  • 11 months later...
Posted
On 5/5/2022 at 1:06 AM, tuanphan said:

Hi. This is possible with 7.1. I haven't tested with your template. But if you add + again, we can take a look

Hi @tuanphan,

 

I would like to do exactly with my mobile menu what this person described. Could you take a look and see if this is possible? Would be very much appreciated.

 

My website:

www.intro-verso.com

Cheers

Posted
7 hours ago, Mathias654321 said:

Hi @tuanphan,

 

I would like to do exactly with my mobile menu what this person described. Could you take a look and see if this is possible? Would be very much appreciated.

 

My website:

www.intro-verso.com

Cheers

Add to Design > Custom CSS

@media screen and (max-width:900px) {
.Mobile-overlay-folder {
    z-index: 2;
    -webkit-transform: translate3d(0,0,0);
    -moz-transform: translate3d(0,0,0);
    -ms-transform: translate3d(0,0,0);
    -o-transform: translate3d(0,0,0);
    transform: translate3d(0,0,0);
}
nav.Mobile-overlay-nav.Mobile-overlay-nav--primary {
    display: none;
}
button.Mobile-overlay-folder-item.Mobile-overlay-folder-item--toggle {
    display: 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!)

  • 1 year later...
Posted

i did found a working code, yay! here it is:

@media screen and (max-width:991px) {
	.header-menu-nav-folder {
    transform: unset !important;
}
.header-menu-controls.container.header-menu-nav-item {
    display: none;
}
[data-folder="root"]>.header-menu-nav-folder-content:first-child {
    display: none;
}}

Create an account or sign in to comment

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

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