4

Tengo el siguiente navbar con Bootstrap 3:

.affix-top{
   transition: top 2s ease 2s;
    -webkit-transition: top 2s ease 2s;
    -moz-transition: top 2s ease 2s;
    -o-transition: top 2s ease 2s;
}

.affix {
    top: 0px;
    width: 100%;
    z-index: 999 !important;
    padding-top: 90px;
    text-align: center;   
    background-color: #fff;
    padding: 12px 0 12px 0;
    border-bottom: 3px double rgba(0, 0, 0, 0.1);
    box-shadow: 0px 5px 11px 0px rgba(50, 50, 50, 0.08); 
  }

  .affix+.container-fluid {
    padding-top: 300px;
  }

.navbar {   
    border: 1px solid transparent;
    background: #fff;
    border-radius: 10px;
    min-height: 0;
}
.navbar-toggle {
    position: relative;
    float: right;
    margin-right: 15px;
    padding: 10px 10px;
    margin-top: 10.5px;
    margin-bottom: 10.5px;
    background-color: #848484;  
    border: 1px solid transparent;
    border-radius: 5px;
}

#fh5co-header {
    padding: 20px 0 0 0;
}

#fh5co-header nav ul li {
    padding: 0;
    margin: 0;
    list-style: none;
    zoom: 1;
    display: inline;
    text-align: center;
<head>
  <meta charset="UTF-8">
  <title>NavBar Collapse</title>
  <meta name="viewport" content="width=device-width, initial-scale=1">   
  
<link rel='stylesheet' href='https://intranet.sanmarino.com.co/sm/css/bootstrap.css'>
<link rel='stylesheet' href='https://intranet.sanmarino.com.co/sm/css/style.css'>


  <!-- FontAwesome -->
	<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.3.1/css/all.css" integrity="sha384-mzrmE5qonljUremFsqc01SB46JvROS7bZs3IO2EmfFsd15uHvIt+Y8vEf7N7fWAU" crossorigin="anonymous">
</head>

<body>
  
<div id="fh5co-page">
  <header id="fh5co-header" role="banner">
    <div class="container" style="text-align:center;">
      <div class="header-inner">
        <a href="index.php"><img src="https://getbootstrap.com/docs/3.3/assets/img/sass-less.png" style="width: 100%; max-width: 580px;"></a>
      </div>
    </div>
    
    
    <nav class="navbar affix" data-spy="affix" data-offset-top="165">
  <div class="container-fluid">
    <div class="navbar-header">
      <button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#myNavbar">
       <i class="fas fa-bars"></i>                      
      </button>     
    </div>
    
    <div class="collapse navbar-collapse" id="myNavbar">
      <ul class="nav navbar-nav">
        <li class="active"><a href="#">Home</a></li>
        <li class="dropdown">
          <a class="dropdown-toggle" data-toggle="dropdown" href="#">Page 1 <span class="caret"></span></a>
          <ul class="dropdown-menu">
            <li><a href="#">Page 1-1</a></li>
            <li><a href="#">Page 1-2</a></li>
            <li><a href="#">Page 1-3</a></li>
          </ul>
        </li>
        <li><a href="#">Page 2</a></li>
        <li><a href="#">Page 3</a></li>
      </ul>
      <ul class="nav navbar-nav navbar-right">
        <li><a href="#"><i class="far fa-user"></i> Salir</a></li>
      </ul>
    </div>
  </div>
</nav>
   </header>
  </div>
  
 <div style="padding: 200px 0;">
      Contenido Cool
    </div>
  <div style="padding: 200px 0;">
      Contenido Cool
    </div>
  <div style="padding: 200px 0;">
      Contenido Cool
    </div>  
  
</body>
  <script src='https://intranet.sanmarino.com.co/sm/js/jquery.min.js'></script>
<script src='https://intranet.sanmarino.com.co/sm/js/bootstrap.min.js'></script>

Deseo pasar del menú en la izquierda a ubicarlo en el centro (o justificarlo) en forma horizontal.

Ejemplo

Alguno podrá pensar que no he intentado mucho, pero créanme, llevo horas tratando de hacerlo pero mis conocimientos son muy básicos. Intenté aplicar la propiedad display:inline y luego text-align:center. También jugué con la propiedad justify-content y sus valores center, space-around y space-between.

Me acerqué bastante al aplicar en el css:

