navbar from left side to top using bootstrap 3 - html

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 University of Waterloo 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>