<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="https://pbs.twimg.com/profile_images/840128773055963136/iSuZ65qm_400x400.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%;}
}
