Okay
  Public Ticket #1604527
Highlighting Sticky Flyout Menu
Closed

Comments

  •  2
    Becca started the conversation

    Hi, I would like to highlight on hover the menu items on the sticky menu - flyout as in the Polytechnic theme under the "Theme Overview" main page. 

    The only difference on my site is the hover color would be #0dc4d2. Would you please tell me how to do this?

  •  115
    Charles replied

    Hi Becca,

    Thanks for the question. I don't have a working reference to your site to know how far you have gotten, but I have some screenshots to provide some context on what needs to be done. 

    1. First, you need to build the menu using the native WP menu. The key item is to set your flyout menu items as children of the parent, which is displayed in the main navigation, and when hovered, reveals the children/flyout menu items.
    2. Next, ensure this primary menu is set in the Primary Menu location.
    3. Set the Secondary Color for the theme.
    4. And, since the main nav in the demo leverages both flyout menu items and the mega menu items, I suggest turning installing the Max Mega Menu plugin (if it's not already) and "Enable" this for the Primary Menu.

    Let me know if that helps, and if you are still having issues, please let me know by providing some additional information to help illustrate how I can help. 

    Kind Regards,
    Charles

    Attached files:  screenshot-polytechnic.themeisland.net-2018-06-11-19-51-55.png
      screenshot-polytechnic.themeisland.net-2018-06-11-19-46-26.png
      screenshot-polytechnic.themeisland.net-2018-06-11-19-42-24(1).png

  •  2
    Becca replied

    Hi Charles,

    Thank-you for your reply back. I have the items you described set up already. When I enable the Max Mega Menu for the (Sticky Menu) it throws the menu completely off, but it does highlight on hover as I would like. I'm having the same problem with the Mega Menu on the (Primary Menu), which is not highlighting any of the links on hover (#0dc4d2) either.  

    I was having a problem with my page menus, contacted Max Mega Menu, and they wrote CSS for both the Primary menu and Page Menus listed under Mega Mega Themes --->Custom Styling. I am providing you screen shots for these. The code did fix the problem with the page menus, but everything I have tried to get the other two menu's working properly has failed; this includes going to customize and setting the hover color there.

    Attached files:  Page Menu Custom Styling.JPG
      Primary Menu Custom Styling.JPG

  •   Becca replied privately
  •   Charles replied privately
  •  2
    Becca replied

    Hi Charles,

    I already have the menu's set up. The issue is the (sticky menu) and the (primary mega menu) are not highlighting on hover. Please see screenshots.

    Attached files:  Primary Mega Menu.jpg
      Sticky Menu.jpg

  •  2
    Becca replied

    So you can see these are set up.

    Attached files:  Manage Locations.jpg
      Theme Options.jpg

  •  115
    Charles replied

    Hi Becca,

    Thanks for the information. I've worked through several items, but there seems to be an issue with some styling on you site that I cannot seem to replicate on the demo or on my test install. I've also tested this with the Pro version of the Max Mega Menu plugin to rule that out, and a new stock menu theme. My guess is that there are some 3rd party plugins or customizations that might be contributing to this on your end. For now, I have some clarity and workarounds for you.

    01 - Screenshot of the Primary Mega Menu.jpg that you provided - These items inside of the Mega Menu Panel do not change color when hovered, and this is how it is on the demo. That said, you could add something like this to fit you requirement to Appearance > Theme Options > Custom CSS: 

    #page #section-navigation .mega-menu-item .mega-sub-menu li a:hover {
        color: #50d2e0 !important;
        transition: .3s;
    }
    

    02 - Screenshot of the Sticky Menu.jpg that you provided - The Mega Menu for this is not enabled, and therefore does not include the same classes in the markup which link to the styles implemented by the theme. When I enable this, the menu styling breaks (sub ul lis are not hidden). With that, though, there is an easy fix - leave the sticky menu as is, and add this style to Appearance > Theme Options > Custom CSS: 

    #page #section-sticky-header .sub-menu li.menu-item:hover {
        background-color: #50d2e0 !important;
    }
    #page #section-sticky-header .sub-menu li.menu-item:hover a {
        color: #fff !important;
    }

    To diagnose this further, you would need to run through the Standard Troubleshooting Steps to isolate possible influences.

    Let me know where that leaves you. 

    Kind Regards,
    Charles

  •   Becca replied privately