navbar bootstrap is not at the top of the page

Asked

Viewed 113 times

0

I am at the beginning of the production of a site, but my navbar is not in the top, it is in the middle of the page:

print

my html is like this:

<body>  
<nav class="navbar navbar-expand-lg navbar-light bg-light">
  <a class="navbar-brand" href="#">Navbar</a>
  <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#conteudoNavbarSuportado" aria-controls="conteudoNavbarSuportado" aria-expanded="false" aria-label="Alterna navegação">
    <span class="navbar-toggler-icon"></span>
  </button>

  <div class="collapse navbar-collapse" id="conteudoNavbarSuportado">
    <ul class="navbar-nav mr-auto">
      <li class="nav-item active">
        <a class="nav-link" href="#">Home <span class="sr-only">(página atual)</span></a>
      </li>
      <li class="nav-item">
        <a class="nav-link" href="#">Link</a>
      </li>
      <li class="nav-item dropdown">
        <a class="nav-link dropdown-toggle" href="#" id="navbarDropdown" role="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
          Dropdown
        </a>
        <div class="dropdown-menu" aria-labelledby="navbarDropdown">
          <a class="dropdown-item" href="#">Ação</a>
          <a class="dropdown-item" href="#">Outra ação</a>
          <div class="dropdown-divider"></div>
          <a class="dropdown-item" href="#">Algo mais aqui</a>
        </div>
      </li>
      <li class="nav-item">
        <a class="nav-link disabled" href="#">Desativado</a>
      </li>
    </ul>
  </div>
</nav>

my css has basically nothing yet, just for the background image:

body{
    background-image: url("../img/backpage.jpg");
    background-color: rgba(64, 118, 182, 1);
    background-repeat: no-repeat;
    background-size: auto;
    background-attachment: fixed;

if anyone can help me I appreciate

html css twitter-bootstrap

1 answer

0


Hello,

As you are using Bootstrap I suppose, just add the class Fixed-top on your navbar.

<nav class="navbar navbar-expand-lg navbar-light bg-light fixed-top">

I hope it helped. :)

Browser other questions tagged html css twitter-bootstrap

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