.btn-group hamburger menu issues and confusion - html

Question

I'm creating a responsive website, and I'm relatively new to bootstrap. I'm trying to create a responsive navigation that turns into a hamburger menu at less than 1340px. I'm using a split button setup right now, see https://jsfiddle.net/ethacker/u38scspb/, it doesn't really work well, it turns into a scrollable thing. I'd like the dropdown to look something like this on less than 1340px screens.
I'm trying to add the navbar classes (see https://jsfiddle.net/ethacker/d306gphq/1/). When I do this, the navbar hamburger icon doesn't show anymore.
So my questions are :
1. How do I make the hamburger menu icon show?
2. Am I doing this the right way, or is there an easier way?
3. How do I make it look like the above image when viewed on mobile devices/smaller than 1340px screens?
4. How do I trigger the hamburger button at less than 1340px instead of just on mobile?
I'm trying to learn, but I'm just not sure which direction to head in.
My CSS code:
body {
background-image: url('backgroundarrows.png');
}
body > div.container-fluid > header {
background-color: #e9e7ff;
margin-top: 0;
text-align: center;
}
.inline-display {
display: inline;
}
.float-right {
float: right;
}
#logo {
height: 90px;
width: 170px;
}
#search {
margin-right: 1%;
}
.container-fluid {
padding: 0;
}
.content {
padding: 1%;
background-color: #f9fdff;
border: solid thin lightgray;
-webkit-border-radius: 10px;
-moz-border-radius: 10px;
border-radius: 10px;
margin: 0 1%;
}
section.content {
width: 60%;
}
aside.content {
width: 30%;
text-align: center;
}
.btn {
color: rgb(181,181,225);
}
#my-btn-group{
margin-left: 1%;
}
.mybtngroup {
border-right: solid thin rgb(181,181,225);
border-left: solid thin rgb(181,181,225);
}
.mybtngroup > a.btn.divider {
border-right: solid thin rgb(181,181,225);
}
.heading, div.quip{
font-family: "Monotype Corsiva", cursive;
text-align: center;
}
div.quip, aside > h2.heading{
border-bottom: thin solid grey;
}
div.quip {
font-size: 16px;
}
a{
color: rgb(165, 165, 205);
text-decoration: none;
}
#blogposts {
margin-top: -5%;
}
My HTML:
<div class="container-fluid">
<header class="page-header">
<!-- logo -->
<h1 class="inline-display"><img id="logo" src="mommyinfologo.png"/></h1>
<br/>
<div class="btn-group" id="my-btn-group">
<!-- Home Group -->
<div class="btn-group mybtngroup">
<a class="btn" href="index.php">Home</a>
<a class="btn dropdown-toggle" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
<span class="caret"></span>
<span class="sr-only">Toggle Dropdown</span>
</a>
<ul class="dropdown-menu mylist">
<li>This Mommy's Madness</li>
<li>About Mommy Info</li>
<li>Contact Mommy Info</li>
</ul>
</div>
<!-- Pregnancy group-->
<div class="btn-group mybtngroup">
<a class="btn" href="/pregnancy">Pregnancy</a>
<a class="btn dropdown-toggle" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
<span class="caret"></span>
<span class="sr-only">Toggle Dropdown</span>
</a>
<ul class="dropdown-menu mylist">
<li>Trying to Conceive</li>
<li>Fetal Development</li>
<li>Gender Predictions</li>
<li>Labor and Delivery</li>
</ul>
</div>
<!-- All About Baby group-->
<div class="btn-group mybtngroup">
<a class="btn" href="/all-about-baby">All About Baby</a>
<a class="btn dropdown-toggle" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
<span class="caret"></span>
<span class="sr-only">Toggle Dropdown</span>
</a>
<ul class="dropdown-menu mylist">
<li>Advice</li>
<li>Guidelines</li>
<li>Milestones</li>
<li>Learning Development</li>
</ul>
</div>
<!-- Health and Nutrition group-->
<div class="btn-group mybtngroup">
<a class="btn" href="/health-and-nutrition">Health and Nutrition</a>
<a class="btn dropdown-toggle" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
<span class="caret"></span>
<span class="sr-only">Toggle Dropdown</span>
</a>
<ul class="dropdown-menu mylist">
<li>Pregnancy Nutrition</li>
<li>Breastfeeding</li>
<li>Formula Feeding</li>
<li>Toddler Nutrition</li>
<li>Prenatal Exercise</li>
<li>Postpartum Exercise</li>
<li>Organic DIY Health</li>
</ul>
</div>
<!-- Party Momma group-->
<div class="btn-group mybtngroup">
<a class="btn" href="/party-momma">Party Momma</a>
<a class="btn dropdown-toggle" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
<span class="caret"></span>
<span class="sr-only">Toggle Dropdown</span>
</a>
<ul class="dropdown-menu mylist">
<li>Pregnancy Announcement</li>
<li>Gender Reveal</li>
<li>Baby Shower</li>
<li>Birth Announcement</li>
<li>Birthdays</li>
</ul>
</div>
<!-- Stations group-->
<div class="btn-group mybtngroup">
<a class="btn" href="/stations">Stations</a>
<a class="btn dropdown-toggle" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
<span class="caret"></span>
<span class="sr-only">Toggle Dropdown</span>
</a>
<ul class="dropdown-menu mylist">
<li>Hospital Bag</li>
<li>Diaper Bag</li>
<li>Changing Station</li>
<li>Baby Gear</li>
</ul>
</div>
<!-- Memory Markers group-->
<div class="btn-group mybtngroup">
<a class="btn" href="/memory-markers">Memory Markers</a>
<a class="btn dropdown-toggle" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
<span class="caret"></span>
<span class="sr-only">Toggle Dropdown</span>
</a>
<ul class="dropdown-menu mylist">
<li>Do It Yourself</li>
<li>Buy It</li>
</ul>
</div>
<!-- Reviews group-->
<div class="btn-group mybtngroup">
<a class="btn mycaret" href="/reviews">Reviews</a>
<a class="btn dropdown-toggle" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
<span class="caret"></span>
<span class="sr-only">Toggle Dropdown</span>
</a>
<ul class="dropdown-menu mylist">
<li>Game Reviews</li>
<li>Gear Reviews</li>
<li>Learning Reviews</li>
</ul>
</div>
<!-- Blog-->
<a class="btn mybtngroup" id="blog" href="/mommy-madness">
Blog
</a>
</div> <!-- closing div#btn-group-justified -->
<input class="float-right" type="text" name="search" id="search" placeholder="Search"/>

Answer 1

This is the code from Bootstrap that makes the navbar collapse when using a tablet or a mobile phone.
<!-- Collect the nav links, forms, and other content for toggling -->
<div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
<ul class="nav navbar-nav">
<li class="active">Link <span class="sr-only">(current)</span></li>
<li>Link</li>
<li class="dropdown">
Dropdown <span class="caret"></span>
<ul class="dropdown-menu">
<li>Action</li>
<li>Another action</li>
<li>Something else here</li>
<li role="separator" class="divider"></li>
<li>Separated link</li>
<li role="separator" class="divider"></li>
<li>One more separated link</li>
</ul>
</li>
</ul>
You can read about it more here: http://getbootstrap.com/components/#navbar
You need to include #media query selector into your main.css for the elements to change on specific screen width. For example:
#media (min-width: 768px) {
p { color: red; }
}