将静态导航栏转换为WordPress标题

Question

我正在学习构建wordpress主题。我创建了一个静态html网站。现在我正在尝试将其转换为wordpress主题。首先，我需要将静态导航栏转换为动态导航栏。以下是我的header.php代码：

    <!-- NAVIGATION -->

    <nav class="navbar navbar-fixed-top navbar-inverse">

        <div class="container">

            <div class="row">

                <div class="col-sm-8">

                    <div class="navbar-header">

                        <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#navbar-collapse">

                            <span class="sr-only">Toggle  navigation</span>
                            <span class="icon-bar"></span>
                            <span class="icon-bar"></span>
                            <span class="icon-bar"></span>
                        </button>

                    </div>
                    <!-- navbar-header -->


            <?php

            wp_nav_menu( array(

                'theme_location' => 'primary',
                'container' => 'nav',
                'container_class' => 'collapse navbar-collapse navigation',
                'menu_class' => 'nav navbar-nav'
            )


            );

            ?>

                </div>
                <!-- .col-sm-8 -->


                <div class="col-sm-4 navigation" id="social-icons">

                    <ul>

                        <a href=""><i class="fa fa-facebook"></i></a>
                        <a href=""><i class="fa fa-twitter"></i></a>
                        <a href=""><i class="fa fa-instagram"></i></a>
                        <a href=""><i class="fa fa-pinterest"></i></a>
                        <a href=""><i class="fa fa-heart"></i></a>
                        <a href=""><i class="fa fa-google-plus"></i></a>
                        <a href=""><i class="fa fa-tumblr"></i></a>

                    </ul>

                </div>
                <!-- social-icons -->

            </div>
            <!-- row -->

        </div>
        <!-- .container -->

    </nav>
    <!-- .navbar -->

但是输出结果是：

而静态的看起来像：

静态网站的JS小提琴：https://jsfiddle.net/9yyrnmuy/7/

编辑1：

我检查了这些类是否被过度使用并找到了以下语法：

        <div class="container">

            <div class="row">

                <div class="col-sm-8">

                    <div class="navbar-header">

                        <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#navbar-collapse">

                            <span class="sr-only">Toggle  navigation</span>
                            <span class="icon-bar"></span>
                            <span class="icon-bar"></span>
                            <span class="icon-bar"></span>
                        </button>

                    </div>
                    <!-- navbar-header -->


            <nav class="nav navbar-nav">
             <ul>
               <li class="page_item page-item-7 current_page_item">    
               <a>Home</a></li>
             </ul>
           </nav>

                </div>
                <!-- .col-sm-8 -->

而我希望它是：

    <div class="container">

        <div class="row">

            <div class="col-sm-8">

                <div class="navbar-header">

                    <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#navbar-collapse">

                        <span class="sr-only">Toggle  navigation</span>
                        <span class="icon-bar"></span>
                        <span class="icon-bar"></span>
                        <span class="icon-bar"></span>
                    </button>

                </div>
                <!-- navbar-header -->


                <nav class="collapse navbar-collapse navigation" id="navbar-collapse">

                    <ul class="nav navbar-nav">

                        <li><a href="/">Home</a></li>
                        <li><a href="category.html">Category 1</a></li>
                        <li><a href="category.html">Category 2</a></li>
                        <li><a href="category.html">Category 3</a></li>
                        <li><a href="about.html">About</a></li>
                        <li><a href="contact.html">Contact Me</a></li>

                    </ul>
                    <!-- .navbar-nav -->

                </nav>
                <!-- #navbar-collapse -->

            </div>
            <!-- .col-sm-8 -->

有人可以帮忙解决这个问题吗？任何帮助将不胜感激。