Navbar nicht in Mobile arbeiten - Bootstrap

Question

habe ich versucht, alles auf, was ich auf Stackoverflow finden konnte, aber ich habe für mich bisher keine Lösung Arbeit hat.

<!-- 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> 

Dies ist mein Navbar-Code, den ich beheben möchte. Hier

ist die CSS, die ich für meine navbar bin mit

.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 Added CSS

Answer 1

Lösung: Entfernen Sie die Stile auf .nav, schwimmend rechts und Marge sind in Unordnung alles oben .

Siehe CodePen Link in den Kommentaren