Modify mega menu to be full screen width

Hi Ismael,

Thanks for the reply! What you sent is part of the issue, but more importantly, it is getting the drop down mega menu to run FULL WIDTH of the screen and appear seamless with the upper navigation while also easing-in the menu links subtly like the example I sent previously (Quik Print site).

See screen capture in private content…

I’ve already incorporated the clients desired underline when active/hover over the main nav links, but they want our white mega menus to run the full width of the screen, and have all navigation sub-links ease-in/down top-to-bottom on dropdown load just like the Quik Print site. I’m unsure how to integrate this. I tried, but nothing I did would get the width to be full screen and the ease-in/down top-to-bottom effect wouldn’t work.

Any help is appreciated.
Shane

Sure, here you go.

Here is the development site I am working on — Home page only right now (use the Services navigation menu link for comparison):
https://bclaunchpad.com/dev58/

Here is a website with a mega-menu in the style they want to emulate:
https://qpokc.com/industries/associations-and-organizations

Shane

Guenni007,

Thank you so much! I NEVER would’ve gotten there on my own — I can hack together some basic CSS, but I was getting overwhelmed on this one. Following is what I used based on your recommendations to modify the navigation and to give the links the nice “ease-in” effect, in case someone else needs a similar solution.

/* === makes mega-menu drop down nav full width === */

#top #header .avia_mega_div {
 position: fixed !important;
 width: 100vw !important;
 height: 0px;
 left: 0px !important;
 right: 0px !important;
 top: 120px !important;
 background-color: rgba(255,255,255,0.8) !important;
 backdrop-filter: blur(8px);
 border-radius: 0 !important;
 border: 1px solid #ffffff !important;
 opacity: 0 !important;
 display: block !important;
 transition: all 0.7s ease
}

#top #header .menu-item-mega-parent:hover .avia_mega_div {
 height: 220px !important;
 opacity: 1 !important;
 transition: all 0.7s ease !important
}

#top #header .avia_mega_div .menu-item {
 opacity: 0;
 position: relative;
 transform: translateY(-120%);
 transition: transform 0.3s cubic-bezier(.68,-0.55,.27,1.55) 0.3s, opacity 0.3s ease ;
}

#top #header .menu-item-mega-parent:hover .avia_mega_div .menu-item {
 opacity: 1;
 transform: none;
 transition: transform 0.3s cubic-bezier(.68,-0.55,.27,1.55) 0.3s, opacity 0.3s ease ;
}

@media (min-width: 990px) {
#top #header .avia_mega_div > .sub-menu {
padding: 15px 240px 15px 120px !important;
}
}

@media (max-width: 989px) {
#top #header .avia_mega_div > .sub-menu {
padding: 15px 160px 15px 80px !important;
}
}

I really do appreciate the help!!!
Shane