如何使用模板使导航栏具有响应性

Question

我正在使用一个名为忠实的 colorlib 模板：https://colorlib.com/wp/template/faithful/

基本上我把css和导航栏改成水平的，问题是我在手机上查看时，它不起作用

这就是我将导航栏更改为水平导航栏的方法

<div class="site-navbar-wrap js-site-navbar bg-white">

  <div class="container">
    <div class="site-navbar bg-light">
      <div class="py-1">
        <div class="row align-items-center">
          <div class="col-2">
        <a class="d-block" href="index.html" rel="home"><img class="d-block" src="images/company_logo.png" alt="logo"></a>
          </div>
          <div class="col-10">

          <nav class="navbar navbar-default" role="navigation">
              <div class="navbar-header">
                <ul class="navbar-default" id="menu">
                  <li class="active">
                    <a href="index.html">Home</a>
                  </li>
                    <a class="dropdown-toggle fa" data-toggle="dropdown" href="about.html" >About Us<span></span></a>
                    <ul class="dropdown-menu">
                      <li><a href="about.html">Our Company</a></li>
                      <li><a href="about.html#section1">Team</a></li>
                      <li><a href="about.html#section2">Goals</a></li>
                      <li><a href="about.html#section3">Location</a></li> 
                    </ul> 
                  <li><a href="products.html">Products</a></li>

                  </li>
                  <li><a href="merch.html">Merchandise</a></li>
                  <li><a href="faqs.html">FAQs</a></li>
                  <li><a href="contact.html">Contact Us</a></li>
                </ul>
              </div>
            </nav>
          </div>
        </div>
      </div>
    </div>
  </div>
</div>

我希望导航栏在移动设备上工作（在右侧显示一个按钮）

我尽我所能，但还是不行，我已经完成了网站的设计，我真的需要改变导航栏。

Answer 1

<nav class="navbar navbar-expand-lg navbar-dark primary-color">

  <!-- Collapse button -->
  <button class="navbar-toggler float-xs-right" type="button" data-toggle="collapse" data-target="#basicExampleNav"
    aria-controls="basicExampleNav" aria-expanded="false" aria-label="Toggle navigation">
    <span class="navbar-toggler-icon"></span>
  </button>

  <!-- Collapsible content -->
  <div class="collapse navbar-collapse" id="basicExampleNav">

    <!-- Links -->
    <ul class="navbar-nav mr-auto">
      <li class="nav-item active">
        <a class="nav-link" href="#">Home
          <span class="sr-only">(current)</span>
        </a>
      </li>
      <li class="nav-item">
        <a class="nav-link" href="#">Our company</a>
      </li>
      <li class="nav-item">
        <a class="nav-link" href="#">team</a>
      </li>

      <li class="nav-item">
        <a class="nav-link" href="#">goals</a>
      </li>

     <li class="nav-item">
        <a class="nav-link" href="#">location</a>
      </li>


      <li class="nav-item">
        <a class="nav-link" href="#">products</a>
      </li>

     <li class="nav-item">
        <a class="nav-link" href="#">merchandise</a>
      </li>
    </ul>
  </div>
</nav>

你可以修改和使用这个