2

This is my html code

<div class="section__main-nav" id="section__main-nav-id">
            <div class="container">
                <nav class="navbar navbar-toggleable-md navbar-light">
                    <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#main-navbarToggler" aria-controls="main-navbarToggler" aria-expanded="false" aria-label="Toggle navigation">
                        <span class="navbar-toggler-icon"></span>
                    </button>
                    <div class="collapse navbar-collapse" id="main-navbarToggler">
                        <ul class="nav navbar-nav">
                            <li class="nav-item active">
                                <a class="nav-link" href="index.html">Home<span class="sr-only">(current)</span></a>
                            </li>
                            <li class="nav-item dropdown">    
                                <a href="shop.html" class="nav-link dropdown-toggle dropdown-hover" data-toggle="dropdown">Shop</a>
                                <div class="dropdown-menu">
                                    <a class="dropdown-item" href="#">Hoddie</a>
                                    <a class="dropdown-item" href="#">Long Sleeve Tees</a>
                                    <a class="dropdown-item" href="#">Short Sleeve Tees</a>
                                    <a class="dropdown-item" href="#">Tank Top</a>
                                    <a class="dropdown-item" href="#">Jumper</a>
                                    <div class="dropdown-divider"></div>
                                    <a class="dropdown-item color-primary" href="shop.html">See All</a>
                                </div>
                            </li>
                            <li class="nav-item">
                                <a class="nav-link" href="about.html">About Us</a>
                            </li>
                            <li class="nav-item">
                                <a class="nav-link" href="contact.html">Contact Us</a>
                            </li>
                        </ul>
                    </div>
                </nav>
            </div>
        </div>

and I have converted it to my wordpress

<div class="section__main-nav" id="section__main-nav-id">
            <div class="container">
                <nav class="navbar navbar-toggleable-md navbar-light">
                    <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#main-navbarToggler" aria-controls="main-navbarToggler" aria-expanded="false" aria-label="Toggle navigation">
                        <span class="navbar-toggler-icon"></span>
                    </button>
                    <?php 

                        wp_nav_menu( array(
                            'theme_location'    => 'primary',
                            'container'         => 'div',
                            'container_class'   => 'collapse navbar-collapse',
                            'container_id'      => 'main-navbarToggler',
                            'menu_class'        => 'nav navbar-nav'
                        ) );

                     ?>
                </nav>
            </div>
        </div>

how can I give the class of the dropdowns in the wordpress code

0

You can use Walker_Nav_Menu (WordPress Default class).

Here is an example -

In header.php file -

<nav id="header-menu">
<?php
  wp_nav_menu( array(
    'theme_location' => 'primary',
    'walker'  => new Child_Wrap()   
   ) );
?>
</nav>

In my functions.php file -

class Child_Wrap extends Walker_Nav_Menu
{
    function start_lvl(&$output, $depth = 0, $args = array())
    {
        $indent = str_repeat("\t", $depth);
        $output .= "\n<div class='sub-menu-holder'>$indent<ul class=\"drop-down\">\n";
    }

    function end_lvl(&$output, $depth = 0, $args = array())
    {
        $indent = str_repeat("\t", $depth);
        $output .= "$indent</ul></div>\n";
    }
}

Above is an example of my code you can change as per your requirement. Thanks.

Your Answer

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

Not the answer you're looking for? Browse other questions tagged or ask your own question.