Support » Fixing WordPress » Disappearing Sub-Menu’s When Over a Link

  • Resolved Brian

    (@datalink)


    Okay the website is spokanewifi.fallouthosting.com and I am using Google chrome for my browser… The issue is that my website has a top menu which includes some sub-menu’s. When I hover over a menu item with a sub-menu, such as ‘ABOUT SMW’ and move down to an item that overlays the websites logo; the sub-menu disappears such as if you try to hover/click on ‘Privacy Policy’… If the page is long enough and you can scroll down beyond an underlying link, then the sub-menu works fine.

    I know this is probably just a CSS fix; but I am not sure what I need to add to fix it.

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

Viewing 7 replies - 1 through 7 (of 7 total)
  • You need to ask in your theme’s support forum.

    This is not part of the theme… I had added it. I know this is not a WordPress issue either, but figured that someone would know why this site has this issue (where other WP sites with the same kind of added top menu don’t).

    Moderator Steve Stern

    (@sterndata)

    Support Team Volunteer

    .search-and-cart.fadeInRight.wow {
        z-index: 1;
    }

    To add or override CSS: use the “Additional CSS” option in the customizer. https://codex.wordpress.org/CSS#Custom_CSS_in_WordPress

    Learn to use the Chrome Developer Tools to help you see and test changes to your CSS.

    Thank you Steven; but that did not help… All it did was put the cart and search above the “My Account” menu item… I left the CSS there if you want to see the change.

    If you try to select something a item or two down from say “About SMW” you will see what I am referring too in regards to the drop down menu disappearing. The issue occurs when the drop down overlays over something else that is clickable. If you scroll down to somewhere without a link and try to use the drop down, there is no problem…

    =====BELOW IS ALL MY CUSTOM HEADER/MENU STYLING======
    /* Header Script */
    .page-header-block {
    min-height: 100px;
    padding-top: 60px;
    }

    .search-and-cart {
    position: relative;
    z-index: 9999;
    margin-top: -60px;
    margin-bottom: 35px;
    }

    /* Menu Script */
    ul#primary-menu li ul li a {
    width: 230px;
    font-size: 13px;
    text-transform: uppercase;
    letter-spacing: 2px;
    }

    ul#primary-menu > li > ul {
    padding: 0px 15px 0px 15px;
    }

    ul#primary-menu li a {
    margin-right: 30px;
    font-size: 18px;
    font-weight: bold;
    letter-spacing: 2px;
    }

    ul#primary-menu {
    padding-left: 80px;
    float: left;
    }

    search-and-cart.fadeInRight.wow {
    z-index: 1;
    }

    =====BELOW IS MY SCRIPT TO INSERT THE TOP MENU BAR=====
    <div style=”background: #23282d; width: 100%; height: 35px; border-top: 2px solid #ccaa66; position: fixed; z-index: 999;”>
    <div style=”width: 1130px; padding-top: 8px; margin: 0 auto; position: relative;””>

    <div style=”position: relative; float: left; margin-bottom: 0px; border: 2px sollid red;margin-left: 10px; “>
    <nav class=”top-nav top-navigation”>
    <div class=”top-container” style=”width: 950px;”>
    <?php wp_nav_menu( array( ‘theme_location’ => ‘top-menu’, ‘menu_id’ => ‘top-menu’ ) ); ?>
    </div>
    </nav>
    </div>

    <div style=”position: relative; float: right; margin-bottom: 0px; border: 2px sollid yellow; margin-right: 0px; “>
    <nav class=”account-nav account-navigation”>
    <div class=”account-container” style=”width: 130px;”>
    <?php wp_nav_menu( array( ‘theme_location’ => ‘account-menu’, ‘menu_id’ => ‘account-menu’ ) ); ?>
    </div>
    </nav>
    </div>

    </div>
    </div>

    Moderator Steve Stern

    (@sterndata)

    Support Team Volunteer

    You’ll need to play with your z-index settings to make sure the menu (and submenu) classes are z-indexes that are greater than anything that should be beneath them.

    Please use the CODE button on the toolbar to delimit code when pasting into a forum response.

    I have been working with x-index for the past three days trying to find out a fix… I have set the z-index of my “top menu” to 999 and 9999 and it makes no difference.

    Visually, the top menu overlays the title and the cart/search elements; but when you hover over a menu items that overlays over those items, the menu disappears.

    Thanks for the help. I have it figured out… FINALLY!

Viewing 7 replies - 1 through 7 (of 7 total)
  • The topic ‘Disappearing Sub-Menu’s When Over a Link’ is closed to new replies.