Show Secondary Nav in Mobile Menu?

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.