Need help with adding custom wordpress menu and sub-menu

Question

I've got my HTML Custom Nav set up and it works fine for static template. I want to convert it into wordpress navigation menu. I am totally new to wordpress and i want help to convert html menu to wordpress.

Here is the HTML code :

<div id="cs-header-menu">
                <div class="cs-container">
                    <!-- Main navigation -->
                    <div class="cs-toggle-main-navigation"><i class="fa fa-bars"></i></div>
                    <nav id="cs-main-navigation" class="cs-clearfix">
                        <ul class="cs-main-navigation cs-clearfix">
                            <li class="current-menu-item"><a href="#"><span>Homepages</span></a>
                                <ul class="sub-menu">
                                    <li><a href="index-1.html">Homepage 1</a></li>
                                    <li><a href="index-2.html">Homepage 2</a></li>
                                    <li><a href="index-3.html">Homepage 3</a></li>
                                    <li><a href="index-4.html">Homepage 4</a></li>
                                </ul>
                            </li>
                            <li><a href="blog_layout_1.html">Lifestyle</a></li>
                            <li><a href="blog_layout_1.html">Beauty</a></li>
                            <li><a href="blog_layout_1.html">Travel</a></li>
                        </ul>
                    </nav>
                    <!-- Search icon show -->
                    <div id="cs-header-menu-search-button-show"><i class="fa fa-search"></i></div>
                    <!-- Search icon -->
                    <div id="cs-header-menu-search-form">
                        <div id="cs-header-menu-search-button-hide"><i class="fa fa-close"></i></div>
                        <form>
                            <input type="text" placeholder="Type and press enter...">
                        </form>
                    </div>
                </div>
            </div>
        </div>

I don't know how to use class and ids for div, nav, ul and li, and also for sub-menu items. Would anyone please help me with this. Thanks in advance.

Answer 1

Use this code bellow to dynamic you nav:

                        <?php
                            $args = array(
                            'theme_location'    => '',
                            'menu'              => 'Main',
                            'container'         => 'false',
                            'container_class'   => '',
                            'container_id'      => '',
                            'menu_class'        => 'cs-main-navigation cs-clearfix',
                            'menu_id'           => '',
                            'echo'              => true,
                            'fallback_cb'       => 'wp_page_menu',
                            'before'            => '',
                            'after'             => '',
                            'link_before'       => '',
                            'link_after'        => '',
                            'items_wrap'        => '<ul id="%1$s" class="%2$s">%3$s</ul>',
                            'depth'             => 0,
                            //'walker'            => new my_custom_walker_nav_menu()
                            );

                        wp_nav_menu ($args);
                                  ?>
                    </nav>
                    <!-- Search icon show -->
                    <div id="cs-header-menu-search-button-show"><i class="fa fa-search"></i></div>
                    <!-- Search icon -->
                    <div id="cs-header-menu-search-form">
                        <div id="cs-header-menu-search-button-hide"><i class="fa fa-close"></i></div>
                        <form>
                            <input type="text" placeholder="Type and press enter...">
                        </form>
                    </div>
                </div>
            </div>
        </div>

For more details please see This ..... Hope it will solve your problem

Answer 2

<div id="cs-header-menu">
    <div class="cs-container">
        <!-- Main navigation -->
        <div class="cs-toggle-main-navigation"><i class="fa fa-bars"></i></div>
            <nav id="cs-main-navigation" class="cs-clearfix">
                    <?php
                        wp_nav_menu( array(
                            'theme_location' => 'primary',
                            'container'     => '',
                            'menu_class'     => 'cs-main-navigation cs-clearfix"',
                         ) );
                    ?>
            </nav>
            <!-- Search icon show -->
            <div id="cs-header-menu-search-button-show"><i class="fa fa-search"></i></div>
            <!-- Search icon -->
            <div id="cs-header-menu-search-form">
                <div id="cs-header-menu-search-button-hide"><i class="fa fa-close"></i></div>
                <form>
                    <input type="text" placeholder="Type and press enter...">
                </form>
            </div>
        </div>
    </div>
</div>

in wordpress we have a wp_nav_menu function that can get the navigation menu. For this you have to do register the menu i.e. register_nav_menus. The above code fetch the primary navigation you have registered like below on the function.php file.

// This theme uses wp_nav_menu() in two locations.
register_nav_menus( array(
    'primary' => __( 'Primary Menu', 'twentysixteen' ),
) );

You can add/remove/arrange/ the menu page on the Apperance->Menus and assign that to the Primary Menu. Hope that helps!!