<link href="//maxcdn.bootstrapcdn.com/bootstrap/3.3.0/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css">
<script src="//maxcdn.bootstrapcdn.com/bootstrap/3.3.0/js/bootstrap.min.js"></script>
<script src="//code.jquery.com/jquery-1.11.1.min.js"></script>
<!------ Include the above in your HEAD tag ---------->
<link href="https://fonts.googleapis.com/icon?family=Material+Icons"
rel="stylesheet">
<div id="custom-bootstrap-menu" class="navbar navbar-default " role="navigation">
<div class="container-fluid">
<div class="navbar-header">
<a class="navbar-brand" href="#myModal" data-toggle="modal" data-target="#myModal"><img src="http://empyrianartforms.co/assimilate-template/img/ic_more_vert_white_18dp.png" style="max-height: 24px; ,max-width: 24px;" alt="refresh"/> </a>
<a class="navbar-brand" href="index.html"><img src="http://empyrianartforms.co/assimilate-template/img/ic_refresh_white_18dp.png" style="max-height: 24px; ,max-width: 24px;" alt="refresh"/> </a>
<button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-menubuilder">
<span class="sr-only">Toggle navigation</span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
</div>
<div class="collapse navbar-collapse navbar-menubuilder">
<ul class="nav navbar-nav navbar-left">
<li>
<a href="/">Home </a>
</li>
<li>
<a href="Page-One.html">Page One</a>
</li>
<li>
<a href="Page-Two.html">Page Two</a>
</li>
<li>
<a href="Page-Two.html">Page-Three</a>
</li>
</ul>
<ul class="nav navbar-nav navbar-left">
</ul>
</div>
</div>
</div>
<!-- Modal -->
<div class="modal" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel">
<div class="modal-overflow">
<ul class="overflow-menu">
<li>
<h4><a href="#"> Home <i class="material-icons">home</i></a></h4>
</li>
<li>
<h4><a href="#">Settings <i class="material-icons">settings</i></a></h4>
</li>
<li>
<h4><a href="#">Check For update <i class="material-icons">system_update</i></a> </h4>
</li>
<li>
<h4><a href="#">Share <i class="material-icons">share</i></a></h4>
</li>
<li>
<h4><a href="#">Yummm... Cinnabons <i class="material-icons">favorites</i></a></h4>
</li>
</ul>
</div>
</div>
<div class="container">
<div class="row">
<div class="jumbotron">
<h2>Material Design like Navbar with Overflow Menu with Icons.</h2>
<h3>By: Justin Zirpoli <a href="http://www.empyrianartforms.co">Empyrian Art Forms</a></h3>
</div>
</div>
</div>
/*--------------------------------------------------------*/
/* Justin Zirpoli */
/* Empyrian Art Forms */
/* XxblackvelvetxX */
/* Main Elements,,,,,,, */
/* #wahhhhhh comes in waves for days....like wahhhhhh.*/
/*--------------------------------------------------------*/
@import url(https://fonts.googleapis.com/css?family=Roboto+Condensed:400,700);
body{
font-family: 'Roboto Condensed', sans-serif;
}
/**MODAL OVERFLOW MENU**/
.modal-overflow{
font-family: 'Roboto Condensed', sans-serif;
position: relative;;
background: #FFFFFF;
display: block;
display: -webkit-box;
display: -webkit-flex;
display: -ms-flexbox;
display: flex;
max-width:260px;
max-height:auto;
border:1px solid #AAA;
border-bottom:3px solid #BBB;
margin-top:0px;
overflow:hidden;
box-shadow: 0 8px 17px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);
font-family: 'Roboto', sans-serif;
-webkit-transition: box-shadow 0.3s cubic-bezier(0.4, 0, 0.2, 1);
transition: box-shadow 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}
.modal-overflow ul{
list-style: none;
padding-left: .5em;
}
.modal-overflow li >a{
color:#FFFFFF;
padding-left:.5em;
}
.modal-overflow li >a:hover, {
list-style: none;
background: #E5E5E5;
}
.modal-overflow li >a:active{
background:#000000;
color:#FFFFFF;
}
overflow-menu a{
color:#000000;
list-style: none;
padding-left: .5em;
}
a{
color:#000000;
}
.modal-backdrop.in {
filter: alpha(opacity=0);
opacity: 0;
}
/***NAVBAR STYLE**/
#custom-bootstrap-menu.navbar-default .navbar-brand {
color: rgba(82, 103, 115, 1);
}
#custom-bootstrap-menu.navbar-default {
font-size: 16px;
background-color: rgba(0, 0, 0, 1);
border-width: 0px;
border-radius: 0px;
border:1px solid #AAA;
border-bottom:3px solid #BBB;
margin-top:0px;
overflow:hidden;
box-shadow: 0 8px 17px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);
font-family: 'Roboto', sans-serif;
-webkit-transition: box-shadow 0.3s cubic-bezier(0.4, 0, 0.2, 1);
transition: box-shadow 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}
#custom-bootstrap-menu.navbar-default .navbar-nav>li>a {
color: rgba(255, 255, 255, 1);
background-color: rgba(0, 0, 0, 1);
}
#custom-bootstrap-menu.navbar-default .navbar-nav>li>a:hover,
#custom-bootstrap-menu.navbar-default .navbar-nav>li>a:focus {
color: rgba(255, 255, 255, 1);
background-color: rgba(82, 103, 115, 1);
}
#custom-bootstrap-menu.navbar-default .navbar-nav>.active>a,
#custom-bootstrap-menu.navbar-default .navbar-nav>.active>a:hover,
#custom-bootstrap-menu.navbar-default .navbar-nav>.active>a:focus {
color: rgba(255, 255, 255, 1);
background-color: rgba(82, 103, 115, 1);
}
#custom-bootstrap-menu.navbar-default .navbar-toggle {
border-color: #526773;
}
#custom-bootstrap-menu.navbar-default .navbar-toggle:hover,
#custom-bootstrap-menu.navbar-default .navbar-toggle:focus {
background-color: #526773;
}
#custom-bootstrap-menu.navbar-default .navbar-toggle .icon-bar {
background-color: #526773;
}
#custom-bootstrap-menu.navbar-default .navbar-toggle:hover .icon-bar,
#custom-bootstrap-menu.navbar-default .navbar-toggle:focus .icon-bar {
background-color: #000000;
}
/**CARD STYLE**/