.navbar-nav {
    float: left;
    margin: 0;
    left: 50%;
    transform: translatex(-50%);
    position: relative;

Pero se pierde la opción de Cerrar Sesión que es el ícono del usuario. Podría ir jugando mermando el porcentaje, pero no creo que sea la manera correcta pensando en varias resoluciones.

2
  • 2
    Bootstrap tiene la clase navbar-center. Ya la usaste? el 12 dic. 2018 a las 21:26
  • Si, pero sigue corriendo el icono del usuario fuera de la pantalla, creo que voy a dejarlo como un link mas en el centro y no a la derecha
    – EMCode
    el 12 dic. 2018 a las 21:27

2 respuestas 2

2

Utiliza la clase navbar-center con las siguientes propiedades:

.navbar-center {
    position: absolute;
    left: 50%;
    transform: translatex(-50%);
  }

De esta forma no necesitas quitar o mover de lugar el ícono con la clase navbar-right que mencionas.

Podrías incluso hacerlo con nav justify-content-center. Puedes ver más info sobre el posicionamiento de los menús en Boostrap en su página oficial

.affix-top{
   transition: top 2s ease 2s;
    -webkit-transition: top 2s ease 2s;
    -moz-transition: top 2s ease 2s;
    -o-transition: top 2s ease 2s;
}

.affix {
    top: 0px;
    width: 100%;
    z-index: 999 !important;
    padding-top: 90px;
    text-align: center;   
    background-color: #fff;
    padding: 12px 0 12px 0;
    border-bottom: 3px double rgba(0, 0, 0, 0.1);
    box-shadow: 0px 5px 11px 0px rgba(50, 50, 50, 0.08); 
  }

  .affix+.container-fluid {
    padding-top: 300px;
  }

.navbar {   
    border: 1px solid transparent;
    background: #fff;
    border-radius: 10px;
    min-height: 0;
}
.navbar-toggle {
    position: relative;
    float: right;
    margin-right: 15px;
    padding: 10px 10px;
    margin-top: 10.5px;
    margin-bottom: 10.5px;
    background-color: #848484;  
    border: 1px solid transparent;
    border-radius: 5px;
}

#fh5co-header {
    padding: 20px 0 0 0;
}

#fh5co-header nav ul li {
    padding: 0;
    margin: 0;
    list-style: none;
    zoom: 1;
    display: inline;
    text-align: center;
    }
    
    @media (min-width: 768px) {
  .navbar-nav.navbar-center {
    position: absolute;
    left: 50%;
    transform: translatex(-50%);
  }
}
<head>
  <meta charset="UTF-8">
  <title>NavBar Collapse</title>
  <meta name="viewport" content="width=device-width, initial-scale=1">   
  
<link rel='stylesheet' href='https://intranet.sanmarino.com.co/sm/css/bootstrap.css'>
<link rel='stylesheet' href='https://intranet.sanmarino.com.co/sm/css/style.css'>


  <!-- FontAwesome -->
	<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.3.1/css/all.css" integrity="sha384-mzrmE5qonljUremFsqc01SB46JvROS7bZs3IO2EmfFsd15uHvIt+Y8vEf7N7fWAU" crossorigin="anonymous">
</head>

<body>
  
<div id="fh5co-page">
  <header id="fh5co-header" role="banner">
    <div class="container" style="text-align:center;">
      <div class="header-inner">
        <a href="index.php"><img src="https://getbootstrap.com/docs/3.3/assets/img/sass-less.png" style="width: 100%; max-width: 580px;"></a>
      </div>
    </div>
    
    
    <nav class="navbar affix" data-spy="affix" data-offset-top="165" role="navigation">
  <div class="navbar-header">
    <button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-collapse">
      <span class="icon-bar"></span>
      <span class="icon-bar"></span>
      <span class="icon-bar"></span>
    </button>    
  </div>
  <div class="navbar-collapse collapse">    
    <ul class="nav navbar-nav navbar-center">
        <li><a href="#">Home</a></li>
        <li class="dropdown">
          <a class="dropdown-toggle" data-toggle="dropdown" href="#">Page 1 <span class="caret"></span></a>
          <ul class="dropdown-menu">
            <li><a href="#">Page 1-1</a></li>
            <li><a href="#">Page 1-2</a></li>
            <li><a href="#">Page 1-3</a></li>
          </ul>
        </li>
      
        <li><a href="#">Page 2</a></li>
      <li><a href="#">Page 3</a></li>
    </ul>
    <ul class="nav navbar-nav navbar-right">
        <li><a href="#"><i class="far fa-user"></i> Salir</a></li>
    </ul>
  </div>
</nav> 
   </header>
  </div>
  
 <div style="padding: 200px 0;">
      Contenido Cool
    </div>
  <div style="padding: 200px 0;">
      Contenido Cool
    </div>
  <div style="padding: 200px 0;">
      Contenido Cool
    </div>  
  
