Convert HTML menu to Wordpress

Question

For the first time I am working on converting an HTML template to Wordpress. I’m having some difficulties and the one that’s bothering me the most is this: I have an HTML menu and would like to convert it to Wordpress while maintaining the dropdown, etc..

The code is in HTML, IE, the pages are not those, the pages should be pulled from Wordpress itself defined by the menu option panel:

<div class="row">

    <div class="col-lg-4 col-md-4 col-sm-12">
        <div class="pm-header-logo-container">
            <a href="index.html"><img src="img/energy-fitness.png" class="img-responsive pm-header-logo" alt="Energy Fitness Studio"></a> 
        </div>
        <div class="pm-header-mobile-btn-container"></div>
    </div>

    <nav class="navbar-collapse collapse" id="pm-main-navigation">
        <ul class="sf-menu pm-nav">
            <li><a href="about-us.html">About us</a></li>
            <li>
                <a href="programs.html">Programs</a>
                <ul>
                    <li><a href="programs.html">Sport Specific</a></li>
                    <li><a href="programs.html">Nutritional Guidance</a></li>
                    <li><a href="programs.html">Personal training</a></li>
                    <li><a href="programs.html">Cardio training</a></li>
                    <li><a href="programs.html">Endurance training</a></li>
                </ul>
            </li>
            <li>
                <a href="classes.html">Classes</a>
                <ul>
                    <li>
                        <a href="classes.html">Kick-boxing</a>
                    </li>
                    <li><a href="classes.html">Yoga</a></li>
                    <li><a href="classes.html">Pilates</a></li>
                    <li><a href="classes.html">Zumba</a></li>
                    <li><a href="classes.html">Spin Master</a></li>
                </ul>
            </li>
            <li><a href="schedules.html">Schedules</a></li>
            <li><a href="gallery.html">Gallery</a></li>
            <li><a href="store.html">Store</a></li>
            <li>
                <a href="news.html">News</a>
                <ul>
                    <li><a href="news.html">Blog Page</a></li>
                    <li><a href="news-post.html">Single Post</a></li>
                    <li>
                        <a href="news-post.html">Categories</a>
                        <ul>
                            <li><a href="news-post.html">Fitness</a></li>
                            <li><a href="news-post.html">Health</a></li>
                            <li><a href="news-post.html">Cardio</a></li>
                            <li><a href="news-post.html">Routines</a></li>
                        </ul>
                    </li>

                </ul>
            </li>
            <li><a href="events.html">Events</a></li>
            <li><a href="contact.html">Contact</a></li>
        </ul>
    </nav>

I’ve tried a lot, but I can’t do it at all! The menu is already registered in functions.php and is called menu-principal. How this menu would look in Wordpress?

Answer 1

This menu should already appear in the Control Panel under Appearance -> Menus. You need now to create the menu items and add it wherever you want in the theme using the function wp_nav_menu($args)

In the example you gave the function would be:

<?php 
$args = array(
           'menu' => 'Menu Topo',
           'container' => 'nav',
           'container_class' => 'navbar-collapse collapse',
           'container_id'    => 'pm-main-navigation',
           'menu_class'      => 'sf-menu pm-nav'
         );
// para lista completa de $args http://codex.wordpress.org/Function_Reference/wp_nav_menu
?>
<div class="row">

<div class="col-lg-4 col-md-4 col-sm-12">
    <div class="pm-header-logo-container">
        <a href="<?php get_home_url(); ?>">//supondo que index.html é a home
         <img src="img/energy-fitness.png" class="img-responsive pm-header-logo" alt="Energy Fitness Studio">
        </a> 
    </div>
    <div class="pm-header-mobile-btn-container"></div>
</div>
<?php wp_nav_menu($args); ?>