1

Estoy tratando de reducir el ancho de las celdas de mi barra de navegación. Me ha vuelto a ayudar un compañero, @Camilo Vasquez añadiendo las librerías bootstrap y diciéndome como cambiar la fuente. Pero me equivoque de código. Con su ayuda también he conseguido ampliar el texto al ancho de pantalla, pero no consigo reducir el ancho de cada elemento de la lista de la barra de navegación, y aunque cambie el tamaño de fuente, siguen siendo muy anchas y se superponen los elementos de la lista, cuandodeberíann estar en una sola linea. No consigo dar separación entre el logo y los siguientes elementos de la barra. Dejo el código, ahora el bueno, a ver si pueden echarme una mano. Gracias

html, body {
height:100%;
margin:0px;
color:#444444;
-ms-text-size-adjust:100%;
-webkit-text-size-adjust:100%;
font:400 16px/1.8 sans-serif;
}

.nav-navbar-nav{
    font-size: 8;

}
.bgimg-1, .bgimg-2, .bgimg-3 {
position:relative;
background-repeat:no-repeat;
background-attachment:fixed;
background-position:center;
background-size:cover;
}
.bgimg-1 {
background-image:url("bg_01.jpg");
height:100%;
}
.bgimg-2 {
background-image:url("bg_02.jpg");
height:100%;
}
.bgimg-3 {
background-image:url("bg_03.jpg");
height:100%;
}
.caption {
position:absolute;
left:10%;
top:48%;
width:80%;
margin:auto;
color:#FFFFFF;
font-size:24px;
text-align:center;
letter-spacing:10px;
background-color:#444444;
}
h2 {
text-transform:uppercase;
font:20px sans-serif;
letter-spacing:4px;
color:#444444;
}
a {
text-decoration:none;
letter-spacing:10px;
}
<!DOCTYPE html>
<html lang="es">

<head>
    <title>PRINCIPAL</title>
    <meta charset="utf-8">
    <meta name="robots" content="noindex, nofollow">
    <meta name="viewport" content="width=device-width">

    <!-- SUGERIDO Y AÑADIDO POR EL COMPAÑERO Camilo Vasquez -->
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
    <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
    <link href="todo.css" type="text/css" rel="stylesheet">
</head>

<body>
    <header id="header">
        <nav class="navbar navbar-inverse" role="navigation">
            <div class="container">
                <!-- Logo and responsive toggle -->
                <div class="navbar-header">

                    <a class="navbar-brand" href="#">
                        <span class="glyphicon glyphicon-fire"></span>
                      MIGUEL ESPESO
                    </a>
                </div>
                <!-- Navbar links -->
                <div class="collapse navbar-collapse" id="navbar">
                    <ul class="nav navbar-nav">
                        <li class="active">
                            <a href="#">Principal</a>
                        </li>
                        <li>
                            <a href="#">Sobre mi</a>
                        </li>
                        <li>
                            <a href="#">Estudios</a>
                        </li>
                        <li class="dropdown">
                            <a class="dropdown-toggle" data-toggle="dropdown" href="#">SOBRE 
                                <span class="caret"></span>
                            </a>
                            <ul class="dropdown-menu">
                                <li>
                                    <a href="#">ESTUDIOS</a>
                                </li>
                                <li>
                                    <a href="#">APLICACIONES</a>
                                </li>
                                <li>
                                    <a href="#">Diseño</a>
                                </li>
                            </ul>
                        </li>
                    </ul>
                    <!-- Search -->
                    <form class="navbar-form navbar-right" role="search">
                        <div class="form-group">
                            <input type="text" class="form-control">
                        </div>
                        <button type="submit" class="btn btn-default">Buscar</button>
                    </form>

                </div>
                <!-- /.navbar-collapse -->
            </div>
            <!-- /.container -->
        </nav>
    </header>
    <div class="bgimg-1">
        <div class="caption">
            <span>DALE AL SCROLL</span>
        </div>
    </div>

    <div style="color:#444444;background-color:#FFFFFF;text-align:center;padding:48px 80px;text-align:justify;">
        <h2 style="text-align:center;">BIENVENIDOS A MI SITIO WEB..</h2>
        
        <p>Hola, me llamo Miguel y os voy a presentar mi sitio web, el cual estoy creando mientras realizo un curso de actívate. 
         En principio esta creado para mostrar mi perfil, experiencia laboral, formación académica y todos los conocimientos que 
         vaya adquiriendo en el curso. </p>

    <div class="bgimg-2">
        <div class="caption">
            <span>100% HEIGHT</span>
        </div>
    </div>

    <div style="position:relative;">
        <div style="color:#FFFFFF;background-color:#444444;text-align:center;padding:48px 80px;text-align:justify;">
            <p>Aqui ira mas contenido, segun vayamos progresando en la creacion</p>
        </div>
    </div>

    <div class="bgimg-3">
        <div class="caption">
            <span>DALE AL SCROLL</span>
        </div>
    </div>

    <div style="position:relative;">
        <div style="color:#444444;background-color:#FFFFFF;text-align:center;padding:48px 80px;text-align:justify;">
            <p>Aqui ira mas contenido, segun vayamos progresando en la creacion</p>
        </div>
    </div>

    <div class="bgimg-1">
        <div class="caption">
            <span>¡DIVERTIDO, EH!</span>
        </div>
    </div>
