Navbar не работает в Mobile - Bootstrap

Question

Я пробовал все, что мог найти в stackoverflow, но до сих пор у меня не было никакого решения.

<!-- Navigation --> 
<nav id="custom-nav" class="navbar navbar-inverse navbar-fixed-top" role="navigation"> 
    <div class="container"> 
     <!-- Brand and toggle get grouped for better mobile display --> 
     <div class="navbar-header"> 
      <button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#navigationbar"> 
       <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="../Pho Lee/index.html">Pho Lee</a> 
     </div> 
     <!-- Collect the nav links, forms, and other content for toggling --> 
     <div class="collapse navbar-collapse" id="navigationbar"> 
      <ul class="nav navbar-nav"> 
       <li> 
        <a href="../Pho Lee/index.html">Home</a> 
       </li> 
       <li> 
        <a href="../Pho Lee/menu.html">Menu</a> 
       </li> 
       <li> 
        <a href="#">About Us</a> 
       </li> 
      </ul> 
     </div> 
     <!-- /.navbar-collapse --> 
    </div> 
    <!-- /.container --> 
</nav> 

Это мой код навигатора, который я пытаюсь исправить.

Вот CSS, который я использую для моей навигационной панели

.nav { 
    float: right; 
    margin-right: 475px; 
} 

#custom-nav { 
    background-color: rgba(0,0,0,0); 
    border: 0; 
    box-shadow: none; 
    z-index: 999; 
    -webkit-font-smoothing: antialiased; 
    -moz-osx-font-smoothing: grayscale; 
    -webkit-transition: background .5s ease-in-out, opacity .5s ease; 
    -moz-transition: background .5s ease-in-out, opacity .5s ease; 
    transition: background .5s ease-in-out, opacity .5s ease; 
} 

#custom-nav a { 
    color:white; 
} 

#custom-nav .dropdown-menu { 
    border-radius: 0; 
    border: none; 
    border-top: 5px solid transparent; 
    background-color: transparent; 
    -webkit-box-shadow: none; 
    box-shadow: none; 
    padding-top: 0; 
} 

#custom-nav .container { 
    padding-top: 5px; 
    padding-bottom: 5px; 
    -webkit-transition: padding-top .5s ease, padding-bottom .5s ease; 
    -moz-transition: padding-top .5s ease, padding-bottom .5s ease; 
    transition: padding-top .5s ease, padding-top .5s ease, padding-bottom .5s ease; 
} 

#custom-nav.affix { 
    top: 0; 
    min-width: 100%; 
    background-color: black; 
    opacity: 0.8; 
    -webkit-transition: background .5s ease-in-out, opacity .5s ease; 
    -moz-transition: background .5s ease-in-out, opacity .5s ease; 
    transition: background .5s ease-in-out, opacity .5s ease; 
} 

EDIT Добавлен CSS

Answer 1

Решение: Удалите стили на .nav, плавучие право и маржинальные Мессинг все вверх ,

См. Ссылку codepen в комментариях