0

introducir el código aquíEstoy haciendo un menú con el frame de Bootstrap, el problema que tengo es que no consigo que los textos del menu, queden centrados en lo amplio de la pantalla, si le coloco margin cuando se reduce el tamaño de la pantalla se corren y se pasan para abajo.

/*MENU*/
.navbar {
      margin-bottom: 0;
      background-color: #1A1A1A;
      border: 0;
      font-size: 14px !important;
      border-radius: 0;
      font-family: 'Open Sans', sans-serif;
  
  }

.navbar li a, .navbar .navbar-brand {
      color: #B3B3B3 !important;
  }

.navbar-nav li a:hover, .navbar-nav li.active a {
      color: #FFF !important;
      background-color: #ED1E79 !important;
  }
.navbar-default .navbar-toggle {
      border-color: transparent;
      color: #fff !important;
  }
 
.navbar-nav > li > a, .navbar-brand {
    padding-top:5px !important; padding-bottom:5px !important;
    height: 35px; /* aqui escoges el alto que necesites */
}

.navbar {
    min-height:35px !important; /* aqui escoges el alto que necesites */
}
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="utf-8">
    <title>Inicio</title>
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no">
    <link rel="stylesheet" href="css/bootstrap.min.css">
    <link rel="stylesheet" href="css/css.css">
    <link rel="shortcut icon" href="imagenes/favicon.png" type="image/x-icon">
</head>
<body>

<!--HEADER-->

<header>
  <div class="container">
      <img class="center-block logo" src="imagenes/Logo.png">
  </div>
</header>

<!-- MENU -->
<nav class="navbar navbar-default" role="navigation">
  <div class="container-fluid">
    <div class="navbar-header">
        <button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#myNavbar">
            <span class="icon-bar"></span>
            <span class="icon-bar"></span>
            <span class="icon-bar"></span> 
        </button>
  </div>
    <div class="collapse navbar-collapse" id="myNavbar">
        <ul class="nav navbar-nav">
    <div class="row">
       <div class="col-lg-1"> <a class="navbar-header" href="#"><img class="visible-xs"
     src="imagenes/logo-menu.png"></a></div>
        <div class="col-lg-2"> <li><a href="index.html">INICIO</a></li></div>
           <div class="col-lg-3"> <li><a href="nosotros.html">NOSOTROS</a></li></div>
           <div class="col-lg-3"> <li><a href="servicios.html">SERVICIOS</a></li> </div>
           <div class="col-lg-2"> <li><a href="contacto.html">CONTACTO</a></li> </div>
           <div class="col-lg-1"></div>
          </div>
        </ul>
    </div>
  </div>
    </nav> 

Muchas gracias, ese es mi código:

.navbar {
      margin-bottom: 0;
      background-color: #1A1A1A;
      border: 0;
      font-size: 14px !important;
      border-radius: 0;
      font-family: 'Open Sans', sans-serif;
  
  }

.navbar li a, .navbar .navbar-brand {
      color: #B3B3B3 !important;
  }

.navbar-nav li a:hover, .navbar-nav li.active a {
      color: #FFF !important;
      background-color: #ED1E79 !important;
  }
.navbar-default .navbar-toggle {
      border-color: transparent;
      color: #fff !important;
  }
 
.navbar-nav > li > a, .navbar-brand {
    padding-top:5px 
    height: 35px; 
}
.navbar {
    min-height:35px !important;
}
<nav class="navbar navbar-default" role="navigation">
  <div class="container-fluid">
    <div class="navbar-header">
        <button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#myNavbar">
            <span class="icon-bar"></span>
            <span class="icon-bar"></span>
            <span class="icon-bar"></span> 
        </button>
  </div>
    <div class="collapse navbar-collapse" id="myNavbar">
        <ul class="nav navbar-nav">

          <li><a href="index.html">INICIO</a></li>
          <li><a href="nosotros.html">NOSOTROS</a></li>
          <li><a href="servicios.html">SERVICIOS</a></li> 
          <li><a href="contacto.html">CONTACTO</a></li> 
        </ul>
    </div>
  </div>
</nav> 

Imagen de como me queda: Así me queda Imagen de como deseo que me quede: Así es como deseo que me quede

1 respuesta 1

0

Como estas trabajando con Bootstrap te recomiendo usar el sistema de layouts, de esta manera sera mas sencillo como quieres utilizar la pantalla a continuación dejare el código para que tu navbar se vea como deseas. También puedes cambiar tu la manera en la que utilizo las columnas para dar un mejor manejo al menu que estas mostrando.

Como se ve con este código:

Navbar

navbar

