Мой навигатор на настольном ПК не отображается так же, как на мобильном телефоне, даже если коды одинаковы.

Question

Фрагмент не работает, но мой вопрос по какой-то причине навигатор по изменению размера браузера не выглядит таким же, как когда он просматривается в мобильном телефоне, и я не уверен, почему я использую медиа-запросы, прилагаются фотографии.

Desktop версия навигационной панели

На Iphone 6

.navbar-default .navbar-nav > li > a:hover { 
 
    text-decoration: none; 
 
    color: #0064a4; 
 
} 
 
.navbar { 
 
    border-radius: 0; 
 
    padding: 10px 0; 
 
    margin: 0px; 
 
} 
 
.navbar-brand { 
 
    height: 70px; 
 
    padding: 0 0 0 20px; 
 
} 
 
.navbar-collapse { 
 
    padding-left: 20px; 
 
} 
 
.navbar-default .navbar-toggle .icon-bar { 
 
    background-color: #fff; 
 
} 
 
#navbar5 { 
 
    font-family: 'Oswald', sans-serif; 
 
    margin: 0; 
 
    float: right; 
 
    background-color: #00a7d7; 
 
} 
 
.navbar-default { 
 
    background-color: #00a7d7; 
 
    border: none; 
 
} 
 
.navbar-default .navbar-nav > li > a { 
 
    color: #fff; 
 
} 
 
.navbar-default .navbar-nav > .active > a, 
 
.navbar-default .navbar-nav > .active > a:hover, 
 
.navbar-default .navbar-nav > .active > a:focus { 
 
    color: #0064a4; 
 
    background-color: transparent; 
 
} 
 
.navbar-toggle { 
 
    /* padding:13px 10px; */ 
 
} 
 
.navbar-default .navbar-toggle:hover, 
 
.navbar-default .navbar-toggle:focus { 
 
    background-color: #0096C1; 
 
} 
 
.navbar-default .navbar-nav > .open > a, 
 
.navbar-default .navbar-nav > .open > a:hover, 
 
.navbar-default .navbar-nav > .open > a:focus { 
 
    background-color: #00a7d7; 
 
    color: #0064a4; 
 
} 
 
ul.dropdown-menu { 
 
    background-color: #00a7d7; 
 
    border: none; 
 
    box-shadow: none; 
 
} 
 
ul.dropdown-menu a { 
 
    color: #fff; 
 
} 
 
@media (min-width: 992px) { 
 
    .anon>.col-md-offset-0 { 
 
    margin: 0 12%; 
 
    } 
 
    .navbar-brand img { 
 
    width: 75px; 
 
    } 
 
} 
 
@media (max-width: 991px) { 
 
    .navbar-brand img { 
 
    width: 120px; 
 
    } 
 
    body { 
 
    padding-top: 89px; 
 
    } 
 
    .navbar-header { 
 
    float: none; 
 
    height: 120px; 
 
    } 
 
    .navbar-toggle { 
 
    display: block; 
 
    } 
 
    .navbar-collapse { 
 
    border-top: 1px solid transparent; 
 
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.1); 
 
    } 
 
    .navbar-collapse.collapse { 
 
    display: none!important; 
 
    } 
 
    .navbar-nav { 
 
    float: none!important; 
 
    margin: 7.5px -15px; 
 
    } 
 
    .navbar-nav>li { 
 
    float: none; 
 
    } 
 
    .navbar-nav>li>a { 
 
    font-size: 50px; 
 
    line-height: 50px; 
 
    padding-top: 10px; 
 
    padding-bottom: 10px; 
 
    } 
 
    .navbar-text { 
 
    float: none; 
 
    margin: 15px 0; 
 
    } 
 
    .navbar-default .navbar-toggle .icon-bar { 
 
    width: 40px; 
 
    height: 4px; 
 
    margin: 8px 0; 
 
    } 
 
    .navbar-toggle { 
 
    padding: 20px; 
 
    } 
 
    /* since 3.1.0 */ 
 
    .navbar-collapse.collapse.in { 
 
    display: block!important; 
 
    } 
 
    .collapsing { 
 
    overflow: hidden!important; 
 
    } 
 
}

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" /> 
 
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<div class="example5"> 
 
    <nav class="navbar navbar-default navbar-fixed-top"> 
 
    <div class="container"> 
 
     <div class="navbar-header"> 
 
     <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#navbar5"> 
 
      <span class="sr-only">Toggle navigation</span> 
 
      <span class="icon-bar"></span> 
 
      <span class="icon-bar"></span> 
 
      <span class="icon-bar"></span> 
 
     </button> 
 
     <a class="navbar-brand" href="index.html"> 
 
      <img src="img/logo.png" alt="cophyright logo"> 
 
     </a> 
 
     </div> 
 
     <div id="navbar5" class="navbar-collapse collapse"> 
 
     <ul class="nav navbar-nav navbar-right"> 
 
      <li class="active"><a href="index.html">ABOUT</a> 
 
      </li> 
 
      <li class="dropdown"> 
 
      <a class="dropdown-toggle" data-toggle="dropdown" href="copyright.html"> 
 
\t \t COPYRIGHT 
 
     <span class="caret"></span></a> 
 
      <ul class="dropdown-menu"> 
 
       <li><a href="copyright.html#cpy">WHAT IS COPYRIGHT?</a> 
 
       </li> 
 
       <li><a href="copyright.html#cvcp">WORKS INCLUDED</a> 
 
       </li> 
 
       <li><a href="copyright.html#notcp">WORKS EXCLUDED</a> 
 
       </li> 
 
       <li><a href="copyright.html#rights">COPYRIGHTS</a> 
 
       </li> 
 
       <li><a href="copyright.html#limit1">LIMITATIONS</a> 
 
       </li> 
 
       <li><a href="copyright.html#own">OWNERSHIP</a> 
 
       </li> 
 
       <li><a href="copyright.html#term">TERM OF PROTECTION</a> 
 
       </li> 
 
      </ul> 
 
      </li> 
 
      <li><a href="protection.html">PROTECTION</a> 
 
      </li> 
 
      <li><a href="contact.php">CONTACT US</a> 
 
      </li> 
 
     </ul> 
 
     </div> 
 
     <!--/.nav-collapse --> 
 
    </div> 
 
    <!--/.container-fluid --> 
 
    </nav> 
 

 
</div>

Answer 1

Я думаю bootstrap.min.css перезапишите свой собственный css. Поэтому вызовите эту последовательность: Первый вызов бутстрапа, затем custom.css

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" /> 
<link href="https:custom.css" rel="stylesheet" />