CODEWITHSUNDEEP
csswordpresswordpress-theming
Muhammad Muazzam
Muhammad Muazzam

Reputation: 2800

wordpress menu hover div display issue

I have put additional css in customize section of theme:

.toshow {
    display: none;
}
.nav > li > a:hover .toshow {
    display: block;
}

and following divs are in header.php

<div class="toshow">Hello</div>
<div class="toshow">Hi</div>

but div is not being shown when I hover mouse over menus.

Menu:

<div id="et-top-navigation" data-height="106" data-fixed-height="40">
  <nav id="top-menu-nav">
    <ul id="top-menu" class="nav et_disable_top_tier">
      <li id="menu-item-3987" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-home current-menu-item page_item page-item-38 current_page_item menu-item-3987">
        <a href="http://test.elancebank.com/">Home Page</a>
      </li>
      <li id="menu-item-3988" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-3988">
        <a href="http://test.elancebank.com/smartphones/">Smartphones</a>
      </li>
      <li id="menu-item-3989" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-3989">
        <a href="http://test.elancebank.com/laptops/">Laptops/Tablets</a>
      </li>
      <li id="menu-item-3990" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-3990">
        <a href="http://test.elancebank.com/electronics/">Electronics</a>
      </li>
    </ul>
  </nav>
  <div id="et_top_search">
    <span id="et_search_icon"></span>
  </div>

  <div id="et_mobile_nav_menu">
    <div class="mobile_nav closed">
      <span class="select_page">Select Page</span>
      <span class="mobile_menu_bar mobile_menu_bar_toggle"></span>
    </div>
  </div>
</div> <!-- #et-top-navigation -->

Upvotes: 0

Views: 259

Answers (1)

Ahmed Ginani
Ahmed Ginani

Reputation: 6650

I think you should try to use jquery to show and hide your element in the header on hover link.

Please check this:

$(document).ready(function(){
    $(".nav li a").mouseenter(function(){
        $('.toshow').show();
    });
    $(".nav li a").mouseout(function(){
        $('.toshow').hide();
    });
});
.toshow {
    display: none;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>

<div class="nav">
<li><a href="#">Link</a></li>
</div>

<div class="toshow">Hello</div>
<div class="toshow">Hi</div>

This is the standard way to show or hide div outside in other section. I prefer to use jquery for this.

I know you want to try with CSS but you can try in a different way like this also.

Thanks.

Upvotes: 1

Related Questions