"CLTE - Nav - FontAwesome"
Bootstrap 3.3.0 Snippet by cssmfcpro

<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 ----------> <head> <meta charset="utf-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta name="description" content=""> <meta name="author" content=""> <title>Template Boostrap Nav 01</title> <!-- Bootstrap Core CSS --> <link href="../01_bootstrap_css/bootstrap.min.css" rel="stylesheet"> <link href="theme_nav_01.css" rel="stylesheet"> <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css"> <!-- Custom CSS --> <!-- HTML5 Shim and Respond.js IE8 support of HTML5 elements and media queries --> <!--[if lt IE 9]> <script src="https://oss.maxcdn.com/libs/html5shiv/3.7.0/html5shiv.js"></script> <script src="https://oss.maxcdn.com/libs/respond.js/1.4.2/respond.min.js"></script> <![endif]--> </head> <body> <nav class="navbar navbar-default navbar-inverse navbar-fixed-top" role="navigation"> <div class="container-fluid"> <div class="navbar-header"> <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#clte-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> <!-- logo --> <a class="navbar-brand" href="#"><img alt="Profile Avatar" src="http://cgcmagnum.epizy.com/demo/bs_kmoda/images/portrait-450.jpg" class="img-responsive img-circle"/></a> </div> <div class="collapse navbar-collapse animated fadeIn xcr" id="clte-navbar-collapse-1"> <ul class="nav navbar-nav animated fadeIn text16"> <li class="active ripple"><a href="#"><i class="fa fa-home" aria-hidden="true"></i></a></li> <li class="ripple"><a href="#"><i class="fa fa-heart" aria-hidden="true"></i> Favorite</a></li> <li class="ripple"><a href="#"><i class="fa fa-star" aria-hidden="true"></i> Bookmark</a></li> <li class="dropdown"> <a href="#" class="dropdown-toggle ripple" data-toggle="dropdown"><i class="fa fa-cart" aria-hidden="true"></i> Dropdown <span class="caret"></span></a> <ul class="dropdown-menu animated flipInX" role="menu"> <li><a href="#"><i class="fa fa-check" aria-hidden="true"></i> Link Opt One</a></li> <li><a href="#"><i class="fa fa-check" aria-hidden="true"></i> Link Opt Two</a></li> <li><a href="#"><i class="fa fa-check" aria-hidden="true"></i> Link Opt Tree</a></li> <li class="divider"></li> <li><a href="#">Separated link</a></li> <li class="divider"></li> <li><a href="#">One more separated link</a></li> </ul> </li> </ul> <ul class="nav navbar-nav navbar-right"> <li class="dropdown"> <a href="#" class="dropdown-toggle ripple" data-toggle="dropdown"><i class="fa fa-share" aria-hidden="true"></i> <b>Share</b> <span class="caret"></span></a> <ul id="share-opt" class="dropdown-menu"> <li> <div class="row"> <div class="col-md-12"> <!-- Share --> <div class="social-buttons"> <div class="iconSpecial"></div> <a href="https://www.facebook.com/sharer.php?u=http%3A%2F%2Fxniteproductions.com%2F" class="btn btn-fb ripple" target="_blank">Facebook</a> <a href="https://twitter.com/intent/tweet?url=http%3A%2F%2Fxniteproductions.com%2F&text=Custom%20MyFreeCams%20-%20Chaturbate%20designs%20for%20webcam%20performers.%20Awesome%20designs%20&via=CSSMFC&hashtags=CamgirlLiveEditor%20" class="btn btn-tw ripple" target="_blank">Twitter</a> </div> </div> </div> </li> </ul> </li> </ul> </div><!-- /.navbar-collapse --> </div><!-- /.container-fluid --> </nav> <!-- Second Nav --> <nav class="navbar navbar-default navbar-static-top" role="navigation"> <div class="container-fluid"> <div class="navbar-header"> <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#clte-navbar-collapse-2"> <span class="sr-only">Toggle navigation</span> <span class="icon-bar"></span> <span class="icon-bar"></span> <span class="icon-bar"></span> </button> <!-- Brand --> <a class="navbar-brand" href="#">Categories</a></div> <div class="collapse navbar-collapse animated fadeIn" id="clte-navbar-collapse-2"> <ul class="nav navbar-nav animated fadeIn"> <li><a href="#">Category Link 1</a></li> <li><a href="#">Category Link 2</a></li> <li><a href="#">Category Link 3</a></li> <li><a href="#">Category Link 4</a></li> <li><a href="#">Category Link 5</a></li> <li class="dropdown"> <a href="#" class="dropdown-toggle" data-toggle="dropdown"> Dropdown 2 <span class="caret"></span></a> <ul class="dropdown-menu animated flipInX" role="menu"> <li><a href="#">Other category 01</a></li> <li><a href="#">Other category 02</a></li> <li><a href="#">Other category 03</a></li> <li><a href="#">Other category 04</a></li> </ul> </li> </ul> </div><!-- /.navbar-collapse --> </div><!-- /.container-fluid --> </nav> </body> </html>
.xcr::-webkit-scrollbar {width:8px;} .xcr::-webkit-scrollbar-track {-webkit-box-shadow:inset 0 0 6px rgba(0,0,0,0.3);-webkit-border-radius:10px;border-radius:10px;} .xcr::-webkit-scrollbar-thumb {-webkit-border-radius:10px;border-radius:10px;background:#9c27b0;-webkit-box-shadow:inset 0 0 6px rgba(0,0,0,0.5);} .xcr::-webkit-scrollbar-thumb:window-inactive {background:rgba(204,0,0,.4);border:1px solid #ccc;} .navbar-default .navbar-nav>.active>a, .navbar-default .navbar-nav>.open>a { background-color:rgba(255,255,255,0.0);} .navbar-default .navbar-nav>.active>a, .navbar-default .navbar-nav>.active>a:focus, .navbar-default .navbar-nav>.active>a:hover { color: #9c27b0; background-color:rgba(255,255,255,0.0);} /***Navigation***/ .navbar-brand img { max-width: 100%; height: 50px; margin-top: -15px; } .navbar-inverse { background: #4D5061; border-bottom: 4px solid #9c27b0; color: #FFF; } .navbar-inverse .navbar-brand, .navbar-inverse .navbar-nav > li > a { text-shadow: none; color: #FFF; } .navbar-inverse .navbar-nav>.active>a, .navbar-inverse .navbar-nav>.open>a, .navbar-inverse .navbar-nav> ul >li, .navbar-inverse .navbar-nav>li.focus>a, .navbar-inverse .navbar-nav > .active > a:focus, .navbar-inverse .navbar-nav > .active > a:hover, .navbar-inverse .navbar-nav > .active >a:visited, .navbar-inverse .navbar-nav>li:hover>a:hover { background-image: #9c27b0; background: #9c27b0; background-color: #9c27b0!important; color: #FFF; -webkit-transition: all ease-in .3s; -o-transition: all ease-in .3s; -moz-transition: all ease-in .3s; -ms-transition: all ease-in .3s; transition: all ease-in .3s; } .dropdown-menu > li > a:focus, .dropdown-menu > li > a:hover { color: #FFF; text-decoration: none; background-color: #9c27b0; } .dropdown-menu >li >a {padding: 5px 20px;} .dropdown-menu > li > a:focus, .dropdown-menu > li > a:hover { margin-top: 0px; margin-bottom: 0px; color: #FFF; font-weight: 200; background-color: #9c27b0; background-image: none; background-repeat: none; -webkit-transition: all ease-in .3s; -o-transition: all ease-in .3s; -moz-transition: all ease-in .3s; -ms-transition: all ease-in .3s; transition: all ease-in .3s; } .iconSpecial { font-size: 30px; color: #4D5061; text-align: center; } .btn { border-radius: 0px; } .ripple{position:relative;overflow:hidden;transform:translate3d(0,0,0)}.ripple:after{content:"";display:block;position:absolute;width:100%;height:100%;top:0;left:0;pointer-events:none;background-image:radial-gradient(circle,#000 10%,transparent 10.01%);background-repeat:no-repeat;background-position:50%;transform:scale(10,10);opacity:0;transition:transform .5s,opacity 1s}.ripple:active:after{transform:scale(0,0);opacity:.2;transition:0s} ul.nav.navbar-nav.navbar-right:last-child { margin-right: 50px; } .navbar-static-top{ position: relative; margin-top: 50px; background: rgba(204,51,153,0.60); box-shadow: 0px -2px 8px 0px #333333; color:#ffffff; border-bottom:0; } .navbar-static-top .navbar-nav>li>a{color:#ffffff} .navbar-static-top .navbar-nav>li>a:hover { color: #9c27b0; background-color: #ffffff; -webkit-transition: all ease-in .3s; -o-transition: all ease-in .3s; -moz-transition: all ease-in .3s; -ms-transition: all ease-in .3s; transition: all ease-in .3s; } .navbar-static-top .navbar-brand { font-size: 14px; color: #ffffff; font-style: normal; font-weight: bolder; } .navbar-static-top .navbar-brand::after { content: ""; font-size: 20px; color: #4D5061; margin-left: 10px; font-style: normal; font-weight: lighter; } .navbar-static-top .dropdown-menu > li > a:focus, .dropdown-menu > li > a:hover { margin-top: 0px; margin-bottom: 0px; color: #ffffff; font-weight: 200; background-color: #9c27b0; background-image: none; background-repeat: none; -webkit-transition: all ease-in .3s; -o-transition: all ease-in .3s; -moz-transition: all ease-in .3s; -ms-transition: all ease-in .3s; transition: all ease-in .3s; } .animated { -webkit-animation-duration: 1s; animation-duration: 1s; -webkit-animation-fill-mode: both; animation-fill-mode: both; } @-webkit-keyframes fadeIn { 0% { opacity: 0; } 100% { opacity: 1; } } @keyframes fadeIn { 0% { opacity: 0; } 100% { opacity: 1; } } .fadeIn { -webkit-animation-name: fadeIn; animation-name: fadeIn; } @-webkit-keyframes fadeInDown { 0% { opacity: 0; -webkit-transform: translate3d(0, -100%, 0); transform: translate3d(0, -100%, 0); } 100% { opacity: 1; -webkit-transform: none; transform: none; } } @-webkit-keyframes flipInX { 0% { -webkit-transform: perspective(400px) rotate3d(1, 0, 0, 90deg); transform: perspective(400px) rotate3d(1, 0, 0, 90deg); -webkit-animation-timing-function: ease-in; animation-timing-function: ease-in; opacity: 0; } 40% { -webkit-transform: perspective(400px) rotate3d(1, 0, 0, -20deg); transform: perspective(400px) rotate3d(1, 0, 0, -20deg); -webkit-animation-timing-function: ease-in; animation-timing-function: ease-in; } 60% { -webkit-transform: perspective(400px) rotate3d(1, 0, 0, 10deg); transform: perspective(400px) rotate3d(1, 0, 0, 10deg); opacity: 1; } 80% { -webkit-transform: perspective(400px) rotate3d(1, 0, 0, -5deg); transform: perspective(400px) rotate3d(1, 0, 0, -5deg); } 100% { -webkit-transform: perspective(400px); transform: perspective(400px); } } @keyframes flipInX { 0% { -webkit-transform: perspective(400px) rotate3d(1, 0, 0, 90deg); transform: perspective(400px) rotate3d(1, 0, 0, 90deg); -webkit-animation-timing-function: ease-in; animation-timing-function: ease-in; opacity: 0; } 40% { -webkit-transform: perspective(400px) rotate3d(1, 0, 0, -20deg); transform: perspective(400px) rotate3d(1, 0, 0, -20deg); -webkit-animation-timing-function: ease-in; animation-timing-function: ease-in; } 60% { -webkit-transform: perspective(400px) rotate3d(1, 0, 0, 10deg); transform: perspective(400px) rotate3d(1, 0, 0, 10deg); opacity: 1; } 80% { -webkit-transform: perspective(400px) rotate3d(1, 0, 0, -5deg); transform: perspective(400px) rotate3d(1, 0, 0, -5deg); } 100% { -webkit-transform: perspective(400px); transform: perspective(400px); } } .flipInX { -webkit-backface-visibility: visible !important; backface-visibility: visible !important; -webkit-animation-name: flipInX; animation-name: flipInX; } @-webkit-keyframes flipInY { 0% { -webkit-transform: perspective(400px) rotate3d(0, 1, 0, 90deg); transform: perspective(400px) rotate3d(0, 1, 0, 90deg); -webkit-animation-timing-function: ease-in; animation-timing-function: ease-in; opacity: 0; } 40% { -webkit-transform: perspective(400px) rotate3d(0, 1, 0, -20deg); transform: perspective(400px) rotate3d(0, 1, 0, -20deg); -webkit-animation-timing-function: ease-in; animation-timing-function: ease-in; } 60% { -webkit-transform: perspective(400px) rotate3d(0, 1, 0, 10deg); transform: perspective(400px) rotate3d(0, 1, 0, 10deg); opacity: 1; } 80% { -webkit-transform: perspective(400px) rotate3d(0, 1, 0, -5deg); transform: perspective(400px) rotate3d(0, 1, 0, -5deg); } 100% { -webkit-transform: perspective(400px); transform: perspective(400px); } } #share-opt{ min-width: 250px; padding: 14px 14px 0; overflow:hidden; } #share-opt .help-block{ font-size:12px } #share-opt .bottom{ background-color:rgba(255,255,255,0.0); border-top:1px solid #ddd; clear:both; padding:14px; } #share-opt .social-buttons{ margin:12px 0 } #share-opt .social-buttons a{ width: 49%; } #share-opt .form-group { margin-bottom: 10px; } .btn-fb{ color: #fff; background-color:#3b5998; } .btn-fb:hover{ color: #fff; background-color:#496ebc } .btn-tw{ color: #fff; background-color:#55acee; } .btn-tw:hover{ color: #fff; background-color:#59b5fa; } @media(max-width:768px){ #share-opt{ background-color: transparent; color: #fff; } #share-opt .bottom{ background-color: inherit; border-top:0 none; } .iconSpecial { font-size: 20px; color: #fff; text-align: center; } .navbar-default .navbar-nav .open .dropdown-menu>li>a {color: #fff;} .navbar-default .navbar-nav .open .dropdown-menu>li>a:hover {color: #fff;background-color: #9c27b0;} #share-opt,.#share-opt label{display: inline-block; max-width: 100%; color: #ffffff; margin-bottom: 5px;font-weight: 700;}#share-opt .checkbox label, #share-opt .radio label {color: #ffffff;} #share-opt a{color:#cccccc;} #share-opt a:hover{color:#000;text-decoration:underline;} a.dropdown-toggle{display:block;width:100%;} }

Related: See More


Questions / Comments: