0

estoy haciendo una pagina web de una sola pagina conayuda de bootstrap, el menu funciona bien pero al hacer clic en alguna de sus opciones hace un parpadeo, cabe mencionar que esto no lo hacia antes de que metiera:

data-toggle="collapse" data-target=".navbar-toggleable-sm"

dicho codigo lo ingrese ya que al tener la pagina en modo movil, al abrir menu y seleccionar una opcion me dirigia a la opción seleccionada pero no se cerraba el menu, una vez que ingresé el codigo mencionado se soluciono mi problema pero surgio el del parpadeo unica y exclusivamente cuando la pagina se encuentra en modo escritorio. cabe mencionar que si quito el codigo antes mencionado se quita el parpadeo pero en modo movil ya no se cierra o colapsa el menu. ¿Alguien me podría ayudar...?

<style>
.navbar-fixed-top {
  background: rgba(0, 0, 0, 0.55);
  }

.navbar-light .navbar-brand { 
  color:rgb(253,253,253);
  font-size:1.3rem;
  text-transform:uppercase;
  margin-bottom: -30px;
  margin-top: -5px;
  }

.navbar-light .navbar-brand:focus, .navbar-light .navbar-brand:hover {
  color: rgba(255, 255, 255, 0.98); }

.navbar-toggler {
  font-size: 1.6rem;
  color: #fff !important;
  }

.navbar-light .navbar-nav .nav-link {
  color: white;
  text-align: center;
  padding: .4rem;
  text-transform: uppercase;
  margin-top: 10px;
  }