</body>

</html>

1 respuesta 1

1

Para mermar el ancho de los botones de tu barra de navegación basta con mermar el valor de la propiedad letter-spacing la cual la has asignado a tus etiquetas <a> que se encuentren dentro de tu barra de navegación y para separar el logo de el menú como tal he agregado un margin-left al <ul> que contiene el menú y como podrás ver le he agregado un !important, este último es para que el navegador tome el estilo que he asignado yo por encima de los estilos que trae Bootstrap.

html, body {
height:100%;
margin:0px;
color:#444444;
-ms-text-size-adjust:100%;
-webkit-text-size-adjust:100%;
font:400 16px/1.8 sans-serif;
}

.nav-navbar-nav{
    font-size: 8;

}
.bgimg-1, .bgimg-2, .bgimg-3 {
position:relative;
background-repeat:no-repeat;
background-attachment:fixed;
background-position:center;
background-size:cover;
}
.bgimg-1 {
background-image:url("bg_01.jpg");
height:100%;
}
.bgimg-2 {
background-image:url("bg_02.jpg");
height:100%;
}
.bgimg-3 {
background-image:url("bg_03.jpg");
height:100%;
}
.caption {
position:absolute;
left:10%;
top:48%;
width:80%;
margin:auto;
color:#FFFFFF;
font-size:24px;
text-align:center;
letter-spacing:10px;
background-color:#444444;
}
h2 {
text-transform:uppercase;
font:20px sans-serif;
letter-spacing:4px;
color:#444444;
}
a {
text-decoration:none;
letter-spacing:3px;
}
.navbar-nav{
  margin-left: 5% !important;
}
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
    <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>

<header id="header">
        <nav class="navbar navbar-inverse" role="navigation">
            <div class="container">
                <!-- Logo and responsive toggle -->
                <div class="navbar-header">

                    <a class="navbar-brand" href="#">
                        <span class="glyphicon glyphicon-fire"></span>
                      MIGUEL ESPESO
                    </a>
                </div>
                <!-- Navbar links -->
                <div class="collapse navbar-collapse" id="navbar">
                    <ul class="nav navbar-nav">
                        <li class="active">
                            <a href="#">Principal</a>
                        </li>
                        <li>
                            <a href="#">Sobre mi</a>
                        </li>
                        <li>
                            <a href="#">Estudios</a>
                        </li>
                        <li class="dropdown">
                            <a class="dropdown-toggle" data-toggle="dropdown" href="#">SOBRE 
                                <span class="caret"></span>
                            </a>
                            <ul class="dropdown-menu">
                                <li>
                                    <a href="#">ESTUDIOS</a>
                                </li>
                                <li>
                                    <a href="#">APLICACIONES</a>
                                </li>
                                <li>
                                    <a href="#">Diseño</a>
                                </li>
                            </ul>
                        </li>
                    </ul>
                    <!-- Search -->
                    <form class="navbar-form navbar-right" role="search">
                        <div class="form-group">
                            <input type="text" class="form-control">
                        </div>
                        <button type="submit" class="btn btn-default">Buscar</button>
                    </form>

                </div>
                <!-- /.navbar-collapse -->
            </div>
            <!-- /.container -->
        </nav>
    </header>
    <div class="bgimg-1">
        <div class="caption">
            <span>DALE AL SCROLL</span>
        </div>
    </div>

    <div style="color:#444444;background-color:#FFFFFF;text-align:center;padding:48px 80px;text-align:justify;">
        <h2 style="text-align:center;">BIENVENIDOS A MI SITIO WEB..</h2>
        
        <p>Hola, me llamo Miguel y os voy a presentar mi sitio web, el cual estoy creando mientras realizo un curso de actívate. 
         En principio esta creado para mostrar mi perfil, experiencia laboral, formación académica y todos los conocimientos que 
         vaya adquiriendo en el curso. </p>

    <div class="bgimg-2">
        <div class="caption">
            <span>100% HEIGHT</span>
        </div>
    </div>

    <div style="position:relative;">
        <div style="color:#FFFFFF;background-color:#444444;text-align:center;padding:48px 80px;text-align:justify;">
            <p>Aqui ira mas contenido, segun vayamos progresando en la creacion</p>
        </div>
    </div>

    <div class="bgimg-3">
        <div class="caption">
            <span>DALE AL SCROLL</span>
        </div>
    </div>

    <div style="position:relative;">
        <div style="color:#444444;background-color:#FFFFFF;text-align:center;padding:48px 80px;text-align:justify;">
            <p>Aqui ira mas contenido, segun vayamos progresando en la creacion</p>
        </div>
    </div>

    <div class="bgimg-1">
        <div class="caption">
            <span>¡DIVERTIDO, EH!</span>
        </div>
    </div>

1
  • Gracias de nuevo Commented el 16 nov. 2017 a las 1:40

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.