1

Estoy tratando de crear una web, con la cual ya me ayudaron compañeros como @Camilo Vasquez y @alexchvrches . Se va complicando la cosa y mis dudas. Trato de dejar siempre visible la barra de navegación en la parte superior, pero al hacer scrool esta desaparece. Hay forma de dejarla visible, que al abrir la pagina fuera un poco mas alta y al hacer scroll, permaneciera siempre visible, con una altura como la que muestra ahora. Otra cosa que no he conseguido despues de varios pruebas de documentación que busque, es hacer desaparecer el pequeño espacio entre esta barra y el body. Tiene muchos mas fallos, pero sigo intentando resolverles yo. Dejo la muestra del código. 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("http://i64.tinypic.com/2jb5fs4.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;
    }
<!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">

    <!-- ESTOS ENLACES LES TENGO GRACIAS A Camilo Vasquez me sugirio para crear barra de navegacion-->
    
    <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>
<!-- AQUI TAMBIEN FORMO PARTE Camilo Vasquez AYUDANDO ME CON LOS BOTONES DE LA BARRA DE NAVEGACION-->
<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 MI
                                <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;">CURRICULUM</h2>
        <h1>BIENVENIDOS A MI SITIO WEB...</h1>
        <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>

    <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>ESTO IRA MEJORANDOSE, SEGUN VAYA EXPERIMENTANDO</p>
        </div>
    </div>

    <div class="bgimg-3">
        <div class="caption">
            <span>MAS IMAGENES</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 PONDRE IMAGENES, CUANDO VAYA APRENDIENDO</p>
        </div>
    </div>

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

</html>

3 respuestas 3

4

Para solucionar tus problemas lo único que debes hacer es agregarle los siguientes estilos al header:

#header{
  position: fixed;
  width: 100%;
  z-index: 1000;
}

A la clase navbar le puedes quitar el margin-bottom que le agrega Bootstrap dándole como valor 0px.

Quedando de la siguiente manera:

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("http://i64.tinypic.com/2jb5fs4.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;
    }
    
    #header{
      position: fixed;
      width: 100%;
      z-index: 1000;
    }
    
    .navbar{
      margin-bottom: 0px !important;
    }
<!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">

    <!-- ESTOS ENLACES LES TENGO GRACIAS A Camilo Vasquez me sugirio para crear barra de navegacion-->
    
    <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>
<!-- AQUI TAMBIEN FORMO PARTE Camilo Vasquez AYUDANDO ME CON LOS BOTONES DE LA BARRA DE NAVEGACION-->
<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 MI
                                <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;">CURRICULUM</h2>
        <h1>BIENVENIDOS A MI SITIO WEB...</h1>
        <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>

    <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>ESTO IRA MEJORANDOSE, SEGUN VAYA EXPERIMENTANDO</p>
        </div>
    </div>

    <div class="bgimg-3">
        <div class="caption">
            <span>MAS IMAGENES</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 PONDRE IMAGENES, CUANDO VAYA APRENDIENDO</p>
        </div>
    </div>

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

</html>

3
  • Gracias de nuevo. Le pregunte a @Alvaro Montoro si para hacer que la barra de navegacion sea un tercio mas alta al abrir la web, y al hacer scroll vuelva a este tamño actual, necesitaria javascript verdad...??? Gracias, muchas gracias Commented el 16 nov. 2017 a las 20:59
  • 1
    @MiguelEspeso para eso estamos acá, para ayudar, eh creo que si es necesario usar javascript para eso que quieres lograr Commented el 16 nov. 2017 a las 21:00
  • Ok, lo dejaremos para mas adelante. Un saludo. Commented el 16 nov. 2017 a las 21:03
4

En Bootstrap tienes la opción de hacer que la barra de navegación se pegue a la parte superior de la página y se quede fija en esa posición. Tan sólo tienes que añadirle la clase navbar-fixed-top (en Bootstrap 3 que es el que usas, para Bootstrap 4 creo que la clase ha cambiado a simplemente fixed-top).

Y ya está, sólo con eso, sin necesidad de cambiar el CSS:

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("http://i64.tinypic.com/2jb5fs4.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;
    }
<!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">

    <!-- ESTOS ENLACES LES TENGO GRACIAS A Camilo Vasquez me sugirio para crear barra de navegacion-->
    
    <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>
<!-- AQUI TAMBIEN FORMO PARTE Camilo Vasquez AYUDANDO ME CON LOS BOTONES DE LA BARRA DE NAVEGACION-->
<body>
    <header id="header">
        <nav class="navbar navbar-inverse navbar-fixed-top" 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 MI
                                <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;">CURRICULUM</h2>
        <h1>BIENVENIDOS A MI SITIO WEB...</h1>
        <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>

    <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>ESTO IRA MEJORANDOSE, SEGUN VAYA EXPERIMENTANDO</p>
        </div>
    </div>

    <div class="bgimg-3">
        <div class="caption">
            <span>MAS IMAGENES</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 PONDRE IMAGENES, CUANDO VAYA APRENDIENDO</p>
        </div>
    </div>

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

</html>

4
  • Muchas gracias, mi pregunta es si necesito javascript para hacer que la barra de navegacion al abrir la pagina sea el doble de alta que ahora y al hacer scrool, se quede en este tamaño..?? Gracias por el apoyo Commented el 16 nov. 2017 a las 20:55
  • 1
    @MiguelEspeso ¿Quieres que la barra sea el doble de alta de lo que es ahora y que se quede fixed? No termino de comprender el comentario o la necesidad de JavaScript para esto.
    – Alvaro Montoro
    Commented el 16 nov. 2017 a las 21:21
  • 1
    @AlvaroMontoro el quiere que la barra de navegación tenga un tamaño inicial pero que al hacer scroll el tamaño quede como el que tiene actualmente Commented el 16 nov. 2017 a las 21:40
  • @AlvaroMontoro Si es lo que dice el compañero Camilo Vazquez. Altura mayor al abrir, y al hacer scrooll volviera al tamño que tenemos ahora. Pero imagino sera obra de javascript, por lo que tratere de hacerlo mas adelante. De todas formas Para cambiar la altura que tendria que hacer..?? Gracias por el apoyo prestado tanto Commented el 16 nov. 2017 a las 22:29
0

la clase de bootstrap que necesitas implementar es: fixed-top , eso hará que siempre se mantenga arriba. sino también:

class="position-sticky"

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.