Support » Developing with WordPress » Add dropdown menu to WordPress

  • Hi,

    I customize an html template to wordpress theme.
    I need help to make a dropdown menu.
    Here is my html code with an sub-menu’s example :

    <nav>
                                <ul class="header-bottom-list d-flex">
                                    <li class="active"><a class="drop-icon" href="#">Home</a>
                                        <!-- Home Version Dropdown Start -->
                                        <ul class="ht-dropdown">
                                            <li><a href="#">Home Version 1</a></li>
                                            <li><a href="#">Home Version 2</a></li>
                                        </ul>
                                        <!-- Home Version Dropdown End -->
                                    </li>
    </ul>

    Here is how WordPress makes my code :

    <nav class="menu-menu-principal-container"><ul id="menu-menu-principal-1" class="header-bottom-list d-flex"><li class="menu-item menu-item-type-post_type menu-item-object-page menu-item-home current-menu-item page_item page-item-6 current_page_item menu-item-has-children menu-item-30"><a href="http://localhost/ap3e/">Home</a>
    <ul class="sub-menu">
    	<li class="menu-item menu-item-type-post_type menu-item-object-page menu-item-25"><a href="http://localhost/ap3e/contact/">Home version 1</a></li>
    </ul>
    </li>
    <li class="menu-item menu-item-type-post_type menu-item-object-page menu-item-29"><a href="http://localhost/ap3e/la-boutique/">Shop</a></li>
    <li class="menu-item menu-item-type-post_type menu-item-object-page menu-item-26"><a href="http://localhost/ap3e/actualites/">News</a></li>
    </ul></nav>

    How can i modify CSS for fixing this dropdown menu ?
    Thanks.

Viewing 2 replies - 1 through 2 (of 2 total)
  • Sorry,
    Here is my header-php code for my menu :

    <nav>
                                           <?php
                                            wp_nav_menu(
                                                array(
                                                    'theme_location' => 'menu-1',
                                                    'depth' => 2,
                                                    'container' 	 => 'nav',
                                                    'container_class' => 	''
                                                )
                                            );
                                            ?>
                               </nav>
    Moderator bcworkz

    (@bcworkz)

    You cannot get a true dropdown with a ul/li structure, a true dropdown uses select/option structures. Many responsive themes generate an ersatz dropdown from ul/li structures. AFAIK, some scripting is also required. I don’t think a pure CSS solution is possible. I’ve been wrong before though.

    You can look at one of the default twenty* themes for examples of making ersatz dropdowns for ul/li menu structures. Use your browser’s CSS inspector to see what CSS is used when in mobile emulation mode. Also look at any JS script the theme loads, I’m pretty sure there is menu related script as well.

Viewing 2 replies - 1 through 2 (of 2 total)
  • You must be logged in to reply to this topic.