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

Hi guys,

I’ve got the mega-menu navigation to be full width by modifying Guenni007’s CSS. Test with the “SERVICES” mega-menu item.
My /dev/ site: https://bclaunchpad.com/dev58/

/* === makes nav full width with addition of BLANK links === */
#top #header .avia_mega_div {
  position: fixed !important;
  width: 100vw !important;
  left: 0vw !important;
  right: 1.5vw !important;
  top: 140px !important;
  background-color: rgba(255,255,255,0.8) !important;
  -webkit-backdrop-filter: blur(5px) !important;
  backdrop-filter: blur(5px) !important;
  border-radius: 0 !important;
  border: 1px solid #ffffff !important;
}

#top #header .avia_mega_div ul {
background-color: transparent !important;
}

/* ================ */

.blank-link > span.mega_menu_title { 
clear: both !important; 
color: transparent !important; 
}

Now, if you could possibly help me make the mega-menu (drop down) items ease-in from the top as in this example, that would be great.
Sample site the client likes: https://qpokc.com/services/offset-printing

Here’s the CSS from the example site, but I’m not sure how to target the nav in the enfold theme drop down mega menus.

@media (min-width: 968px) {
  .l-navigation .dropdown {
    position: absolute;
    visibility: hidden;
    background-color: #01237A;
    width: 100%;
    top: 100%;
    left: 0;
    transition: height 1s ease-in;
    padding: 15px 0 15px 0;
    overflow: hidden;
    z-index: 1000;
    margin-top: -18px;
  }
}
.l-navigation .dropdown ul {
  max-width: 670px;
  margin: 0 auto;
  transition: none;
  position: relative;
  top: -10px;
  display: inline-block;
  text-align: left;
}
@media (min-width: 968px) {
  .l-navigation .dropdown ul {
    opacity: 0;
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    column-gap: 30px;
    row-gap: 5px;
  }
}
.l-navigation .top-link-li:hover .dropdown {
  visibility: visible;
}
@media (min-width: 968px) {
  .l-navigation .top-link-li:hover .dropdown {
    transition: height 0.2s ease-in;
  }
}
@media (min-width: 968px) {
  .l-navigation .top-link-li:hover .dropdown ul {
    transition: all 0.5s ease-in-out;
    opacity: 1;
    top: 0;
  }
}

Thank you in advance!
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

Hi Ismael,

Thanks for the response and notes. I will try these potential fixes later today and let you know how it goes. If these items do not fix the issues (and the third party can’t fix the PHP bug on their end), I will definitely clone the site and let you have a look.

Thank you for the excellent support and for a wonderful theme!

Sincerely,
Shane

Yes, you may close this ticket. Thanks for the excellent support!