Eric_Bronson Posted January 4, 2021 Share Posted January 4, 2021 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--> <script> $(function(){ $('.header-display-desktop [href="/weddings"] + .header-nav-folder-content').append($('#footer-sections section:nth-of-type(2)')) }); </script> <!-- 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{ width:100vw; right:0vw !important; left:0vw !important; transition: opacity .6s linear; a {background-image:none !important;} position:fixed; top:7%; box-sizing:border-box; padding:5px; border-bottom:2px solid #003d0f; box-shadow:0px 3px 3px #003d0f; .header-nav-folder-item{ display:none; } a{ display:inline !important; } .sqs-block-button-element{ 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. HELP!!! Eric Link to comment
tuanphan Posted January 6, 2021 Share Posted January 6, 2021 Hi. Where is mega menu? I just checked & dont see. 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
Eric_Bronson Posted January 8, 2021 Author Share Posted January 8, 2021 https://kale-calliope-86yf.squarespace.com/ pw: 1234 Link to comment
Recommended Posts
Create an account or sign in to comment
You need to be a member in order to leave a comment