"Bootstrap Growl Styled Navbar"
Bootstrap 3.2.0 Snippet by mattishere

<link href="//netdna.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css"> <script src="//netdna.bootstrapcdn.com/bootstrap/3.2.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 ----------> <nav class="[ navbar ][ animate navbar-pink ]" role="navigation"> <div class="[ container ]"> <div class="[ navbar-header ]"> <button type="button" class="[ navbar-toggle ]" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1"> <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 ][ animate ]" href="#home">Bootstrap Growl</a> </div> <div class="[ collapse navbar-collapse ]" id="bs-example-navbar-collapse-1"> <ul class="[ nav navbar-nav navbar-right ]"> <li class="[ aniamte animate-2s ]"><a href="#growl-builder" class="[ aniamte animate-2s ]">Growl Builder</a></li> <li class="[ dropdown ]"> <a href="#growl-documentation" class="[ aniamte animate-2s ]">Documentation</a> <a href="#growl-documentation-dropdown" class="[ dropdown-toggle ][ aniamte animate-2s ]" data-toggle="dropdown"><span class="caret"></span></a> <ul class="[ dropdown-menu ]" role="menu"> <li><a href="#growl-documentation-options" class="[ aniamte animate-2s ]" tabindex="-1">Options</a></li> <li><a href="#growl-documentation-settings" class="[ aniamte animate-2s ]" tabindex="-1">Settings</a></li> <li><a href="#growl-documentation-methods" class="[ aniamte animate-2s ]" tabindex="-1">Methods</a></li> </ul> </li> <li class="[ aniamte animate-2s ]"><a href="#growl-examples" class="[ aniamte animate-2s ]">Examples</a></li> </ul> </div> </div> </nav> <div class="container" style="margin-top:10px;"> <div class="row form-group"> <div class="col-xs-12 col-md-6"> <div class="panel panel-default"> <div class="panel-image hide-panel-body"> <img src="http://666a658c624a3c03a6b2-25cda059d975d2f318c03e90bcf17c40.r92.cf1.rackcdn.com/unsplash_52d09387ae003_1.JPG" class="panel-image-preview" /> </div> <div class="panel-body"> <h4>Datacenter @ 833 Chestnut</h4> <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed in lobortis nisl, vitae iaculis sapien. Phasellus ultrices gravida massa luctus ornare. Suspendisse blandit quam elit, eu imperdiet neque semper et.</p> </div> <div class="panel-footer text-center"> <a href="#download"><span class="glyphicon glyphicon-download"></span></a> <a href="#facebook"><span class="fa fa-facebook"></span></a> <a href="#twitter"><span class="fa fa-twitter"></span></a> <a href="#share"><span class="glyphicon glyphicon-share-alt"></span></a> </div> </div> </div> <div class="col-xs-12 col-md-6"> <div class="panel panel-default"> <div class="panel-image hide-panel-body"> <img src="http://666a658c624a3c03a6b2-25cda059d975d2f318c03e90bcf17c40.r92.cf1.rackcdn.com/unsplash_52cf9489095e8_1.JPG" class="panel-image-preview" /> </div> <div class="panel-body"> <h4>Title of Image</h4> <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed in lobortis nisl, vitae iaculis sapien. Phasellus ultrices gravida massa luctus ornare. Suspendisse blandit quam elit, eu imperdiet neque semper et.</p> </div> <div class="panel-footer text-center"> <a href="#download"><span class="glyphicon glyphicon-download"></span></a> <a href="#facebook"><span class="fa fa-facebook"></span></a> <a href="#twitter"><span class="fa fa-twitter"></span></a> <a href="#share"><span class="glyphicon glyphicon-share-alt"></span></a> </div> </div> </div> </div> <div class="[ container ]"> <div class="[ row ]"> <div class="[ col-xs- 12 ]"> <h2>So what is so special about this menu it deserves a snippet?</h2> <p>You mean besides the pink design? haha.</p> <p>No really. I like the dropdown I hade. it allows the word documentation to be it's own link will still containing a dropdown. Check it out.</p> </div> </div> </div>
@import url(//fonts.googleapis.com/css?family=Roboto:500,700); .animate { -webkit-transition: all 0.5s ease-in-out; -moz-transition: all 0.5s ease-in-out; -o-transition: all 0.5s ease-in-out; -ms-transition: all 0.5s ease-in-out; transition: all 0.5s ease-in-out; } .animate-2s { -webkit-transition-duration: 0.2s; -moz-transition-duration: 0.2s; -o-transition-duration: 0.2s; -ms-transition-duration: 0.2s; transition-duration: 0.2s; } .navbar-pink { background-color: rgb(255, 121, 185); border-color: rgb(194, 97, 135); border-radius: 0; border-top-width: 0; color: rgb(255, 255, 255); font-family: Roboto,sans-serif; font-weight: 500; margin-bottom: 0; } .navbar-pink .navbar-toggle .icon-bar { background-color: rgb(255, 255, 255); } .navbar-pink a.navbar-brand { color: rgb(255, 255, 255); font-weight: 700; } .navbar-pink .navbar-nav > li > a, .navbar-pink .navbar-nav > li > .dropdown-menu > li > a { color: rgb(255, 255, 255); display: block; letter-spacing: 2px; } .navbar-pink .navbar-nav > li.dropdown { } .navbar-pink .navbar-nav > li.dropdown > a:nth-of-type(2) { position: absolute; right: 0px; top: 0px; } .navbar-pink .navbar-nav > li.dropdown.open > a:nth-of-type(2), .navbar-pink .navbar-nav > li.dropdown:focus > a:nth-of-type(2), .navbar-pink .navbar-nav > li.dropdown:hover > a:nth-of-type(2) { border-left: 2px solid rgb(255, 121, 185); } .navbar-pink .navbar-nav > li.dropdown.open > a, .navbar-pink .navbar-nav > li.dropdown:focus > a, .navbar-pink .navbar-nav > li.dropdown:hover > a, .navbar-pink .navbar-nav > .active > a, .navbar-pink .navbar-nav > li > a:focus, .navbar-pink .navbar-nav > li > a:hover { color: rgb(51, 51, 51); background-color: rgb(235, 235, 235); border-bottom: 5px solid rgb(255, 121, 185); padding-bottom: 10px; } .navbar-pink .navbar-nav > li > .dropdown-menu { background-color: rgb(255, 121, 185); border-radius: 0px; min-width: 100%; padding: 0px; } .navbar-pink .navbar-nav > li > .dropdown-menu > li > a { display: block; padding: 10px 20px; } .navbar-pink .navbar-nav > li > .dropdown-menu > .active > a, .navbar-pink .navbar-nav > li > .dropdown-menu > li > a:focus, .navbar-pink .navbar-nav > li > .dropdown-menu > li > a:hover { color: rgb(51, 51, 51); background-color: rgb(235, 235, 235); border-left: 5px solid rgb(255, 121, 185); padding-left: 15px; width: 100%; } @media (min-width: 768px) { .navbar-pink .navbar-nav > li.dropdown > a { display: inline-block; } .navbar-pink .navbar-nav > li.dropdown > a:nth-of-type(2) { margin-left: -1px; position: relative; } .navbar-pink .navbar-nav > li.dropdown.open > a:nth-of-type(2), .navbar-pink .navbar-nav > li.dropdown:focus > a:nth-of-type(2), .navbar-pink .navbar-nav > li.dropdown:hover > a:nth-of-type(2) { border-left-width: 0px; } }

Related: See More


Questions / Comments: