Megamenu Dropdown Issues

hillarygbarton

Hi,

I have a few questions about the megamenu dropdown on my website. You can visit the site here, and my login credentials are up to date with the forum.

https://floatingptstg.wpenginepowered.com/

1. I would like the megamenu drop-downs to be z-positioned below the header menu, so in instances (like the screenshot below) where the menu drops to 2 lines, the megamenu doesn't overlap the header and logo. I have set the z-positioning to 2 on the header menu, and 0 on the megamenu dropdown, but the dropdown still show in front of the header menu. Can you help me troubleshoot this?

1. In the same image above, you see that the text on the menus overlap when the site is viewed on a narrower window. The best example is with "Cascara Sagrada Bark." Can I make the menu items wrap to 2 lines, if it doesn't fit within the column?
2. In the "Resources" dropdown, the titles (Resources, Latest Research, and Upcoming Events) are all supposed to be aligned with the top of the menu. I have been unable to find a reason for the gap above "Resources." Can you help me figure this out? This gap happens even when I create a new headline, or copy over one of the headlines that is working properly. The settings on the wrap containing resources are all top aligned.

I really appreciate any help you can provide!

Thanks,

Hillary

Albert

Hi,

1. What you can do is move mega menu down with custom css for specific size screen, like:

@media only screen and (min-width:768px) and (max-width:959px){
  .mfn-menu-item-megamenu {
     top: 160%;
  }
}

1. For that you need to use the following custom css:

.mfn-megamenu-menu a .menu-label {
 white-space: wrap;
}

1. You set an option for this section to align wraps vertically

https://prnt.sc/mas9R58LMQ4E

Learn more: Video Tutorials | How To | FAQ Vote on what comes next

hillarygbarton

Hi,

Thanks for your suggestions. The first and last worked, but the middle one is having a weird effect. As you can see, when the lines wrap, they create odd gaps and 'empty lines' in the menu:

Do you have any advice for how to fix this issue? I have the CSS activated on my site now, so you can see it on any page:

Thanks!

Phil

Try to add this CSS code as well:

.mfn-megamenu-menu > li{
 align-self: start;
}

Best regards

Learn more: Video Tutorials | How To | FAQ Vote on what comes next