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">
☰
</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>
data-target
(yo prefiero usar ID's), estás usando una clase de BS 4.0 betanavbar-toggleable-sm
que en BS 4.3.1 se renombró anavbar-expand-sm
. Revisa eso y nos cuentas