$(document).ready(function(){
$(".dropdown").click(
function() {
$('.dropdown-menu', this).not('.in .dropdown-menu').stop(true,true).slideToggle("600");
$(this).toggleClass('open');
}
);
});header .navbar-header{
position: relative;
z-index: 10;
left: 0;
right: 0;
}
header .nav-bottom{
box-shadow: inherit;
}
header .navbar-default{
color: #272727;
background-color: #000;
background-image: inherit;
box-shadow: inherit;
position: fixed;
padding: 11px 0;
height: 81px;
border-radius: inherit;
}
header .navbar-default .navbar-nav > li > a{
font-family: 'Open Sans', sans-serif;
text-transform: uppercase;
font-weight: 600;
}
header .nav > li > a{
padding: 6px 7px;
}
header .navbar-default .navbar-nav > .dropdown > a span{
color: #808080;
margin-left: 10px;
font-size: 28px;
}
header > nav > div > div > div > div.menu-derecho.hidden-xs > div > ul > li > a > span:hover{
color: #00ab84!important
}
header .navbar-default .navbar-brand{
color:#fff;
}
header .menu-large {
position: static !important;
}
header .megamenu{
width:100%;
}
header .megamenu> li > ul {
padding: 0;
margin: 0;
}
header .megamenu> li > ul > li {
list-style: none;
}
header .megamenu> li > ul > li > a {
display: block;
padding: 3px 0px 3px 20px;
clear: both;
font-weight: normal;
line-height: 1.428571429;
color: #333333;
white-space: normal;
margin: auto;
}
header .megamenu> li ul > li > a:hover,
header .megamenu> li ul > li > a:focus {
text-decoration: none;
color: #238491;
background-color: transparent;
}
header .megamenu > .caja-programa-redes ul > .logos-social > a:hover,
header .megamenu > .caja-programa-redes ul > .logos-social > a:focus {
text-decoration: none;
color: #238491;
background-color: #00a780;
}
header .megamenu.disabled > a,
header .megamenu.disabled > a:hover,
header .megamenu.disabled > a:focus {
color: #999999;
}
header .megamenu.disabled > a:hover,
header .megamenu.disabled > a:focus {
text-decoration: none;
background-color: transparent;
background-image: none;
filter: progid:DXImageTransform.Microsoft.gradient(enabled = false);
cursor: not-allowed;
}
header .megamenu.dropdown-header {
color: #428bca;
font-size: 18px;
}
header .nav-bottom .radio-online .navbar-collapse .play-stop{
float: left;
height: 50px;
width: 45px;
margin-right: 15px;
}
header .nav-bottom .radio-online .navbar-collapse .onda-desplegable{
float: left;
}
header .nav-bottom .radio-online .navbar-collapse {
cursor: pointer;
width: 409px;
}
.nav-bottom .menu-derecho .fa-search{
color: #5bb2c9;
font-size: 18px;
}
.navbar-default .navbar-nav > .dropdown > .dropdown-menu > .caja-titulo{
padding: 55px 0;
}
.navbar-default .navbar-nav > .dropdown > .dropdown-menu > .caja-de-que-va, .caja-programa-redes{
padding: 40px 20px 25px 20px;
}
.navbar-default .navbar-nav > .dropdown > .dropdown-menu > .caja-programa{
padding: 40px 50px;
}
.navbar-default .navbar-nav > .dropdown > .dropdown-menu > .caja-programa > ul > .titulo-del-programa {
color: #00ab84;
font-family: 'Titillium Web', sans-serif;
font-weight: 700;
font-size: 25px;
}
.navbar-default .navbar-nav > .dropdown > .dropdown-menu > .caja-programa > ul > .conductor-del-programa {
color: #fff;
font-family: 'Titillium Web', sans-serif;
font-weight: 500;
font-size:19px;
}
.navbar-default .navbar-nav > .dropdown > .dropdown-menu > .caja-programa > ul > .hora-del-programa {
color: #9a9a9a;
font-family: 'Titillium Web', sans-serif;
font-weight: 500;
font-size:14px;
margin-top: 10px;
}
.navbar-default .navbar-nav > .dropdown > .dropdown-menu > .caja-programa > ul >.hora-del-programa > .fa-clock-o{
font-size: 15px!important;
color: #9a9a9a!important;
margin-top: 3px!important;
}
.navbar-default .navbar-nav > .dropdown > .dropdown-menu > .caja-de-que-va > ul > .titulo-descripcion-del-programa{
color: #fff;
font-size: 18px;
font-family: 'Titillium Web', sans-serif;
font-weight: 600;
margin-bottom: 15px;
}
.navbar-default .navbar-nav > .dropdown > .dropdown-menu > .caja-de-que-va > ul > .descripcion-del-programa{
color: #fff;
font-family: 'Titillium Web', sans-serif;
font-weight: 500;
font-size: 14px;
}
header .megamenu> li > ul > li > .btn-mas-info-programa{
background-color: #00a780;
padding: 8px 20px;
color: #fff;
text-align: center;
margin-top: 20px;
font-family: 'Titillium Web', sans-serif;
font-weight: 600;
-webkit-transition: all .4s ease-in-out;
-moz-transition: all .4s ease-in-out;
transition: all .4s ease-in-out;
}
header .megamenu> li > ul > li > .btn-mas-info-programa:hover{
background-color: #2d2d2d;
color: #fff;
}
.navbar-default .navbar-nav > .dropdown > .dropdown-menu > .caja-programa-redes > ul > .titulo-redes{
color: #fff;
font-size: 18px;
font-family: 'Titillium Web', sans-serif;
font-weight: 600;
margin-bottom: 15px;
}
.navbar-default .navbar-nav > .dropdown > .dropdown-menu > .caja-programa-redes > ul > .titulo-redes-whatsapp{
color: #fff;
font-size: 15px;
font-family: 'Titillium Web', sans-serif;
font-weight: 600;
margin-bottom: 15px;
}
.navbar-default .navbar-nav > .dropdown > .dropdown-menu > .caja-programa-redes > ul > .logos-social {
display: inline-block;
padding: 5px 2px;
margin-bottom: 25px;
}
.navbar-default .navbar-nav > .dropdown > .dropdown-menu > .caja-programa-redes > ul > .logos-social a {
width: 39px;
height: 39px;
padding: 0;
background-image: url("http://qkstudiodemo.com/radiocantilo/html/images/cd-socials.svg");
background-repeat: no-repeat;
overflow: hidden;
text-indent: 100%;
white-space: nowrap;
border-radius: 50px;
border:1px solid #fff;
}
.navbar-default .navbar-nav > .dropdown > .dropdown-menu > .caja-programa-redes > ul > .logos-social a:hover {
background-color: #30ab83;
border:1px solid #30ab83;
}
.navbar-default .navbar-nav > .dropdown > .dropdown-menu > .caja-programa-redes > ul > .logo-facebook a {
background-position: -4px -3px;
}
.navbar-default .navbar-nav > .dropdown > .dropdown-menu > .caja-programa-redes > ul > .logo-twitter a {
background-position: -46px -3px;
}
.navbar-default .navbar-nav > .dropdown > .dropdown-menu > .caja-programa-redes > ul > .logo-instragram a {
background-position: -91px -4px;
}
.navbar-default .navbar-nav > .dropdown > .dropdown-menu > .caja-programa-redes > ul > .logo-vimeo a {
background-position: -136px -3px;
}
.navbar-default .navbar-nav > .dropdown > .dropdown-menu > .caja-programa-redes > ul > .numero-whatsapp a > .fa-whatsapp{
margin-top: 10px!important;
font-size: 20px!important;
margin-right: 8px!important;
}
header .megamenu> li > ul > li > .numero-whatsapp {
padding: 0;
color: #fff;
font-size: 18px;
margin: 0;
}
/*--------------------------------------------------*/
/*DESPLEGABLE MENU PRINCIPAL*/
.menu-large .dropdown-menu{
background-color: #1b1b1b;
border-radius: inherit;
}
.menu-large .megamenu .titulo-slogan{
font-family: 'Titillium Web', sans-serif;
font-weight: 500;
font-size: 19px;
color: #fff;
text-align: center;
}
.menu-large .megamenu .titulo-slogan span{
text-decoration: line-through;
font-weight: 500;
}
/*-----------------logos de sybila-------------------------- */
.menu-large .megamenu .logo-deplegable-innocenza a {
width: 124px;
height: 30px;
padding: 0;
background-image: url("http://qkstudiodemo.com/radiocantilo/html/images/logos/logo-inocenza.svg");
background-repeat: no-repeat;
overflow: hidden;
text-indent: 100%;
white-space: nowrap;
-webkit-transition: all .4s ease-in-out;
-moz-transition: all .4s ease-in-out;
transition: all .4s ease-in-out;
}
.menu-large .megamenu .logo-deplegable-sybyla a {
width: 125px;
height: 44px;
padding: 0;
background-image: url("../images/logos/logo-sybila.svg");
background-repeat: no-repeat;
overflow: hidden;
text-indent: 100%;
white-space: nowrap;
-webkit-transition: all .4s ease-in-out;
-moz-transition: all .4s ease-in-out;
transition: all .4s ease-in-out;
}
.menu-large .megamenu .logo-deplegable-sybpro a {
width: 124px;
height: 35px;
padding: 0;
background-image: url("../images/logos/logo-sybtv.svg");
background-repeat: no-repeat;
overflow: hidden;
text-indent: 100%;
white-space: nowrap;
-webkit-transition: all .4s ease-in-out;
-moz-transition: all .4s ease-in-out;
transition: all .4s ease-in-out;
}
/*---------HOVER----*/
.menu-large .megamenu .logo-innocenza a:hover {
background-position: 0px 0px;
background-image: url("../images/logos/logo-inocenza-hover.svg");
background-repeat: no-repeat;
}
.menu-large .megamenu .logo-sybyla a:hover {
background-position: 0px 0px;
background-image: url("../images/logos/logo-sybila-hover.svg");
background-repeat: no-repeat;
}
.menu-large .megamenu .logo-sybpro a:hover {
background-position: 0px 0px;
background-image: url("../images/logos/logo-sybtv-hover.svg");
background-repeat: no-repeat;
}
/*-------------------------------------------------------*/
.navbar-default .navbar-nav > .dropdown > .dropdown-menu > .caja-titulo ul li{
list-style: none;
}
.navbar-default .navbar-nav > li > a {
display: inline-block;
vertical-align: middle;
-webkit-transform: translateZ(0);
transform: translateZ(0);
box-shadow: 0 0 1px rgba(0, 0, 0, 0);
-webkit-backface-visibility: hidden;
backface-visibility: hidden;
-moz-osx-font-smoothing: grayscale;
position: relative;
overflow: hidden;
}
.navbar-default .navbar-nav > li > a:before {
content: "";
position: absolute;
z-index: -1;
left: 0;
right: 0;
bottom: 0;
height: 4px;
-webkit-transform: translateY(4px);
transform: translateY(4px);
-webkit-transition-property: transform;
transition-property: transform;
-webkit-transition-duration: 0.3s;
transition-duration: 0.3s;
-webkit-transition-timing-function: ease-out;
transition-timing-function: ease-out;
}
.navbar-default .navbar-nav > li > a:hover:before, .navbar-default .navbar-nav > li > a:focus:before, .navbar-default .navbar-nav > li > a:active:before {
-webkit-transform: translateY(0);
transform: translateY(0);
color: red;
background-color: #00ab84;
}
.navbar-default .navbar-nav > .open > a, .navbar-default .navbar-nav > .active > a{
background-image:inherit;
}
.navbar-default .navbar-nav > .open > a, .navbar-default .navbar-nav > .open > a:hover, .navbar-default .navbar-nav > .open > a:focus{
box-shadow:inherit;
background-color: transparent;
}
.menu-color{
background-color: #f2f9fb;
}
.menu-color-historia{
background-color: #e5e4e9;
}
.navbar-default{
border-color: transparent;
margin-bottom: 0;
}
/*MENU RADIO ONLINE*/
#play, #pause {
background: transparent;
position: relative;
display: block;
margin-top: 5px
}
#play {
width: 0;
height: 0;
position: relative;
content: "";
}
#pause:before {
content: "";
top: 10px;
left: 25px;
}
#pause:after {
content: "";
top: 10px;
right: 33px;
}
header .nav-bottom .menu-principal .logo-cantilo .logo-principal{
float: left;
margin-left: 10px;
margin-right: 15px;
}
header .nav-bottom .menu-principal .play-stop-mobile{
float: left;
width: 49px;
}
header .nav-bottom .menu-principal .onda-mobile{
float: left;
}
header .nav-bottom .menu-principal{
padding: 0 33px;
margin-top: 6px;
}
header .nav-bottom .menu-principal .logo-cantilo{
float: left;
}
header .nav-bottom .radio-online .navbar-collapse .navbar-nav .menu-large i{
color: #fff;
font-size: 17px;
float: left;
margin-right: 5px;
}
header .nav-bottom .radio-online .navbar-collapse .navbar-nav .menu-large a:hover{
color: red
}
header .nav-bottom .radio-online .navbar-collapse .navbar-nav .menu-large .fa-angle-down{
float: right;
font-size: 22px;
margin-left: 8px;
position: relative;
bottom: 4px;
}
header .nav-bottom .menu-derecho{
float: left;
width: 387px;
}
header .nav-bottom .menu-derecho .navbar-collapse{
float: right;
}
header .nav-bottom .radio-online{
float: right;
}
header .nav-bottom .radio-online .navbar-collapse .navbar-nav .menu-large h5{
color: #fff;
margin: 0;
margin-top: 1px;
font-family: 'Titillium Web', sans-serif;
}
header .nav-bottom .radio-online .navbar-collapse .navbar-nav .menu-large h3{
color: #00ab84;
font-family: 'Titillium Web', sans-serif;
font-weight: 700;
margin: 0;
float: left;
font-size: 20px;
clear: both;
}
header > nav > div > div > div > div.radio-online > div > ul > li.dropdown.menu-large > a > h3:hover{
color: #fff!important;
}
header > nav > div > div > div > div.radio-online > div > ul > li.dropdown.menu-large > a > i:hover{
color: green!important;
}
header .nav-bottom .radio-online .navbar-collapse .navbar-nav .menu-large h6{
color: #fff;
text-align: right;
clear: both;
}
header > nav > div > div > div > div.radio-online > div > ul > li.dropdown.menu-large > a > h6:hover{
color: #e2b739!important
}
header .nav-bottom .radio-online .navbar-collapse .navbar-nav .onda-de-radio{
margin-left: 15px;
}
.cd-header {
position: relative;
top: 0;
left: 0;
background: rgba(0, 0, 0, 0.95);
height: 65px;
z-index: 3;
box-shadow: 0 1px 2px rgba(0, 0, 0, 0.3);
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
}
.cd-primary-nav-trigger{
float: left;
margin-top: 10px;
}
@media only screen and (min-width: 768px) {
.cd-header {
height: 80px;
background: transparent;
box-shadow: none;
margin: auto;
}
}
@media only screen and (min-width: 1170px) {
.cd-header {
-webkit-transition: background-color 0.3s;
-moz-transition: background-color 0.3s;
transition: background-color 0.3s;
/* Force Hardware Acceleration in WebKit */
-webkit-transform: translate3d(0, 0, 0);
-moz-transform: translate3d(0, 0, 0);
-ms-transform: translate3d(0, 0, 0);
-o-transform: translate3d(0, 0, 0);
transform: translate3d(0, 0, 0);
-webkit-backface-visibility: hidden;
backface-visibility: hidden;
}
.cd-header.is-fixed {
position: fixed;
top: -80px;
background-color: rgba(0, 0, 0, 0.96);
-webkit-transition: -webkit-transform 0.3s;
-moz-transition: -moz-transform 0.3s;
transition: transform 0.3s;
}<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css"
<header>
<nav class="navbar navbar-default navbar-header cd-header" role="navigation">
<div class="nav-bottom">
<div class="container">
<div class="row">
<div class="menu-logo">
<div class="navbar-header">
<div class="menu-principal">
<div class="logo-cantilo" style="float: left;">
<a class="cd-primary-nav-trigger" href="#0">
<span class="cd-menu-text"></span>
<span class="cd-menu-icon"></span>
</a>
<a href="index.html">
<img class="img-responsive logo-principal" src="http://qkstudiodemo.com/radiocantilo/html/images/logo-cantilo.svg" alt="radio cantilo">
</a>
</div>
<div class="play-stop-mobile hidden-sm hidden-md hidden-lg">
<a href="#" id="play">
<img src="http://qkstudiodemo.com/radiocantilo/html/images/play.svg" alt="icono play">
</a>
<a href="#" id="pause" style="display: none;">
<img src="http://qkstudiodemo.com/radiocantilo/html/images/pause.svg" alt="icono pause">
</a>
</div>
<div class="onda-mobile hidden-sm hidden-md hidden-lg">
<img class="img-responsive onda-de-radio" src="http://qkstudiodemo.com/radiocantilo/html/images/onda-radial-mobile.png">
</div>
</div>
</div>
</div>
<div class="menu-derecho hidden-xs">
<div class="navbar-collapse collapse">
<ul class="nav navbar-nav">
<li class="dropdown menu-large">
<a href="#" class="dropdown-toggle" data-toggle="dropdown">
<img src="http://qkstudiodemo.com/radiocantilo/html/images/logo-sybila.png">
<span class="fa fa-angle-down"></span>
</a>
<ul class="dropdown-menu megamenu row">
<li class="col-sm-4 col-md-4 col-lg-3 col-lg-offset-1 caja-titulo">
<ul>
<li class="titulo-slogan">NUESTRAS <span>EMPRESAS</span> CREACIONES</li>
</ul>
</li>
<li class="col-sm-3 col-md-2 col-md-offset-1 col-lg-2 caja-titulo">
<ul>
<li class="logo-deplegable-innocenza logo-innocenza">
<a href="#0"></a>
</li>
</ul>
</li>
<li class="col-sm-2 col-md-2 col-lg-2 caja-titulo">
<ul>
<li class="logo-deplegable-sybyla logo-sybyla">
<a href="#0"></a>
</li>
</ul>
</li>
<li class="col-sm-3 col-md-2 col-lg-2 caja-titulo">
<ul>
<li class="logo-deplegable-sybpro logo-sybpro">
<a href="#0"></a>
</li>
</ul>
</li>
<li class="hidden-xs hidden-sm col-md-1 col-lg-3">
</li>
</ul>
</li>
</ul>
</div>
</div>
<div class="radio-online">
<div class="navbar-collapse collapse">
<div class="play-stop">
<a href="#" id="play">
<img src="http://qkstudiodemo.com/radiocantilo/html/images/play.svg" alt="icono play">
</a>
<a href="#" id="pause" style="display: none;">
<img src="http://qkstudiodemo.com/radiocantilo/html/images/pause.svg" alt="icono pause">
</a>
</div>
<ul class="nav navbar-nav onda-desplegable">
<li class="dropdown menu-large">
<a href="#" style=" padding: 0">
<span style="float: right;clear: both; width: 150px;">
<i class="fa fa-headphones" aria-hidden="true"></i>
<h5>Estás escuchando</h5>
</span>
<h3>Almacén de discos</h3>
<h6>15 a 18hs.<i class="fa fa-angle-down"></i></h6></a>
<ul class="dropdown-menu megamenu row">
<li class="col-sm-4 col-md-2 col-lg-3 caja-programa">
<ul>
<li class="titulo-del-programa">Almacén de discos</li>
<li class="conductor-del-programa">Claudio “BB” Sanzo</li>
<li class="hora-del-programa"><i class="fa fa-clock-o" aria-hidden="true"></i>Lunes a Viernes de 15 a 18hs.</li>
</ul>
</li>
<li class="col-sm-4 col-md-3 col-lg-2 caja-de-que-va">
<ul>
<li class="titulo-descripcion-del-programa">DE QUÉ VA?</li>
<li class="descripcion-del-programa">Phasellus at mi finibus, tempor odio at, facilisis nibh. Vivamus eget diam sollicitudin, commodo orci porta, congue ante. In eget lacus nisl. Nunc placerat finibus elementum. </li>
<li><a href="" class="btn-mas-info-programa">MÁS INFO</a></li>
</ul>
</li>
<li class="col-sm-4 col-md-3 col-lg-2 caja-programa-redes">
<ul>
<li class="titulo-redes">ENCONTRALO EN</li>
<li class="logos-social logo-facebook"><a href="#0">Facebook</a></li>
<li class="logos-social logo-twitter"><a href="#0">Twitter</a></li>
<li class="logos-social logo-instragram"><a href="#0">Instagram</a></li>
<li class="logos-social logo-vimeo"><a href="#0">vimeo</a></li>
<li class="titulo-redes-whatsapp">WHATSAPEALO AHORA AL</li>
<li><a href="" class="numero-whatsapp"><i class="fa fa-whatsapp" aria-hidden="true"></i>(221) 4722065</a></li>
</ul>
</li>
<li class="hidden-sm col-md-4 col-lg-5">
<ul>
<li class="logo-deplegable-sybpro logo-sybpro">
<img class="img-responsive" src="http://qkstudiodemo.com/radiocantilo/html/images/claudio-b-sanzo.jpg" alt="claudio-b-sanzo">
</li>
</ul>
</li>
</ul>
</li>
<li class="hidden-sm">
<img class="img-responsive onda-de-radio" src="http://qkstudiodemo.com/radiocantilo/html/images/onda-radial.png">
</li>
</ul>
</div>
</div>
</div>
</div>
</div>
</nav>
<div>
</div>
</header>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js" integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa" crossorigin="anonymous"></script>Hello, a fellow I pass a work that is done in bootstrap and it turns out that it has a main menu where it asks me to show as active a button that displays a content. This button is the one on the right side where you have a play and you say you are listening to the disk store. The problem that you write about is that when the href is active and the content is displayed it should stay below a green line and when leaving the active state it should go away. What it is doing to me now is that when I click the line it appears, it unfolds it stays but when I leave the drop-down that I return to click the green line remains. I do not know if it is understood. I have attached the code to look at this example. I leave the example of the code example walking here attached as the stack does not allow more than 30,000 characters