.navbar-light .navbar-nav .open > .nav-link, .navbar-light .navbar-nav .open > .nav-link:focus, .navbar-light .navbar-nav .open > .nav-link:hover, .navbar-light .navbar-nav .active > .nav-link, .navbar-light .navbar-nav .active > .nav-link:focus, .navbar-light .navbar-nav .active > .nav-link:hover, .navbar-light .navbar-nav .nav-link.open, .navbar-light .navbar-nav .nav-link.open:focus, .navbar-light .navbar-nav .nav-link.open:hover, .navbar-light .navbar-nav .nav-link.active, .navbar-light .navbar-nav .nav-link.active:focus, .navbar-light .navbar-nav .nav-link.active:hover {
  color: rgba(255, 255, 255, 0.95);
  background: #F05F40; }

.navbar-light .navbar-nav .nav-link:focus, .navbar-light .navbar-nav .nav-link:hover {
  color: white;
  background: #F05F40; }
  
#menuprincipal {
  clear: both; }
  </style>
<!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">
	<meta http-equiv="x-ua-compatible" content="ie-edge">

    <!-- Bootstrap CSS -->
    <link rel="stylesheet" href="css/bootstrap.css">
	<!-- carga de fuentes de font awesome-->
	<link rel="stylesheet" href="css/font-awesome.min.css">
	<!-- carga de estilos css personalizados-->
	<link rel="stylesheet" href="css/estilos.css">
	<!-- fontawesome -->
	<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.7.1/css/all.css" integrity="sha384-fnmOCqbTlWIlj8LyTjo7mOUStjsKC4pOpQbqyi7RrhN7udi9RwhKkMHpvLbHG9Sr" crossorigin="anonymous">
    <!-- animar al scrollear -->
	<link rel="stylesheet" href="css/animate.css">
	<!-- iconos de contacto -->
	<link href="https://stackpath.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet">
	<!-- para carrusel de info contacto -->
	<!--<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css"> -->
	<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/owl-carousel/1.3.3/owl.carousel.min.css">
	<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/owl-carousel/1.3.3/owl.theme.min.css">
	<title>MADE-IN-SYSTEM</title>
  </head>
  <body>
     
	
    <section class="bienvenidos" id="inicio">
	<header class="encabezado">
	<nav class="navbar navbar-light navbar-fixed-top">
	<div class="container">
  <button class="navbar-toggler hidden-md-up float-xs-right" type="button" data-toggle="collapse" data-target="#menuprincipal">
    &#9776;
  </button>
  <a class="navbar-brand" href="#">
  <img src="images/oflogo.PNG" alt="Nosotros" width="120" class="img-fluid mx-auto mb-2">MADE-IN-SYSTEMS</a>
  <div class="collapse navbar-toggleable-sm float-md-right" id="menuprincipal">
  
    <ul class="nav navbar-nav">
		<li class="nav-item active">
        <a class="nav-link" href="#inicio" data-toggle="collapse" data-target=".navbar-toggleable-sm">Inicio</a>
      </li>
	  
      <li class="nav-item">
        <a class="nav-link" href="#nosotros" data-toggle="collapse" data-target=".navbar-toggleable-sm">Nosotros</a> <!--data-toggle="collapse" data-target=".navbar-toggleable-sm" hace que el navbar se desaparezca cuando seleccionamos una opcion   -->
      </li>
	  
      <li class="nav-item">
        <a class="nav-link" href="#servicios" data-toggle="collapse" data-target=".navbar-toggleable-sm">Servicios</a>
      </li>
	  
	  <li class="nav-item">
        <a class="nav-link" href="#extras" data-toggle="collapse" data-target=".navbar-toggleable-sm">Extras</a>
      </li>
	  
	  <li class="nav-item">
        <a class="nav-link" href="#contacto" data-toggle="collapse" data-target=".navbar-toggleable-sm">Contacto</a>
      </li>
	  
    </ul>
  </div>
</nav>
	
	</div>
	</header>
  </body>

2
  • 1
    Con tu código no puedo validar el problema del parpadeo, pero puedo ver dos cosas: primero tienes algunos contenedores sin cerrar y otros que cierran pero no tienen apertura (a lo mejor un error de copy/paste) y lo segundo, aunque no es habitual usar clases en un data-target (yo prefiero usar ID's), estás usando una clase de BS 4.0 beta navbar-toggleable-sm que en BS 4.3.1 se renombró a navbar-expand-sm. Revisa eso y nos cuentas Commented el 11 mar. 2019 a las 13:40
  • a mi me pasa lo mismo y me gustaría saber si pudiste solucionarlo y como?
    – user157575
    Commented el 6 feb. 2020 a las 14:26

1 respuesta 1

0

Tienes muchas etiquetas que no estan cerradas y estan mal posicionadas.

.navbar-fixed-top {
  background: rgba(0, 0, 0, 0.55);
  }

.navbar-light .navbar-brand { 
  color:rgb(253,253,253);
  font-size:1.3rem;
  text-transform:uppercase;
  margin-bottom: -30px;
  margin-top: -5px;
  }

.navbar-light .navbar-brand:focus, .navbar-light .navbar-brand:hover {
  color: rgba(255, 255, 255, 0.98); }

.navbar-toggler {
  font-size: 1.6rem;
  color: #fff !important;
  }

.navbar-light .navbar-nav .nav-link {
  color: white;
  text-align: center;
  padding: .4rem;
  text-transform: uppercase;
  margin-top: 10px;
  }

.navbar-light .navbar-nav .open > .nav-link, .navbar-light .navbar-nav .open > .nav-link:focus, .navbar-light .navbar-nav .open > .nav-link:hover, .navbar-light .navbar-nav .active > .nav-link, .navbar-light .navbar-nav .active > .nav-link:focus, .navbar-light .navbar-nav .active > .nav-link:hover, .navbar-light .navbar-nav .nav-link.open, .navbar-light .navbar-nav .nav-link.open:focus, .navbar-light .navbar-nav .nav-link.open:hover, .navbar-light .navbar-nav .nav-link.active, .navbar-light .navbar-nav .nav-link.active:focus, .navbar-light .navbar-nav .nav-link.active:hover {
  color: rgba(255, 255, 255, 0.95);
  background: #F05F40; }

.navbar-light .navbar-nav .nav-link:focus, .navbar-light .navbar-nav .nav-link:hover {
  color: white;
  background: #F05F40; }
  
#menuprincipal {
  clear: both; }
<!doctype html>
<html lang="en">
  <head>
    <!-- Required meta tags -->
   <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css" integrity="sha384-Vkoo8x4CGsO3+Hhxv8T/Q5PaXtkKtu6ug5TOeNV6gBiFeWPGFN9MuhOf23Q9Ifjh" crossorigin="anonymous">
   <script src="https://code.jquery.com/jquery-3.4.1.slim.min.js" integrity="sha384-J6qa4849blE2+poT4WnyKhv5vZF5SrPo0iEjwBvKU7imGFAV0wwj1yYfoRSJoZ+n" crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/umd/popper.min.js" integrity="sha384-Q6E9RHvbIyZFJoft+2mJbHaEWldlvI9IOYy5n3zV9zzTtmI3UksdQRVvoxMfooAo" crossorigin="anonymous"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/js/bootstrap.min.js" integrity="sha384-wfSDF2E50Y2D1uUdj0O3uMBJnjuUD4Ih7YwaYd1iqfktj0Uod8GCExl3Og8ifwB6" crossorigin="anonymous"></script>
	<title>MADE-IN-SYSTEM</title>
    <style>
    .navbar-fixed-top {
  background: rgba(0, 0, 0, 0.55);
  }

.navbar-light .navbar-brand { 
  color:rgb(253,253,253);
  font-size:1.3rem;
  text-transform:uppercase;
  margin-bottom: -30px;
  margin-top: -5px;
  }

.navbar-light .navbar-brand:focus, .navbar-light .navbar-brand:hover {
  color: rgba(255, 255, 255, 0.98); }

.navbar-toggler {
  font-size: 1.6rem;
  color: #fff !important;
  }

.navbar-light .navbar-nav .nav-link {
  color: white;
  text-align: center;
  padding: .4rem;
  text-transform: uppercase;
  margin-top: 10px;
  }

.navbar-light .navbar-nav .open > .nav-link, .navbar-light .navbar-nav .open > .nav-link:focus, .navbar-light .navbar-nav .open > .nav-link:hover, .navbar-light .navbar-nav .active > .nav-link, .navbar-light .navbar-nav .active > .nav-link:focus, .navbar-light .navbar-nav .active > .nav-link:hover, .navbar-light .navbar-nav .nav-link.open, .navbar-light .navbar-nav .nav-link.open:focus, .navbar-light .navbar-nav .nav-link.open:hover, .navbar-light .navbar-nav .nav-link.active, .navbar-light .navbar-nav .nav-link.active:focus, .navbar-light .navbar-nav .nav-link.active:hover {
  color: rgba(255, 255, 255, 0.95);
  background: #F05F40; }

.navbar-light .navbar-nav .nav-link:focus, .navbar-light .navbar-nav .nav-link:hover {
  color: white;
  background: #F05F40; }
  
#menuprincipal {
  clear: both; }
    
    </style>
  </head>
  <body>
     
	
    <section class="bienvenidos" id="inicio">
	<header class="encabezado">
	<nav class="navbar navbar-light navbar-fixed-top">
	<div class="container">
  <button class="navbar-toggler hidden-md-up float-xs-right" type="button" data-toggle="collapse" data-target="#menuprincipal">
    &#9776;
  </button>
  <a class="navbar-brand" href="#">
  <img src="images/oflogo.PNG" alt="Nosotros" width="120" class="img-fluid mx-auto mb-2">MADE-IN-SYSTEMS</a>
  <div class="collapse navbar-toggleable-sm float-md-right" id="menuprincipal">
  
    <ul class="nav navbar-nav">
		<li class="nav-item active">
        <a class="nav-link" href="#inicio" data-toggle="collapse" data-target=".navbar-toggleable-sm">Inicio</a>
      </li>
	  
      <li class="nav-item">
        <a class="nav-link" href="#nosotros" data-toggle="collapse" data-target=".navbar-toggleable-sm">Nosotros</a> <!--data-toggle="collapse" data-target=".navbar-toggleable-sm" hace que el navbar se desaparezca cuando seleccionamos una opcion   -->
      </li>
	  
      <li class="nav-item">
        <a class="nav-link" href="#servicios" data-toggle="collapse" data-target=".navbar-toggleable-sm">Servicios</a>
      </li>
	  
	  <li class="nav-item">
        <a class="nav-link" href="#extras" data-toggle="collapse" data-target=".navbar-toggleable-sm">Extras</a>
      </li>
	  
	  <li class="nav-item">
        <a class="nav-link" href="#contacto" data-toggle="collapse" data-target=".navbar-toggleable-sm">Contacto</a>
      </li>
	  
    </ul>
    </div>
  </div> 
    </nav>
    </header>
    </section>
  </body>
  </html>

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.