0

Looking for your expertise, as I'm fairly new using WordPress and I'm in the process of migrating bootstrap theme into it.

Problem: I have a navigation menu in the header and want to have a dropdown menu in one of the buttons (Clients). Currently when I add a page called "Travel Insurance" it as a "Sub item" via Appearances -> Menu it pushes the "Clients" menu to the top and "Travel Insurance Waiver" shows up underneath not as a dropdown of Clients.

https://i.stack.imgur.com/Hwx5R.png https://i.stack.imgur.com/NSRaL.png https://i.stack.imgur.com/hJpeR.png

Code using dev tools

    <header class="site-navbar site-navbar-target" role="banner">

        <div class="container">
          <div class="row align-items-center position-relative">

            <div class="col-3 ">
              <div class="site-logo">
                <a href="index.html" class="font-weight-bold">
                  <img src= "" alt="Image" class="img-fluid">
                </a>
              </div>
            </div>

            <div class="col-9  text-right">

              <span class="d-inline-block d-lg-none"><a href="#" class="text-white site-menu-toggle js-menu-toggle py-5 text-white"><span class="icon-menu h3 text-white"></span></a></span>

              <nav class="site-navigation text-right ml-auto d-none d-lg-block" role="navigation">

                   <ul id="menu-main-menu" class="site-menu main-menu js-clone-nav ml-auto"><li id="menu-item-285" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-home menu-item-285"><a href="http://box5463.temp.domains/~daydreo9/">HOME</a></li>
<li id="menu-item-116" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-116"><a href="http://box5463.temp.domains/~daydreo9/about/">ABOUT</a></li>
<li id="menu-item-193" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-193"><a href="http://box5463.temp.domains/~daydreo9/escapes/">ESCAPES</a></li>
<li id="menu-item-237" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-237"><a href="http://box5463.temp.domains/~daydreo9/request-a-quote-2/">REQUEST A QUOTE</a></li>
<li id="menu-item-231" class="menu-item menu-item-type-post_type menu-item-object-page current-menu-item page_item page-item-229 current_page_item menu-item-has-children menu-item-231"><a href="http://box5463.temp.domains/~daydreo9/request-a-quote/" aria-current="page">CLIENTS</a>
<ul class="sub-menu">
    <li id="menu-item-377" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-377"><a href="http://box5463.temp.domains/~daydreo9/travel-insurance-waiver/">Travel Insurance Waiver</a></li>
</ul>
</li>
</ul>


              </nav>
            </div>


          </div>
        </div>

      </header>

Functions.php File

 add_theme_support('menus');

 register_nav_menus(
     array(

         'top-menu' => __('Top Menu','theme'),
     )
);

Header.php File

                    wp_nav_menu(

                        array(
                            'theme_location'=> 'top-menu',
                            'menu' => 'home-section',
                            'container'=> 'ul',
                             'menu_class' => 'site-menu main-menu js-clone-nav ml-auto',

                            )
                        );?>```



3
  • Your issue is in the CSS (and maybe the Javascript) for the site not in the code you've posted. Depending on the theme there's CSS/Javascript that's controlling when to hide sub-menus, when to display theme, how to position them, etc. Mar 15 '20 at 15:41
  • Thank you for your comment. I think it may be CSS, but im not sure how to fix it. Added screenshots on how ul class=submenu is getting the style. any ideas?
    – devmike
    Mar 15 '20 at 17:36
  • It doesn't look as though it's getting any style rules specific to it or the would result in it becoming a proper dropdown. The bootstrap 'show/hide' on hover is probably targeting different classes than WordPress outputs. The two ways to address this are a) edit the CSS to include the WordPress classes or b) add the bootstrap class to sub-menu items. What you basically need to do is look at the HTML and CSS in a site where that bootstrap works and compare it to the HTML that WordPress outputs. Mar 15 '20 at 18:03

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Browse other questions tagged or ask your own question.