2

Hola muy buenas estoy haciendo un sitio web y necesito cambiar el largo de un navbar. Por defecto el navbar ocupa el 100% de la pantalla en largo pero yo quiero que tenga un largo de 900px estuve tratando de modificar el css de bootstrap para los navbars pero no logre nada. Este el mi codigo HTML. El CSS es el de bootstrap no personalice nada aun.

<nav class="navbar navbar-expand-lg navbar-dark bg-dark">
  <div class="collapse navbar-collapse" id="navbarNavAltMarkup">
    <div class="navbar-nav">
      <a class="nav-item nav-link active" href="#">Home <span class="sr-only">(current)</span></a>
      <a class="nav-item nav-link" href="#">Store</a>
      <a class="nav-item nav-link" href="#">About</a>
    </div>
  </div>
</nav>

Espero me puedan ayudar. Desde ya muchas gracias

1 respuesta 1

1

Si le agregas el estilo width 900px !important lo achica y si le pones margin:auto !important lo centra

Cuando ejecutes el ejemplo da click en ver en pantalla completa asi ves bien como queda.

Cambie la clase a @media para que se ejecute solo cuando la pagina mida mas de 900px de ancho, dsp cambia a menu tablet / movil

introducir la descripción de la imagen aquí

<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8">
	<meta name="viewport" content="width=device-width">
	<title>JS Bin</title>
	<style>

	@media only screen and (min-width: 900px) {
		.navClass{
			width: 900px !important; 
			margin: auto !important;
		}
}

	</style>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">
	</head>
<body>

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

  <div class="collapse navbar-collapse" id="navbarSupportedContent">
<ul class="navbar-nav mr-auto">
  <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 dropdown">
    <a class="nav-link dropdown-toggle" href="#" id="navbarDropdown" role="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
      Dropdown
    </a>
    <div class="dropdown-menu" aria-labelledby="navbarDropdown">
      <a class="dropdown-item" href="#">Action</a>
      <a class="dropdown-item" href="#">Another action</a>
      <div class="dropdown-divider"></div>
      <a class="dropdown-item" href="#">Something else here</a>
    </div>
  </li>
  <li class="nav-item">
    <a class="nav-link disabled" href="#">Disabled</a>
  </li>
</ul>
<form class="form-inline my-2 my-lg-0">
  <input class="form-control mr-sm-2" type="search" placeholder="Search" aria-label="Search">
  <button class="btn btn-outline-success my-2 my-sm-0" type="submit">Search</button>
</form>
  </div>
</nav>


<script
  src="https://code.jquery.com/jquery-3.3.1.js"
  integrity="sha256-2Kok7MbOyxpgUVvAk/HJ2jigOSYS2auK4Pfzbm7uH60="
  crossorigin="anonymous"></script>
  <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js" integrity="sha384-JZR6Spejh4U02d8jOt6vLEHfe/JQGiRRSQQxSfFWpi1MquVdAyjUar5+76PVCmYl" crossorigin="anonymous"></script>
</body>
</html>

3
  • Muchas gracias :)
    – user108144
    Commented el 23 nov. 2018 a las 21:38
  • Hola al hacer el cambio en el codigo al rato me dicuenta de que al achicar el navegador a tamaño telefono el navbar no mantiene su centrado en el medio respecto al tamaño. porque puede ser?
    – user108144
    Commented el 24 nov. 2018 a las 3:42
  • Pasa que las mismas clases de Bootstrap te lo cambian a version movil, ahi cambie la clase a un @media para que se ejecute solo cuando la pagina mide mas de 900px dsp pasa a formato movil, ya hacer que el menu movil cubra un % de la pagina y no el 100% hay que investigarlo por otro lado porque son muchas clases las que hacen que eso pase.
    – Juan
    Commented el 26 nov. 2018 a las 14:59

Tu Respuesta

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