1

Un gran saludo.

Tengo una dificultad, ya cree, mi menú en Bootstrap 4, sin embargo ahora deseo que quede fijo, que se desplace con la pagina web,y no he logrado encontrar la forma de hacerlointroducir el código aquí, puesto que ya lo cree.

Gracias, les comparto.

/*MENU*/

.topnav {
    background-color: #E4276B;
    overflow: hidden;

}
#maint {
    font-family: "satisfy";
    font-size: 2.2vw;
    font-size: 2.2vh;
    
}


/* Style the links inside the navigation bar */
.topnav a {
    float: left;
    display: block;
    color: #f2f2f2;
    text-align: center;
    padding: 14px 16px;
    text-decoration: none;
    font-size: 17px;
}

.topnav a:hover {
    background-color: #FFD614;
    color: black;
}

.active {
    background-color: #4A80BC;
    color: white;
}

.topnav .icon {
    display: none;
}

@media screen and (max-width: 600px) {
  .topnav a:not(:first-child) {display: none;}
  .topnav a.icon {
    float: right;
    display: block;
  }
}
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
    <meta name="description" content="">
    <meta name="author" content="">
    <link rel="shortcut icon" href="imagenes/favicon.png" type="image/x-icon">
    <title>Inicio</title>
    <!-- Bootstrap core CSS -->
    <link rel="stylesheet" href="css/bootstrap.min.css">
    <!-- Custom styles for this template -->
    <link rel="stylesheet" href="css/estilos.css">
   <!--Javascript-->
    <script type="text/javascript" src="js/javascript.js"></script>
       
    
</head>
<body>
    

<div class="topnav" id="myTopnav">
<a href="inicio.html" class="active"> <div id ="maint"> Nueva Forma</div></a>
<a href="acerca.html">Acerca de mí</a>
<a href="acerca.html">Portafolio</a>
<a href="acerca.html">Contacto</a>
<a href="javascript:void(0);" class="icon" onclick="myFunction()">&#9776;</a>
</div>

 </body>
</html>

1
  • ¿Estas usando los estilos y el diseño de bootstrap ? tal parece que no.
    – Dev. Joel
    el 12 feb. 2018 a las 16:13

1 respuesta 1

4

Debes agregar un position: fixed a tu nabvar, de esta manera:

/*MENU*/

.topnav {
    background-color: #E4276B;
    overflow: hidden;
    /*aqui esta el cambio*/
    position: fixed;
    width: 100%;
    top: 0;
    left: 0;
    /*fin del cambio*/
}
#maint {
    font-family: "satisfy";
    font-size: 2.2vw;
    font-size: 2.2vh;
    
}


/* Style the links inside the navigation bar */
.topnav a {
    float: left;
    display: block;
    color: #f2f2f2;
    text-align: center;
    padding: 14px 16px;
    text-decoration: none;
    font-size: 17px;
}

.topnav a:hover {
    background-color: #FFD614;
    color: black;
}

.active {
    background-color: #4A80BC;
    color: white;
}

.topnav .icon {
    display: none;
}

@media screen and (max-width: 600px) {
  .topnav a:not(:first-child) {display: none;}
  .topnav a.icon {
    float: right;
    display: block;
  }
}
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
    <meta name="description" content="">
    <meta name="author" content="">
    <link rel="shortcut icon" href="imagenes/favicon.png" type="image/x-icon">
    <title>Inicio</title>
    <!-- Bootstrap core CSS -->
    <link rel="stylesheet" href="css/bootstrap.min.css">
    <!-- Custom styles for this template -->
    <link rel="stylesheet" href="css/estilos.css">
   <!--Javascript-->
    <script type="text/javascript" src="js/javascript.js"></script>
       
    
</head>
<body>
    

<div class="topnav" id="myTopnav">
  <a href="inicio.html" class="active"> <div id ="maint"> Nueva Forma</div></a>
  <a href="acerca.html">Acerca de mí</a>
  <a href="acerca.html">Portafolio</a>
  <a href="acerca.html">Contacto</a>
  <a href="javascript:void(0);" class="icon" onclick="myFunction()">&#9776;</a>
</div>
  <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Nihil, quos, nulla. Sapiente fuga mollitia non minima odit doloribus natus asperiores quam id. Maiores velit, possimus magnam sint deleniti ad molestiae.</p>
  <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Nihil, quos, nulla. Sapiente fuga mollitia non minima odit doloribus natus asperiores quam id. Maiores velit, possimus magnam sint deleniti ad molestiae.</p>
  
  <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Nihil, quos, nulla. Sapiente fuga mollitia non minima odit doloribus natus asperiores quam id. Maiores velit, possimus magnam sint deleniti ad molestiae.</p>
  
  <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Nihil, quos, nulla. Sapiente fuga mollitia non minima odit doloribus natus asperiores quam id. Maiores velit, possimus magnam sint deleniti ad molestiae.</p>
  
  <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Nihil, quos, nulla. Sapiente fuga mollitia non minima odit doloribus natus asperiores quam id. Maiores velit, possimus magnam sint deleniti ad molestiae.</p>
  
  <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Nihil, quos, nulla. Sapiente fuga mollitia non minima odit doloribus natus asperiores quam id. Maiores velit, possimus magnam sint deleniti ad molestiae.</p>
  <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Nihil, quos, nulla. Sapiente fuga mollitia non minima odit doloribus natus asperiores quam id. Maiores velit, possimus magnam sint deleniti ad molestiae.</p>
  
  
 </body>
</html>

Tu Respuesta

Al pulsar en “Publica tu respuesta”, muestras tu consentimiento a nuestros términos de servicio, política de privacidad y política de cookies

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