Jump to content

Drop down menu troubleshooting

Go to solution Solved by tuanphan,

Recommended Posts

Hi there, I'm trying to troubleshoot a dropdown menu that isn't working on the default blog page. I created it as an Archive block to show blog categories on a separate blog landing page (actually an index page), but it isn't playing well with the blog posts once you click on the categories / go to the Squarespace default page. Despite the z-index, which helps the dropdown part overlap on the landing page, the Squarespace blog pages make the rest of the dropdown vanish into the posts.

So since I can't make that work, now I'm trying to make a drop UP menu instead. I'm able to make it drop up with a "bottom" property added, but then the whole clickable part vanishes once it's clicked, leaving the menu hanging with no way to close it. Any idea of how to fix this?

My CSS:

.archive-block-wrapper.archive-block-setting-layout-dropdown {
    width: 80%;
    position: absolute;
    z-index: 1!important;
    bottom: -80%; // this positions the whole menu where I want it and makes it drop up
  }

URL: https://www.youbelongsd.com/blog


  

Hey, I'm Jin (he/him). I'm a front end dev learning to make custom sites in Squarespace.

If you find my suggestions helpful, please upvote & like!😺

 

Link to comment
  • Solution

z-index doesn't work because grandparent element set to overflow: hidden;

Just add CSS code to change it to overflow: visible;

image.thumb.png.9733f7a971d453bacef92a9bc68c31b9.png

 

Email me if you have need any help (free, of course.). Answer within 24 hours. 
Or send to forum message

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

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.