Top Bar Flyout Menu hover overflow truncated

  • Resolved madjoky

    (@madjoky)


    6 years, 4 months ago

    Hey there

    I’m new at making websites and unfamiliar with their coding. I’ve been researching my issue and I think I’ve found the right terminology to describe the issue, but I still couldn’t find a solution online.

    Some Background
    I’m using OceanWP Theme, and have been customizing it. Only minor CSS code snippets have been applied. e.g. nolinkparent. All CSS code snippets were removed and the problem persisted.
    I have plugins. e.g. Elementor, Max Mega Menu – All were disabled and the problem persisted.
    To build the website, I have added multiple Template sections to each page using Elementor.
    If I switch to another theme, the issue is gone, so the problem pertains to the way that I have set up the website or the Theme itself.
    I also added a nolinkparent style element (via right click ‘inspect’)
    “.nolinkparent > a {
    cursor: default !important;
    }”

    The issue
    I have my Main menu set up in the Top Bar, and I am using Flyout menus.
    The submenus are correctly visible when hovering over the Parent Title, and the cursor correctly does not display a link (the hand) and remains a pointer.
    When hovering over the submenu Titles, the cursor correctly displays a link (the hand) but only does so while the hover is within the Top Bar container. once the mouse hover falls below the border of the Top Bar, the cursor reverts to a pointer and the submenu closes.
    So in other words, the hover action is being truncated by the website content. There is no visibility issue, but a cursor issue.

    How can this be fixed so the hover persists beyond the bounds of the Top Bar container?

    Thanks for your help

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

Viewing 5 replies - 1 through 5 (of 5 total)
  • Theme Author oceanwp

    (@oceanwp)

    Hello, unfortunately, I cannot provide support for external plugins, you will need to contact the plugin author.
    But two things.

    1. Keep in mind that everytime you add a plugin on your website, your site will become a little slower as the plugin will add scripts in the front end.

    2. If your menu that I see right now is the menu you want on your website, you absolutely don’t need any extra plugin, you can do it easily with OceanWP. This way you can be sure that everything will work as it should.

    Thread Starter madjoky

    (@madjoky)

    Hello

    I appreciate you taking the time to respond to questions and to help people, but you have not helped in this instance.

    As mentioned, all plugins had been deactivated and the problem persisted.

    I have deactivated them (again) and will leave it that way so that you may (hopefully) revisit the site and note that the menus (although they appear hidden due to the font being black) do not work – As I detailed in my original post.

    There is a z-index issue of some kind, but not with visibility, just cursor functionality.

    (Also of note is that I installed the Menu plugin in the first instance in order to to try and get the menus to work. They did not)

    Thanks

    Theme Author oceanwp

    (@oceanwp)

    Ah okay, now I understand why you tried the megamenu plugin.
    Ok, try this css code in the custom css section of the customizer:

    #top-bar-wrap {
    z-index: 99999;
}
    Thread Starter madjoky

    (@madjoky)

    Yes, that did it, thanks very much.

    I just didn’t know what ‘#’element to code or where to put it.
    I spent a long time trying to find it myself, but no luck!

    Thanks again.

    Theme Author oceanwp

    (@oceanwp)

    You just need to add the code in the custom css section of the customizer.

Viewing 5 replies - 1 through 5 (of 5 total)
  • The topic ‘Top Bar Flyout Menu hover overflow truncated’ is closed to new replies.