0

Tengo esto

/*========== ADD NAV BACKGROUND ON CLICK ==========*/

$(document).ready(function () { //when document loads completely.
  $('#hamburguer').click(function() {
    $(this).addClass('solid');
  });
});
/*============ NAVIGATION ============*/
.navbar {
  padding: 0.7rem 1rem;
  text-transform: uppercase;
  font-size: 1rem;
  font-weight: 700;
  letter-spacing: 0.1rem;
  transition: background-color 0.5s ease 0s;
}

.navbar-brand img {
  height: 2rem;
}

.svg-inline--fa.fa-w-14{
  color: #FFF;
  font-size: 1.6rem;
}

button:focus {
outline: 1px dotted;
outline: 5px auto -webkit-focusring-color;
}

.navbar-nav li {
  padding-right: 0.8rem;
  display: block;
  margin: 0 auto;
}

.navbar-nav .nav-link {
  color: #FFF;
  padding-top: 0.8rem;
}

.navbar-nav .nav-link.active,.navbar-nav .nav-link:hover{
  color: #1EBBA3;
}

.navbar.solid {
  background: rgba(0, 0, 0, 0.7)!important;
  transition: background-color 1s ease 0s;
}
<nav class="navbar navbar-expand-lg fixed-top">
      <div class="container-fluid">
        <a class="navbar-brand" href="#"><img src="img/nuno.png"></a>
        <button id="hamburguer" class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarResponsive">
          <span class="custom-toggler-icon"><i class="fas fa-bars"></i></span>
        </button>
        <div class="collapse navbar-collapse" id="navbarResponsive">
          <ul class="navbar-nav ml-auto">
            <li class="nav-item">
              <a href="#home" class="nav-link">HOME</a>
            </li>
            <li class="nav-item">
              <a href="#features" class="nav-link">FEATURES</a>
            </li>
            <li class="nav-item">
              <a href="#portfolio" class="nav-link">PORTFOLIO</a>
            </li>
            <li class="nav-item">
              <a href="#pricing" class="nav-link">PRICING</a>
            </li>
            <li class="nav-item">
              <a href="#team" class="nav-link">TEAM</a>
            </li>
            <li class="nav-item">
              <a href="#skills" class="nav-link">SKILLS</a>
            </li>
            <li class="nav-item">
              <a href="#clients" class="nav-link">CLIENTS</a>
            </li>
            <li class="nav-item">
              <a href="#contact" class="nav-link">CONTACT</a>
            </li>
          </ul>
        </div>
      </div>
    </nav>


Es asi ya lo resolvi, mil gracias por tomarse el tiempo.

/*========== ADD NAV BACKGROUND ON CLICK ==========*/

$(document).ready(function () { //when document loads completely.
  $('#hamburguer').click(function() {
    $('.navbar').addClass('solid');
  });
});

10
  • Y cual es el problema?
    – IvanS95
    Commented el 22 mar. 2019 a las 20:29
  • no se agrega el background al hacer click :( Commented el 22 mar. 2019 a las 20:32
  • Podrias primero agregar el CSS necesario para que tu menu se vea igual que en tu pagina? Tienes algun error en consola?
    – IvanS95
    Commented el 22 mar. 2019 a las 20:32
  • ok si, ya lo edite :) Commented el 22 mar. 2019 a las 20:35
  • Agregalo en el mismo fragmento, no en uno aparte, asi podemos correr el codigo y replicar el menu
    – IvanS95
    Commented el 22 mar. 2019 a las 20:36

2 respuestas 2

0

Siguiendo tu ejemplo sería algo así:

$(document).ready(function () {
  $('#hamburguer').click(function() {
    $(.navbar.navbar-expand-lg.fixed-top).addClass('solid');
  });
});

.solid {
  background: rgba(0, 0, 0, 0.7)!important;
  transition: background-color 1s ease 0s;
}

Solo debes cambiar el selector que usaste $(this) por uno que realmente seleccione tu menú, como por ejemplo: $(.navbar.navbar-expand-lg.fixed-top)

0

Saludos podrias aplicarlo asi:

Actualizado a Bootstrap4

$(document).ready(function () { //when document loads completely.
  $('#btnCollapse').click(function() {
    $('#navbarTogglerDemo03').css('background-color','yellow');
  });
});
<!doctype html>
<html lang="en">
  <head>
    <!-- Required meta tags -->
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">

    <!-- Bootstrap CSS -->
    <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">

    <title>Hello, world!</title>
  </head>
  <body>




<nav class="navbar navbar-expand-lg navbar-light bg-light">
  <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarTogglerDemo03" aria-controls="navbarTogglerDemo03" aria-expanded="false" aria-label="Toggle navigation" id="btnCollapse">
    <span class="navbar-toggler-icon"></span>
  </button>
  <a class="navbar-brand" href="#">Navbar</a>

  <div class="collapse navbar-collapse" id="navbarTogglerDemo03">
    <ul class="navbar-nav mr-auto mt-2 mt-lg-0">
      <li class="nav-item active">
        <a class="nav-link" href="#">Home <span class="sr-only">(current)</span></a>
      </li>
      <li class="nav-item">
        <a class="nav-link" href="#">Link</a>
      </li>
      <li class="nav-item">
        <a class="nav-link disabled" href="#" tabindex="-1" aria-disabled="true">Disabled</a>
      </li>
    </ul>
  </div>
</nav>


    <!-- Optional JavaScript -->
    <!-- jQuery first, then Popper.js, then Bootstrap JS -->
    <script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js" integrity="sha384-UO2eT0CpHqdSJQ6hJty5KVphtPhzWj9WO1clHTMGa3JDZwrnQq4sF86dIHNDz0W1" crossorigin="anonymous"></script>
    <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js" integrity="sha384-JjSmVgyd0p3pXB1rRibZUAYoIIy6OrQ6VrjIEaFf/nJGzIxFDsf4x0xIM+B07jRM" crossorigin="anonymous"></script>
  </body>
</html>

Si te fijas he colocado 'ID' al button que es el que ejecuta el evento de mostrar la lista de tu menu y aplico el estilo con jquery..!!

2
  • 1
    OP no ha aclaro siquiera cual version de Bootstrap esta usando; la cual a juzgar por su codigo, es Bootstrap 4, no la 3 que usas; creo que es buena la ayuda con la respuesta pero tambien creo que es mejor que primero logre formular la pregunta adecuadamente y con la informacion necesaria
    – IvanS95
    Commented el 22 mar. 2019 a las 20:42
  • si es bootstrap4 Commented el 22 mar. 2019 a las 20:46

Tu Respuesta

By clicking “Publica tu respuesta”, you agree to our terms of service and acknowledge you have read our privacy policy.

¿No es la respuesta que buscas? Examina otras preguntas con la etiqueta o formula tu propia pregunta.