Navbar disappearing at lower resolution

Asked

Viewed 507 times

1

I’m putting together a project with Bootstrap but I am facing some problems, one of them is the navbar disappearing when the resolution decreases. The other is I can’t write a title right in the middle of the screen.

Navbar with a problem.

navbar com problema

HTML

    <header id="header">
     <div id="header-overlay"></div>
    </header>
    <div id="col-md-12">
    <nav class="navbar navbar-expand-md fixed-top py-3 box-shadow mt-5">
     <a href="index.html" class="navbar-brand">LOGO</a>

    <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarSupportedContent" aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Abrir Navegação">
      <span class="navbar-toggler-icon"></span>
    </button>

    <div class="collapse navbar-collapse" id="navbarSupportedContent">
      <ul class="navbar-nav ml-auto">

        <li class="nav-item">
          <a class="nav-link text-white" href="#sobre">Sobre</a>
        </li>
        <li class="nav-item">
          <a class="nav-link text-white" href="#solucoes">Soluções</a>
        </li>
        <li class="nav-item">
          <a class="nav-link text-white" href="#contato">Contato</a>
        </li>
        <li class="nav-item dropdown">
          <a class="nav-link dropdown-toggle text-white" href="#" id="navbarDropdown" role="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">PT</a>
          <div class="dropdown-menu" aria-labelledby="navbarDropdown">
            <a class="dropdown-item" href="#">EN</a>
            <a class="dropdown-item" href="#">ES</a>
          </div>
        </li>
        <li class="nav-item ml-3">
          <button type="button" class="btn btn-outline-light btn-lg">Entrar</button>
        </li>
      </ul>
    </div>
  </nav>
</div>

CSS

/*Header*/
#header {
 background: url("../img/header-bg.jpg");
 background-size: cover;
 background-position: center;
 position: relative;
 top: 0;
 bottom: 0;
 height: 90%;
 z-index: -10;
 }

#header-overlay {
 position: absolute;
 background-color: rgba(0, 0, 0, 0.4);
 top: 0;
 bottom: 0;
 height: 100%;
 width: 100%;
 z-index: -5;
}

Another problem I’m facing is that I need to write a text in the middle of this screen but when you write it continues on the side of navbar and get shot of tag nav he writes below, I need to put on the image the text and when the image ends start the content of the site.

css twitter-bootstrap bootstrap-4

1 answer

1


First your Navbar BTN is there, it just doesn’t appear because you didn’t use a color class in Navbar type navbar-light, or navbar-light. In the example I put navbar-dark pro btn go white.

About the text I did not understand... if you want the text after the image is just put one container>row>col> your text, see in the example to better understand. To align the text in the center use the native Bootstrap class text-center

html, body {
    width: 100%;
    height: 100%;
    margin: 0;
    padding: 0;
}
  /*Header*/
#header {
 background: url(https://placecage.com/300/200);
 background-size: cover;
 background-position: center;
 position: relative;
 top: 0;
 bottom: 0;
 height: 90%;
 z-index: -10;
 }

#header-overlay {
 position: absolute;
 background-color: rgba(0, 0, 0, 0.4);
 top: 0;
 bottom: 0;
 height: 100%;
 width: 100%;
 z-index: -5;
}

#header h1 {
  position: relative;
  top: 45%;
}
<link rel="stylesheet" type="text/css" media="screen" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" />

<script src="https://code.jquery.com/jquery-3.2.1.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.9/umd/popper.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta.3/js/bootstrap.bundle.min.js"></script>

<header id="header">
  <div id="header-overlay"></div>
  <h1 class="text-center text-light">Meu texto 123</h1>