<nav class="navbar navbar-default" role="navigation">
  <div class="container-fluid">
    <div class="navbar-header">
        <button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#myNavbar">
            <span class="icon-bar"></span>
            <span class="icon-bar"></span>
            <span class="icon-bar"></span> 
        </button>
  </div>
    <div class="collapse navbar-collapse" id="myNavbar">
        <ul class="nav navbar-nav">
    <div class="row">
           <div class="col-md-1"></div>
            <div class="col-md-2">  <li><a href="index.html">INICIO</a></li></div>
               <div class="col-md-3"> <li><a href="nosotros.html">NOSOTROS</a></li></div>
               <div class="col-md-3"> <li><a href="servicios.html">SERVICIOS</a></li> </div>
               <div c
lass="col-md-2"> <li><a href="contacto.html">CONTACTO</a></li> </div>
               <div class="col-md-1"></div>
              </div>
            </ul>
        </div>
      </div>
        </nav>

TrabajoEntero.php

    <!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="icon" href="/img/favicon.png">
    <title>Noticias</title>
    <!-- Bootstrap core CSS -->
    <link href="css/bootstrap.min.css" rel="stylesheet">
    <!-- Custom styles for this template -->

</head>
<style>.navbar {
      margin-bottom: 0;
      background-color: #1A1A1A;
      border: 0;
      font-size: 14px !important;
      border-radius: 0;
      font-family: 'Open Sans', sans-serif;

  }

.navbar li a, .navbar .navbar-brand {
      color: #B3B3B3 !important;
  }

.navbar-nav li a:hover, .navbar-nav li.active a {
      color: #FFF !important;
      background-color: #ED1E79 !important;
  }
.navbar-default .navbar-toggle {
      border-color: transparent;
      color: #fff !important;
  }

.navbar-nav > li > a, .navbar-brand {
    padding-top:5px 
    height: 35px; 
}
.navbar {
    min-height:35px !important;
}</style>
<body class="pb-0">
    <div class="wrapper">
    <!-- aqui se debe cargar el menu o navbar-->
    </div>

<nav class="navbar navbar-default" role="navigation">
  <div class="container-fluid">
    <div class="navbar-header">
        <button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#myNavbar">
            <span class="icon-bar"></span>
            <span class="icon-bar"></span>
            <span class="icon-bar"></span> 
        </button>
  </div>
    <div class="collapse navbar-collapse" id="myNavbar">
        <ul class="nav navbar-nav">
    <div class="row">
       <div class="col-md-1"></div>
        <div class="col-md-2">  <li><a href="index.html">INICIO</a></li></div>
           <div class="col-md-3"> <li><a href="nosotros.html">NOSOTROS</a></li></div>
           <div class="col-md-3"> <li><a href="servicios.html">SERVICIOS</a></li> </div>
           <div class="col-md-2"> <li><a href="contacto.html">CONTACTO</a></li> </div>
           <div class="col-md-1"></div>
          </div>
        </ul>
    </div>
  </div>
    </nav>

    <!-- aqui va todo lo que contenga la pagina-->




    <!-- aqui va el footer-->

    <!-- Scripts aqui abajo para que carge primero la pagina y luego los scripts-->
   <script src="js/jquery-3.2.1.min.js"></script>
    <script>
        window.jQuery || document.write('<script src="../../../../assets/js/vendor/jquery.min.js"><\/script>')

    </script>
    <script src="js/bootstrap.min.js"></script>
    <!-- IE10 viewport hack for Surface/desktop Windows 8 bug -->
    <script src="js/ie10-viewport-bug-workaround.js"></script>

</body>

</html>
9
  • Muchisimas gracias por ayudarme, mira que lo he colocado así, pero aún no se por que me falla, me sigue saliendo igual, no sé si ahora será un error en mis estilos o por que será.
    – linjai
    Commented el 1 sept. 2017 a las 15:33
  • si pudieras insertar en tu pregunta el código que antecede al navbar podríamos saber si el problema viene de antes de ingresar el navbar, ya que este como lo e expuesto en la respuesta no le anteceden divs Commented el 1 sept. 2017 a las 15:44
  • Con gusto, en mi modificación más reciente, lo inserte completo. Muchas gracias.
    – linjai
    Commented el 1 sept. 2017 a las 15:54
  • linjai, te recomiendo revises si estas importando los scripts correspondientes a bootstrap.min.js y jquery para que funcione el botón. Edite el código y te mande la pagina completa que se visualiza como tu quieres. Commented el 1 sept. 2017 a las 16:42
  • Hola, muchas gracias por tu ayuda, ya lo coloque en mi cod. sin embargo no sé por que no me funciona la verdad :( me sigue quedando todo al lado izquierdo, no sé porque?
    – linjai
    Commented el 3 sept. 2017 a las 17:25

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.