Custom Mega Menu issues

Hello

I need to add custom Mega Menu with Responsive in squarespace 7.1

Like this type of Mega Menu add or create in Squarespace 7.1 version 

I'll try to use 

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
<script>
$(function(){
   $('.header-display-desktop [href="/MEGAMENUURL"] + .header-nav-folder-content').append($('#footer-sections section:nth-of-type(1)'))
});
</script>

this type of code and

.header-display-desktop [href="/MEGAMENUURL"] + .header-nav-folder-content {

   width:100vw;
   right:0 !important;
   left: 0 !important;
   position:fixed;
   box-sizing:border-box;
   padding:0px !important;
}
.header-display-desktop [href="/MEGAMENUURL"] + .header-nav-folder-content .header-nav-folder-item {
   display:none;
}
body.sqs-is-page-editing .header-display-desktop [href="/MEGAMENUURL"] + .header-nav-folder-content {
   display:none;
}

 this is a CSS 

Notice :: No one can Suggest Any plugin code or purchase code need only Custom HTML , CSS & JAVASCRIPT

 I can use already Dropdown but it's not Work in Small Devices or Mobile Devices 

Thank You

Is this the code you're trying to use?

https://www.sparkplugin.com/blog/add-a-mega-menu-in-squarespace

Alternatively try this:

https://www.will-myers.com/articles/building-a-mega-menu-in-squarespace-71-free