</body>
  <script src='https://intranet.sanmarino.com.co/sm/js/jquery.min.js'></script>
<script src='https://intranet.sanmarino.com.co/sm/js/bootstrap.min.js'></script>

1
  • Perfecto! Mil gracias
    – EMCode
    el 12 dic. 2018 a las 21:55
1

Intenta agregando margin: auto y display: table asi:

.affix-top{
   transition: top 2s ease 2s;
    -webkit-transition: top 2s ease 2s;
    -moz-transition: top 2s ease 2s;
    -o-transition: top 2s ease 2s;
}

.affix {
    top: 0px;
    width: 100%;
    z-index: 999 !important;
    padding-top: 90px;
    text-align: center;   
    background-color: #fff;
    padding: 12px 0 12px 0;
    border-bottom: 3px double rgba(0, 0, 0, 0.1);
    box-shadow: 0px 5px 11px 0px rgba(50, 50, 50, 0.08); 
  }

  .affix+.container-fluid {
    padding-top: 300px;
  }

.navbar {   
    border: 1px solid transparent;
    background: #fff;
    border-radius: 10px;
    min-height: 0;
}

.navbar-nav {
  display: table;  
  float: none !important;
  margin: auto !important;
}

.navbar-toggle {
    position: relative;
    float: right;
    margin-right: 15px;
    padding: 10px 10px;
    margin-top: 10.5px;
    margin-bottom: 10.5px;
    background-color: #848484;  
    border: 1px solid transparent;
    border-radius: 5px;
}

#fh5co-header {
    padding: 20px 0 0 0;
}

#fh5co-header nav ul li {
    padding: 0;
    margin: 0;
    list-style: none;
    zoom: 1;
    display: inline;
    text-align: center;
<head>
  <meta charset="UTF-8">
  <title>NavBar Collapse</title>
  <meta name="viewport" content="width=device-width, initial-scale=1">   
  
<link rel='stylesheet' href='https://intranet.sanmarino.com.co/sm/css/bootstrap.css'>
<link rel='stylesheet' href='https://intranet.sanmarino.com.co/sm/css/style.css'>


  <!-- FontAwesome -->
	<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.3.1/css/all.css" integrity="sha384-mzrmE5qonljUremFsqc01SB46JvROS7bZs3IO2EmfFsd15uHvIt+Y8vEf7N7fWAU" crossorigin="anonymous">
</head>

<body>
  
<div id="fh5co-page">
  <header id="fh5co-header" role="banner">
    <div class="container" style="text-align:center;">
      <div class="header-inner">
        <a href="index.php"><img src="https://getbootstrap.com/docs/3.3/assets/img/sass-less.png" style="width: 100%; max-width: 580px;"></a>
      </div>
    </div>
    
    
    <nav class="navbar affix" data-spy="affix" data-offset-top="165">
  <div class="container-fluid">
    <div class="navbar-header">
      <button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#myNavbar">
       <i class="fas fa-bars"></i>                      
      </button>     
    </div>
    
    <div class="collapse navbar-collapse" id="myNavbar">
      <ul class="nav navbar-nav">
        <li class="active"><a href="#">Home</a></li>
        <li class="dropdown">
          <a class="dropdown-toggle" data-toggle="dropdown" href="#">Page 1 <span class="caret"></span></a>
          <ul class="dropdown-menu">
            <li><a href="#">Page 1-1</a></li>
            <li><a href="#">Page 1-2</a></li>
            <li><a href="#">Page 1-3</a></li>
          </ul>
        </li>
        <li><a href="#">Page 2</a></li>
        <li><a href="#">Page 3</a></li>
      </ul>
      <ul class="nav navbar-nav navbar-right">
        <li><a href="#"><i class="far fa-user"></i> Salir</a></li>
      </ul>
    </div>
  </div>
</nav>
   </header>
  </div>
  
 <div style="padding: 200px 0;">
      Contenido Cool
    </div>
  <div style="padding: 200px 0;">
      Contenido Cool
    </div>
  <div style="padding: 200px 0;">
      Contenido Cool
    </div>  
  
</body>
  <script src='https://intranet.sanmarino.com.co/sm/js/jquery.min.js'></script>
<script src='https://intranet.sanmarino.com.co/sm/js/bootstrap.min.js'></script>

1
  • Gracias, pero el ícono del usuario me queda un nivel por debajo, y al trabajar con vistas moviles y el menu desplegable, se ven en línea, no una bajo la otra. Igualmente gracias por tu tiempo
    – EMCode
    el 12 dic. 2018 a las 21:24

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.