navbar from left side to top using bootstrap 3

Question

I've been having a hard time getting the hamburger menu to work onnce the screen size decreases to anything below 1200px. How can I get my list items to show up below my top nav bar?

This is what I have so far:

 .mainBackground { background-image: url('https://res.cloudinary.com/knaguibimages/image/upload/o_65/v1474765365/Background_p3qqpv.jpg'); background-repeat: no-repeat; background-size: cover; position: relative; } @media screen and (min-width: 1200px) { .body-wrapper { padding-left: 80px; } } @media screen and (min-width: 1200px) { .navbar { width: 80px; max-width: 80px; position: fixed; top: 0; left: 0; height: 100%; border: 0; border-radius: 0; text-align: center; } } .navbar { z-index: 10000; background: rgba(30, 30, 31, 0.85); } @media screen and (max-width: 1200px) { .navbar-header { float: left; padding: 0 40px; } } .navbar-brand { padding: 50px 0 50px 25px; float: left; height: auto; } @media screen and (min-width: 1200px) { .navbar-brand { position: relative; box-shadow: none; margin: 12px 0; } } ul li a span { display: inline-block; color: #f2f2f2; text-align: center; padding: 14px 16px; text-decoration: none; transition: 0.3s; font-size: 17px; } .btn.responsive-menu { display: none; } @media screen and (max-width: 1200px) { .btn.responsive-menu { margin: 45px 50px 0 0; display: inline-block; float: right; } } .btn { color: #0067b5; background: none; border: 2px solid; -webkit-transition: all 200ms ease-in; } .current { color: white; } section { padding-top: 50px; padding-left: 50px; padding-right: 70px; margin-bottom: 106px; } section .box { padding: 50px; background-color: rgba(0, 0, 0, 0.75); } .section-title { margin-bottom: 20px; font-size: 22px; line-height: 28px; color: white; } #aboutMe-responsive { display: none; } #myPortfolio-responsive { display: none; } #contactMe-responsive { display: none; } #aboutMe { padding: 0 50px 20px 0; } #myPortfolio { padding: 0 50px 20px 0; } #contactMe { padding: 0 50px 20px 0; } @media screen and (max-width: 1200px) { #aboutMe { display: none; } #myPortfolio { display: none; } #contactMe { display: none; } #aboutMe-responsive { display: inline; } #myPortfolio-responsive { display: inline; } #contactMe-responsive { display: inline; } } .frame { position: relative; border: 4px solid; border-color: rgba(0, 0, 0, 0.5); overflow: hidden; margin: 0 0 15px 0; } p { font-size: 15px; line-height: 30px; letter-spacing: 0.3px; color: white; } 

 <!--Navigation- Bar--> <nav class="navbar navbar-default" role="navigation"> <!--Navbar header--> <div class="navbar-header"> <!-- Logo --> <div class="navbar-brand text-center"> <!-- <a href="#"> --> <i id="home" class="fa fa-home fa-2x"></i> <!-- </a> --> </div> </div> <!--Hamburger menu--> <a class="btn responsive-menu" data-toggle="collapse" data-target=".navbar-collapse"> <i id="hamburger-menu" class="fa fa-bars fa-2x"></i> </a> <!--Navbar Icon Section Navigation--> <!-- Add "in" when you want to collapse nav bar --> <div id="nav-section-selection" class="collapse navbar-collapse"> <ul class="nav navbar-nav"> <!--About Me--> <li> <a href="#about"> <i id="aboutMe" class="fa fa-user fa-2x current"></i> <span id="aboutMe-responsive">ABOUT ME</span> </a> </li> <!--Portfolio--> <li> <a href="#portfolio"> <i id="myPortfolio" class="fa fa-briefcase fa-2x"></i> <span id="myPortfolio-responsive">MY WORK</span> </a> </li> <!--Contact--> <li> <a href="#contact"> <i id="contactMe" class="fa fa-envelope-o fa-2x"></i> <span id="contactMe-responsive">CONTACT ME</span> </a> </li> </ul> </div> </nav> <!--Page Content Starts Here--> <div id="pageContent"> <!-- About Me Section --> <section id="about" class="about-section"> <div class="box"> <h2 class="section-title">A Little About Myself</h2> <div class="row"> <div class="col-md-5 col-md-push-7"> <figure class="frame"> <img class="img-responsive about-me-img" src="https://res.cloudinary.com/knaguibimages/image/upload/v1474765942/ProfilePic_bvn1gs.jpg" alt="Karim Naguib Profile Picture"> </figure> </div> <div class="col-md-7 col-md-pull-5"> <p>Hello! My name's Karim Naguib, and this page was developed to showcase my coding talent.</p> <p>I graduated from the <a href="https://uwaterloo.ca/"> University of Waterloo</a> in 2015, with a degree in Management Engineering.</p> </div> </div> </div> </section> <!-- Portfolio Section --> <section id="portfolio" class="portfolio-section"> <div class="box"> <h2 class="section-title">My Work</h2> </div> </section> <!-- Contact Section --> <section id="contact" class="contact-section"> <div class="box"> <h2 class="section-title">Get In Touch With Me</h2> </div> </section> </div> </div> <!-- Footer --> </body> </html> 

Answer 1

you should try this inside your navbar-header class:

    <button type="button" class="navbar-toggle" 
    data-toggle="collapse" data-target="#myNavbar">
    <span class="icon-bar"></span>
    <span class="icon-bar"></span>
    <span class="icon-bar"></span>
    </button>