Jump to content
Search In
  • More options...
Find results that contain...
Find results in...
Advanced Search
  • 0

Show Secondary Nav in Mobile Menu?


brandi_sqspace

Question

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?

Screen Shot 2020-08-26 at 4.41.06 PM.png

Link to comment

9 answers to this question

Recommended Posts

  • 0

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

Ninja Kit Extension: Upgrade your Squarespace website without coding.

YouTube Preview    -    FREE DOWNLOAD

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

 

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

Email me if you have need any help (free, of course.). Answer within 24 hours.

How to: Setup password & share url - Insert Custom CSS - Page Header - Upload Custom Font - Upload File - Find Block ID - Contact Customer Care

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

 

Email me if you have need any help (free, of course.). Answer within 24 hours.

How to: Setup password & share url - Insert Custom CSS - Page Header - Upload Custom Font - Upload File - Find Block ID - Contact Customer Care

Link to comment
  • 0

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 🙂 

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

Email me if you have need any help (free, of course.). Answer within 24 hours.

How to: Setup password & share url - Insert Custom CSS - Page Header - Upload Custom Font - Upload File - Find Block ID - Contact Customer Care

Link to comment

Create an account or sign in to comment

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

×
×
  • Create New...