bootstrap navbars重叠

Question

第一个导航栏

  <nav id="mydesignpattern" class="navbar navbar-default navbar-fixed-top" style="background-color:#0D47A1;align:left;"
      xmlns:padding-left="http://www.w3.org/1999/xhtml" xmlns:padding-right="http://www.w3.org/1999/xhtml">
        <div class="navbar-header" class="col-md-12 col-offset-10" class="container-fluid" >
          <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#navbar" aria-expanded="false" aria-controls="navbar">
            <span class="sr-only">Toggle navigation</span>
            <span class="icon-bar"></span>
            <span class="icon-bar"></span>
            <span class="icon-bar"></span>
          </button>
        </div>

          <ul class="nav navbar-nav" >
            <li  ><a style="color:white;" href="https://www.jscimedcentral.com"  >Home</a></li>
            <li  ><a style="color:white;" href="https://www.jscimedcentral.com/authorguide.php">Author Guidelines</a></li>
            <li ><a style="color:white;" href="https://www.jscimedcentral.com/journals.php" >Journals</a></li>


          </ul>
     <div class="collapse navbar-collapse navHeaderCollapse" id="navbar">

        <ul class="nav  navbar-nav navbar-right" >

第二个导航栏：

    <nav id="secnavbar" class="navbar navbar-default navbar-static-top"
      xmlns:padding-left="http://www.w3.org/1999/xhtml" xmlns:padding-right="http://www.w3.org/1999/xhtml">
        <div class="navbar-header" class="col-md-12 col-offset-10" class="container-fluid" >
          <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#navbar2" aria-expanded="false" aria-controls="navbar">
            <span class="sr-only">Toggle navigation</span>
            <span class="icon-bar"></span>
            <span class="icon-bar"></span>
            <span class="icon-bar"></span>
          </button>
        </div>

          <ul class="nav navbar-nav">
 <li class="activeclass" ><img src="{% static 'img/Loto-tracking.png' %}" height="53" width="250"></li>


          </ul>

     <div class="collapse navbar-collapse navHeaderCollapse" id="navbar2">

        <ul class="nav  navbar-nav navbar-right" >
                           <li  ><a style="color:#04472f;" href="{% url 'contactus' %}" onmouseover="this.bgColor='white'; this.style.color='white'" onmouseout="this.bgColor='#04472f'; this.style.color='#04472f'">Contact Us</a></li>

                        <li  ><a style="color:#04472f;" href="#" onmouseover="this.bgColor='white'; this.style.color='white'" onmouseout="this.bgColor='#04472f'; this.style.color='#04472f'">FAQ</a></li>


               <li>

这两个导航栏在我的基本html中一个接一个地包含在内，它适用于桌面版但移动版第一个导航栏与第二个导航栏重叠。试过z-index但没用。我应该如何解决这个问题

Answer 1

在第二个导航类=导航栏切换折叠中添加一个类并给予边距顶部...