Bootstrap Snippet Double Top Navbar using HTML CSS Bootstrap

/*alteracoes da barra de navegacao principal*/ .navbar-brand img { max-width: 100%; height: 50px; margin-top: -15px; } .navbar-inverse { background: #4D5061; border-bottom: 4px solid #60B078; 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: #60B078; background: #60B078; background-color: #60B078!important;/*necessario para forcar a regra do bootstrap que tem 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: #60B078; } .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: #60B078; 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; } .text-dark {color: #333;} .text-light{color: #eee;} .text16 {font-size: 16px;} ul.nav.navbar-nav.navbar-right:last-child { margin-right: 50px; } /*MENU DE CONTEXTO*/ .navbar-static-top{ position: relative; margin-top: 50px; background: #f1ecec; box-shadow: 0px -2px 8px 0px #333333; } .navbar-static-top .navbar-nav>li>a{color:#4D5061} .navbar-static-top .navbar-nav>li>a:hover { color: #4D5061; background-color: #dadada; -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: #4D5061; 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: #4D5061; font-weight: 200; background-color: #dadada; 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); } } #login-dp{ min-width: 250px; padding: 14px 14px 0; overflow:hidden; background-color:rgba(255,255,255,.8); } #login-dp .help-block{ font-size:12px } #login-dp .bottom{ background-color:rgba(255,255,255,.8); border-top:1px solid #ddd; clear:both; padding:14px; } #login-dp .social-buttons{ margin:12px 0 } #login-dp .social-buttons a{ width: 49%; } #login-dp .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){ #login-dp{ background-color: inherit; color: #fff; } #login-dp .bottom{ background-color: inherit; border-top:0 none; } }

"Double Top Navbar"
Bootstrap 3.3.0 Snippet by koushikbasu

Related: See More

Questions / Comments:

"Double Top Navbar" Bootstrap 3.3.0 Snippet by koushikbasu

Related: See More

Questions / Comments:

"Double Top Navbar"
Bootstrap 3.3.0 Snippet by koushikbasu