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>