Support » Plugin: Max Mega Menu » Max Mega Menu entire menu invisible until hover or click

  • Resolved mattsson

    (@mattsson)


    Hello, I created a new max mega menu and have set it to display on a sidebar. To see it on the page indicated above, hover in the sidebar below the map, down to just below the gray SEARCH OTHER CITIES. The root menu item appears on hover. I want it to appear right after the page loads. If you click on that root menu item, then it stays visible. Then the visitor can hover and choose the city (link) she wants. That’s the look I want, see attached screenshot.

    The WordPress theme used is a modification of the TwentyThirteen theme. The theme has a LOT of plugins, plenty of !important CSS rules. So I suspect “residual-styling.” However the documentation I’ve found on troubleshooting problems like mine focus on troubles getting the submenu to appear, or problems in mobile view.

    I’ve checked and experimented with the max mega menu settings in general and the max mega menu settings for the menu item. The max mega menu theme settings are the same as for the main (top) menu. Using the same theme as the main (top) menu makes no difference. That is, the website’s main (top) menu is also a max mega menu and the top level menu items display right away as one would expect.

    I also looked at the CSS, set the item’s display to “block,” that had no effect. I found your instructions to remove residual styling in header.php, here:
    https://www.megamenu.com/documentation/removing-residual-styling/
    tried that but it made no difference.

    I also thought to add JavaScript/jQuery to simulate a click on the item as described here:
    https://www.megamenu.com/documentation/javascript-api/: using Insert Headers and Footers, but it also made no difference (but I’m not confident of my skills in this area):
    <script>
    jQuery(function($) {
    $(‘a.open-a-panel’).on(‘click’, function(e) {
    e.preventDefault();
    var panelToShow = $(“#mega-menu-item-4458 > a.mega-menu-link”);
    //$(‘#mega-menu-top-navigation’).data(‘maxmegamenu’).showPanel(panelToShow);
    $(‘#mega-menu-max_mega_menu_1’).data(‘maxmegamenu’).showPanel(panelToShow);
    });
    });
    </script>

    So at this point I’m out of ideas. Got any suggestions?

    For what it’s worth, first I tried putting this menu into a Navigation Menu widget and it appeared, fully open, as a bullet list. Then I remembered the client wanted a drop down menu, rightly using the drop down menu style already established at the website using the Max Mega Menu. I’m pleased to find all the good documentation accompanying Max Mega Menu.

    The page I need help with: [log in to see the link]

Viewing 3 replies - 1 through 3 (of 3 total)
  • I meant, the WEBSITE has a LOT of plugins.

    Plugin Author megamenu

    (@megamenu)

    Hi Matt,

    Thanks for posting a link.

    Do you simply need to set the Font Color for the top level menu items in the theme editor? At the moment you have a white font on a white background. You either need to change the font to purple, or the menu background to purple, so that the text becomes visible.

    Hello megamenu,

    YES that was exactly the problem. The main manu has color behind it, so the transparent background was fine for the main menu.

    I added a CSS override to exactly match and select the transparent background for my menu, and it WORKED!

    #mega-menu-wrap-max_mega_menu_1 #mega-menu-max_mega_menu_1 > li.mega-menu-item > a.mega-menu-link {
    	background: #4b4b6b;
    }

    Thank you SO much!

    It looks like I could make the same change in Max Mega Menu Admin: Menu Themes > (choose name of theme I’m using for the new search menu) > Menu Bar tab > Menu Background.

    You may mark this issue as resolved. Thanks again!
    –Carol

Viewing 3 replies - 1 through 3 (of 3 total)
  • The topic ‘Max Mega Menu entire menu invisible until hover or click’ is closed to new replies.