Jump to content

Positioning of mega menu - CSS problems

Recommended Posts

Site URL: https://musgrove.co/

I'm having issues placing my mega menu (JS and CSS) close enough to the navigation link that it closes before I can hover over the page. I have built this by adding an additional section under my main footer, then added the following JS:

<!-- Wedding Tab Megamenu JS-->
   $('.header-display-desktop [href="/weddings"] + .header-nav-folder-content').append($('#footer-sections section:nth-of-type(2)'))
<!-- End Wedding Tab Megamenu JS—>


When I hover over the 'Weddings' navigation link, my page does open and displays correctly. However, when I move my mouse off the link, it disappears too quickly (unless I move really fast which is terrible for UX). I attempted to add a spacer and then move it up, but z-index is not working to have the mega menu appear behind the main menu (since they both have white background, this is OK). I want to have some top-padding anyway but need to have the mega-menu appear longer to they can get to all the other links.


Here is my CSS:

.header-display-desktop [href="/weddings"] + .header-nav-folder-content{
  right:0vw !important;
  left:0vw !important;
  transition: opacity .6s linear;
  a {background-image:none !important;}
  border-bottom:2px solid #003d0f;
  box-shadow:0px 3px 3px #003d0f;
    display:inline !important;
    display:inline-block !important;
    padding: 1em 1.6em !important;    

Is there a way to keep the mega-open just a fraction of a second longer so people can easily move their cursor to the mega-menu? 

(Sorry the website is still in "staging" so it is not active to inspect)

I have been trying to figure this out for three hours and I'm throwing in the towel.





Screen Shot 2021-01-03 at 10.25.08 PM.png

Link to comment
  • Replies 2
  • Views 652
  • Created
  • Last Reply


This topic is now archived and is closed to further replies.

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