</header>
<div id="col-md-12">
  <nav class="navbar navbar-expand-md navbar-dark fixed-top py-3 box-shadow mt-5">
    <a href="index.html" class="navbar-brand">LOGO</a>

    <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarSupportedContent"
      aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Abrir Navegação">
      <span class="navbar-toggler-icon"></span>
    </button>

    <div class="collapse navbar-collapse" id="navbarSupportedContent">
      <ul class="navbar-nav ml-auto">

        <li class="nav-item">
          <a class="nav-link text-white" href="#sobre">Sobre</a>
        </li>
        <li class="nav-item">
          <a class="nav-link text-white" href="#solucoes">Soluções</a>
        </li>
        <li class="nav-item">
          <a class="nav-link text-white" href="#contato">Contato</a>
        </li>
        <li class="nav-item dropdown">
          <a class="nav-link dropdown-toggle text-white" href="#" id="navbarDropdown" role="button" data-toggle="dropdown"
            aria-haspopup="true" aria-expanded="false">PT</a>
          <div class="dropdown-menu" aria-labelledby="navbarDropdown">
            <a class="dropdown-item" href="#">EN</a>
            <a class="dropdown-item" href="#">ES</a>
          </div>
        </li>
        <li class="nav-item ml-3">
          <button type="button" class="btn btn-outline-light btn-lg">Entrar</button>
        </li>
      </ul>
    </div>
  </nav>
</div>

  • I need the text to be inside the image, like a presentation, then start the content.

  • And as you can see in my css I left the image with 100vh, because it was the only way I could display it without cutting, however 100vh is very large, I need it to be smaller but not cut.

  • @Guilhermerigotti looks there the code I made an edit, your H1 text has to stay inside the header. and then just adjust with a top on it. On the image actually she is 90% of the height...

  • about the image was my trip, I’ve seen here that’s correct. I’ll try to put the text now.

  • @Guilhermerigotti he needs css tb, look at the code, I left at the end the CSS for this H1 #header h1 {&#xA; position: relative;&#xA; top: 45%;&#xA;} and html is inside the div <header id="header"> ... <h1> </header>

  • 1

    Fixed, my haha mistake. thank you very much man

  • @Guilhermerigotti take young, qq doubt we are in the area!

  • Since you asked, how do I position a a to suit any resolution, because the way I’m doing padding in your hand is not rolling.

  • It comes after the header texts, a button underneath them, the texts are already ok.

  • Type that after the H1 text you want a tag <a> to be able to make a btn etc is this?

  • And like there’s no way I can click my button, because to do the overlay I used a z-index in the header and in the overlay to put it there, the option would be to put the button inside the nav ?

  • That’s right @hugocsl

  • Was there no way I could do all this using bootstrap ? An overlay on the header image with a navbar on top and a text in the center, all using a fixed image size, for example I don’t want the image of its full size, but I don’t want to cut it, I just need to decrease it in css.

  • I don’t know if you understood what I needed

  • @Guilhermerigotti face understood yes, the negative z-index does not leave the element clickable! The truth is that this header yours with bootstrap is not well formatted no. I mean the structure in HTML, that’s why you need to do so much "nice" there... I think you should take advantage that you are at the beginning and stop half an hour to see the documentation of the Bootstrap Grid. It will help you A LOT!!

  • I even think I can solve this. Taking the text from Header. But to leave it there again we will have to do another "way". Way that would be much better to do if you were with BS4 Grid straight. I think you can open another question, talk about this problem of Z-index and link, and ask for help with Grid, saying that the way it is you are having alignment problems and the link is inaccessible etc... Then I or another member can help you better.

  • If you want to fix the text in the same gambit you can put the H1 outside Heade. And change H1’s CSS to that: h1 {&#xA; position: absolute;&#xA; top: 45%;&#xA; left: 50%;&#xA; transform: translateX(-50%);&#xA;}

  • I think I better redo it then, because if it’s not going to get Gambi on top of Gambi. But you have some idea of how to make the image in the format I need with bootstrap ?

  • @Guilhermerigotti yes vc can use a container-Fluid, or a jombotron from Boostrap 4 and put in it a background-image and the text inside etc. It’s not very secret. You should even be able to take advantage of your navbar, the problem is the organization of html and the use of the grid...

Show 14 more comments

Browser other questions tagged css twitter-bootstrap bootstrap-4

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