Why dropdown menu is not working in WordPress?

Question

I have set 4 sub-menu under My Account menu. Here is the image:

but on the front-end, I can't see the submenu when I hover over my account page.

I am using the following code to show the full menu:

<?php       
if(is_user_logged_in()){
    $theme_location  = 'after_login_menu';
} else {
    $theme_location = 'header_menu';
}
$args = array(
    'container'       => 'div',
    'container_class' => 'navbar-collapse collapse',
    'container_id'    => 'th_navbar_toggle',
    'menu_class'      => 'navbar-nav ml-auto',
    'menu_id'         => '',
    'echo'            => true,
    'before'          => '',
    'after'           => '',
    'link_before'     => '',
    'link_after'      => '',
    'items_wrap'      => '<ul id="%1$s" class="%2$s">%3$s</ul>',
    'item_spacing'    => 'preserve',                                
    'walker'          => new wp_bootstrap_navwalker(),
    'theme_location'  => $theme_location,
    'menu'            => $theme_location,                                
    'depth'           => 5,
);
wp_nav_menu($args);
?>

Is there anything I am missing?

Ravi Kumar · Accepted Answer · 2019-10-14 07:47:47Z

2

It looks like all the "Sub menus" of My account is in

<ul class="dropdown-menu">

and hidde from CSS

Can you add

ul.dropdown-menu { display: block !important; }

and check all the submenus of My account will display or not.

If yes then you can

ul.dropdown-menu

display this on hover

Let me know if it works

answered Oct 14, 2019 at 7:47

Ravi Kumar

4433 silver badges10 bronze badges

Sign up to request clarification or add additional context in comments.

3 Comments

Shibbir Over a year ago

but you know that it's core bootstrap class. why it behaves like that?

Ravi Kumar Over a year ago

Not sure but it needs to display block on hover of menu using parent theme css classes

Shibbir Over a year ago

well, it's working but not expected according to my actual HMTL theme menu hover.

Adal S khan · Accepted Answer · 2019-10-14 07:57:09Z

2

I have checked it. Please check --> http://prntscr.com/pixrgl displayed none is added on it.

Add class add this css and check it.

check the class name id of ul (ul#menu-main-menu, ul.dropdown-menu)

ul#menu-main-menu li:hover ul.dropdown-menu {
    display: block;
    position: absolute;
    top: 100%;
    left: 0;
    float: left;
    min-width: 160px;
    padding: 5px 0;
    margin: 0px 0 0;
    font-size: 14px;
    text-align: left;
    list-style: none;
    background-color: #fff;
    background-clip: padding-box;
    border: 1px solid #ccc;
    border: 1px solid rgba(0,0,0,.15);
    border-radius: 4px;
    -webkit-box-shadow: 0 6px 12px rgba(0,0,0,.175);
    box-shadow: 0 6px 12px rgba(0,0,0,.175);
}
ul.dropdown-menu {
    display: none;
}
ul.dropdown-menu>li>a {
    display: block;
    padding: 3px 20px;
    clear: both;
    font-weight: 400;
    line-height: 1.42857143;
    color: #333;
    white-space: nowrap;
}

edited Oct 14, 2019 at 7:57

answered Oct 14, 2019 at 7:28

Adal S khan

3531 silver badge8 bronze badges

2 Comments

Shibbir Over a year ago

let me check it.

Shibbir Over a year ago

I see that class is using display none but it's core bootstrap class. prnt.sc/piy1iq

Collectives™ on Stack Overflow

Why dropdown menu is not working in WordPress?

2 Answers 2

3 Comments

2 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

3 Comments

2 Comments

Your Answer

Sign up or log in

Post as a guest

Related