Fix navbar and give horizontal scroll on content

Asked

Viewed 956 times

0

I’m trying to make a map with a navbar as per image:

inserir a descrição da imagem aqui

Only when moving the image on the X-axis to see the rest of the content, the navbar also moves as the image

inserir a descrição da imagem aqui

How do I enable scroll only on X-axis for map container div?

Follows css:

Map: 

.mapa, .rota {
  position: absolute;
  height: 100%;
}

.mapa {
  z-index: 1;
}

.rota {
  z-index: 2;
}

Navbar:

nav{
    display: flex;
    height: 100%;
    position: relative;
    height: 70px;
    background-color: rgb(75, 87, 100);
    width: 100%;
    border-bottom: 5px solid rgb(233, 128, 99);
}
.arrow-back{
    width: 25px;
    position: absolute;
    left: 5%;
    top: 50%;
    transform: translateY(-50%);
}
.nav-search {
    flex-direction: column;
}
css rolling

  • Is your goal that the navbar is always visible, regardless of whether the user has scrolled down the page? If so, you can pin your navbar: position: fixed; top: 0; left: 0; right: 0;. Remember to put the z-index with value above the content of your application (I usually put 999).

  • I want to keep the navbar fixed when it rolls sideways and not down

  • Friend the main thing that I html vc did not put in the question. Edit and put the html and the full CSS if possible. You are using some Bootstrap framework or other?

1 answer

0


How do I enable scroll only on the X axis?

(sic) I want to leave the navbar fixed when it rolls sideways and not down

div.topo {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 70px;

    background-color: rgb(40, 40, 90);
    color: rgb(255, 255, 255);
}
div.conteudo {
    position: absolute;
    top: 70px;
    width: 50%;
    height: 200px;
    overflow-x: scroll;
    overflow-y: scroll; /* PODE ALTERAR PARA "hidden" CASO NÃO QUEIRA SCROLL VERTICAL */
    white-space: nowrap; /* IMPEDE A QUEBRA DE LINHA */
}
div.algo {
    display: inline-block; /* ALINHA OS ELEMENTOS */

    width: 200px;
    height: 150px;

    background-color: rgb(230, 230, 230);
    border: solid 1px rgb(230, 180, 180);
}
<!DOCTYPE html>
<html>
    <head>
        <title>Scroll horizontal - LipESprY</title>
    </head>
    <body>
        <div class="topo">
            Barra topo
        </div>
        <div class="conteudo">
            <div class="algo">Alguma coisa...</div>
            <div class="algo">Alguma coisa...</div>
            <div class="algo">Alguma coisa...</div>
            <div class="algo">Alguma coisa...</div>
            <div class="algo">Alguma coisa...</div>
            <div class="algo">Alguma coisa...</div>
            <div class="algo">Alguma coisa...</div>
            <div class="algo">Alguma coisa...</div>
            <div class="algo">Alguma coisa...</div>
            <div class="algo">Alguma coisa...</div>
        </div>
    </body>
</html>

Take this as an example. Better than this, only if you post the full code of your project instead of prints.

I made my example based on: How to make a DIV not wrap?

  • 1

    Exactly that! Thank you

Browser other questions tagged css rolling

You are not signed in. Login or sign up in order to post.