Show Secondary Nav in Mobile Menu?

Hi there! Is there a way you can force the drop-down navigation links/text (secondary nav) to show automatically in mobile view (SQSP 7.1)? The attached image is how it appears now. On my site, I have two main nav links (Free Resources + Consulting). And, under Free Resources (a folder), I have two links. I'd love, on mobile, for those two links to appear without the user having to click on "Free Resources." Is this possible?

You can add sub links to Navigation, then I will give the code to hide them on desktop, show on mobile only.

Hi

Use this code in Design -> Custom CSS

@media screen and (max-width:767px){
.header-menu-nav-folder {
    transform: none;
    min-height: 130px !important;
    height: 100vw;
}

.header-menu-controls.container.header-menu-nav-item:first-child {
    display: none;
}

.header-menu-nav-folder-content {
    height: 100vw;
    margin-top: -100px;
}


.header-menu-nav-item-content {
    margin-top: 100vw;
}

.header--menu-open .header-menu .header-menu-cta {
    position: absolute;
    bottom: 10px;
    width: 100%;
}

nav.header-menu-nav-list {
    height: 100vw;
}

.header-menu-nav-folder[data-folder="root"] {
    height: 100vh;
}

.header-menu-nav-item:last-child {margin-top: 10px;line-height: 60px !important;}

.header-menu .header-menu-nav a[data-folder-id="/free-resources"] {
    display: none;
}

.header--menu-open .header-menu .header-menu-nav-list {
    height: 100vw;
}

.container.header-menu-nav-item.header-menu-nav-item--collection:last-child {
    margin-top: 300px;
}

.header--menu-open.tweak-transparent-header .header-menu .header-menu-nav a {
    line-height: 60px;
}
}

Please use the like button if it helps you!

Best,
Leopold

@tuanphan Was confused by your request, as there already were sublinks in my nav (under "Free Resources"), but @IXStudio's code worked. Thanks, you two.

On 8/28/2020 at 1:19 PM, IXStudio said:

Hi

Use this code in Design -> Custom CSS

@media screen and (max-width:767px){
.header-menu-nav-folder {
    transform: none;
    min-height: 130px !important;
    height: 100vw;
}

.header-menu-controls.container.header-menu-nav-item:first-child {
    display: none;
}

.header-menu-nav-folder-content {
    height: 100vw;
    margin-top: -100px;
}


.header-menu-nav-item-content {
    margin-top: 100vw;
}

.header--menu-open .header-menu .header-menu-cta {
    position: absolute;
    bottom: 10px;
    width: 100%;
}

nav.header-menu-nav-list {
    height: 100vw;
}

.header-menu-nav-folder[data-folder="root"] {
    height: 100vh;
}

.header-menu-nav-item:last-child {margin-top: 10px;line-height: 60px !important;}

.header-menu .header-menu-nav a[data-folder-id="/free-resources"] {
    display: none;
}

.header--menu-open .header-menu .header-menu-nav-list {
    height: 100vw;
}

.container.header-menu-nav-item.header-menu-nav-item--collection:last-child {
    margin-top: 300px;
}

.header--menu-open.tweak-transparent-header .header-menu .header-menu-nav a {
    line-height: 60px;
}
}

Please use the like button if it helps you!

Best,
Leopold

Leopold / @IXStudio

I am trying to achieve the same in Square Space 7.0 (Brine) - I pasted the code above into Custom CSS and changed the folder from "free-resources" to "portfolio" for my site's navigation. 

Is there anything else I need to tweak? 

Or is there different CSS for 7.0? 

Or is it not possible in 7.0?  

Thanks! 

On 9/5/2021 at 5:21 AM, kmdesign said:

Leopold / @IXStudio

I am trying to achieve the same in Square Space 7.0 (Brine) - I pasted the code above into Custom CSS and changed the folder from "free-resources" to "portfolio" for my site's navigation. 

Is there anything else I need to tweak? 

Or is there different CSS for 7.0? 

Or is it not possible in 7.0?  

Thanks! 

 

What is your site url?

@tuanphan

The url is katemitchell.design - Brine 7.0 - the above code from IX did not work, but may have been written for 7.1 (?).

I have tried updating the folder name in the css to match my folder name "portfolio" as well as the url slug "uxd-portfolio" and neither have worked. 

Thanks for your help! 

On 9/6/2021 at 8:42 PM, kmdesign said:

@tuanphan

The url is katemitchell.design - Brine 7.0 - the above code from IX did not work, but may have been written for 7.1 (?).

I have tried updating the folder name in the css to match my folder name "portfolio" as well as the url slug "uxd-portfolio" and neither have worked. 

Thanks for your help! 

 

Hi,

Just checked, both site has a different menu code structure, so you can't use above code.

I think you can add all items, same as Main Nav to Secondary Nav (don't create Folder). Then we will use the code to hide the Main Nav, and show the Secondary Nav on Mobile. Then continue using the code to add an arrow to the Portfolio, so that it looks like a Folder Title and push the items below it a few pixels to the right.
Do you understand? How do you see it? I thought I could write a quick guide to doing this.

Hi @tuanphan

Thanks so much for your follow up.

I think that could work, IF, we can add code to HIDE the secondary navigation on desktop, then add code to only show the secondary navigation in the mobile menu.  

Willing to try it if it's not too much work.  Let me know. 

And again Thank You 🙂 

On 9/8/2021 at 9:54 PM, kmdesign said:

Hi @tuanphan

Thanks so much for your follow up.

I think that could work, IF, we can add code to HIDE the secondary navigation on desktop, then add code to only show the secondary navigation in the mobile menu.  

Willing to try it if it's not too much work.  Let me know. 

And again Thank You 🙂 

Hi. You can add some demo items, then I will give the code. If it works, you can add all items then.

Hi, I am looking to do the same, I used Will Myers Mega Menu for desktop so I have a secondary nav. 

How do I remove the secondary nav as there is only one link within them? I have tired the above code but I end up with all the links overlapping. 

Thanks

Website: https://cello-prism-xna7.squarespace.com/

Password: TIL2022

15 hours ago, JessCot said:

Hi, I am looking to do the same, I used Will Myers Mega Menu for desktop so I have a secondary nav. 

How do I remove the secondary nav as there is only one link within them? I have tired the above code but I end up with all the links overlapping. 

Thanks

Website: https://cello-prism-xna7.squarespace.com/

Password: TIL2022

Which items you want to remove on mobile?

5 hours ago, tuanphan said:

Which items you want to remove on mobile?

Can I just show the secondary nav for each one in a list?

When you click on Fashion it opens to Fashion 

16 hours ago, JessCot said:

Can I just show the secondary nav for each one in a list?

When you click on Fashion it opens to Fashion 

Add to Design > Custom CSS

/* nav mobile */
.header-menu-nav-folder:not([data-folder="root"]) {
    display: none;
}
span.chevron.chevron--right {
    display: none;
}

11 hours ago, tuanphan said:

Add to Design > Custom CSS

/* nav mobile */
.header-menu-nav-folder:not([data-folder="root"]) {
    display: none;
}
span.chevron.chevron--right {
    display: none;
}

 

Thanks for replying - unfortunately this hasn't solved it as when you click the primary link it takes you to a blank page.

On 5/10/2022 at 2:58 AM, JessCot said:

Thanks for replying - unfortunately this hasn't solved it as when you click the primary link it takes you to a blank page.

Now you want to disable primary link click or hide both primary link or make primary open new page when clicking it?