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 post
  • Answers 3
  • Created
  • Last Reply

Top Posters For This Question

Top Posters For This Question

Popular Posts

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

Posted Images

3 answers to this question

Recommended Posts

  • 0

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

You can send your question to my email to get faster answer. / How to Setup Password & Share URL 

-- I'm Tuan, work for a non-profit project (build free libraries). I check the forum once or twice a day to help out the community. If you don't see me answering your question, you can send it to the email above. 

Link to post
  • 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 post

Create an account or sign in to comment

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


×
×
  • Create New...