Jump to content

Drop Down Menu Options not Showing on Mobile

Recommended Posts

Hi! I have a custom mega navigation menu for my website. On desktop the drop down options work - I hover over the main menu buttons and the drop down options appear. However, on mobile the drop down options do not appear. Instead, only a 'back' option is shown. Screenshots are attached. 

How do I fix this?

Thanks!

Screen Shot 2022-07-25 at 2.55.49 PM.png

menu.PNG

menu2.PNG

Link to comment
  • Replies 4
  • Views 558
  • Created
  • Last Reply

Top Posters In This Topic

Top Posters In This Topic

Posted Images

@derricksrandomviews Here is the code: 

// Fading Folder Nav //

.header .header-nav .header-nav-item--folder .header-nav-folder-content {
  transition: ease-in-out 0.5s;
}


// Remove Active Nav Line //

.header-nav-item--active a {
    background-image: none !important;
}

//Meganav Format: Folder "The Journal"//
.header-display-desktop [href="/the-journal"] + .header-nav-folder-content{
   width:100vw;
   right:0 !important;
   left: 0 !important;
   position:fixed;
   box-sizing:border-box;
   padding-top:0px !important;
}

@media only screen and (max-width: 767px) {
  .header-journal-nav-folder[data-folder="root"] {
    display: none !important;
  }
  .header-journal-nav-folder-content .header-menu-controls {
    display: none;
  }
  .header-journal-nav-folder:not([data-folder="root"]) {
    transform: unset;
    transition: unset;
  }
}

//Meganav Format: Folder "The List''//
.header-display-desktop [href="/the-list"] + .header-nav-folder-content{
   width:100vw;
   right:0 !important;
   left: 0 !important;
   position:fixed;
   box-sizing:border-box;
   padding:0px !important;
}

//Meganav Format" "The Shop"//
.header-display-desktop [href="/the-shop"] + .header-nav-folder-content{
   width:100vw;
   right:0 !important;
   left: 0 !important;
   position:fixed;
   box-sizing:border-box;
   padding:0px !important;
}

// Header Nav Width Adjustment
.header-layout-branding-center-nav-center .header-title-nav-wrapper {
  flex: 2 0 100%;
}
.header-layout-branding-center-nav-center .header-actions--right {
  position: relative;
  right: 4vw;
}

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

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.