Centralize a NAV - With video background

Asked

Viewed 55 times

1

I need to center a text, but with justify-content: center and align-items: center I’m not getting through.

Not even if I put for example, top: 50% and left: 50%, items are not exactly in the middle. Maybe some are missing div or something like that, what I need to do to center?

Follows the code:

@font-face {
  font-family: 'Gotham';
  src: url('Gotham-Medium.otf');
  src: url('Gotham-Medium?#iefix') format('embedded-opentype'), url('fonts/Gotham-Medium.otf') format('otf'), url('Gotham-Medium.ttf') format('truetype');
  font-weight: normal;
  font-style: normal;
}

@font-face {
  font-family: 'Gotham-Light';
  src: url('Gotham-Light.otf');
  src: url('Gotham-Light?#iefix') format('embedded-opentype'), url('fonts/Gotham-Light.otf') format('otf'), url('fonts/Gotham-Light.ttf') format('truetype');
  font-weight: normal;
  font-style: normal;
}

.gotham {
  font-family: 'Gotham', sans-serif;
}

.gotham-light {
  font-family: 'Gotham-Light', sans-serif;
}

body {
  margin: 0;
}

header {
  overflow: hidden;
}

.background {
  position: fixed;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  min-width: 100%;
  min-height: 100%;
  width: auto;
  height: auto;
  z-index: -1;
}

.conteudo {
  display: inline;
  justify-content: center;
  align-items: center;
  color: #fff;
  font-weight: 275;
  width: 40%;
}

.conteudo ul {
  list-style: none;
}

.conteudo ul li {
  display: inline;
}

.conteudo ul a {
  color: black;
  font-size: 22px;
  padding-right: 8px;
  text-decoration: none;
  padding: 0.67rem 1.25rem;
  margin-right: 50px;
  border: 1px solid;
  border-color: #fff;
  background-color: #fff;
}

.conteudo ul a:hover {
  background-color: transparent;
  color: #fff;
}

.conteudo h1 {
  font-size: 92px;
}

@media only screen and (max-width: 1277px) {
  .conteudo ul a {
    margin-bottom: 5%;
    display: flex;
    font-size: 20px;
  }
}

@media only screen and (max-width: 375px) {
  .conteudo {
    width: auto;
  }
}

@media only screen and (max-width: 1277px) {
  .conteudo h1 {
    font-size: 70px;
    text-align: center;
  }
}
<!DOCTYPE html>
<html lang="pt-br">

<head>
  <!-- Mobile Specific Meta -->
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <!-- Favicon-->
  <link rel="shortcut icon" href=".png">
  <!-- Author Meta -->
  <!-- meta character set -->
  <meta charset="UTF-8">
  <!-- Site Title -->
  <title>Farol Filmes</title>

  <script src="js/main.js"></script>
  <script src="jquery-1.3.2.min.js" type="text/javascript"></script>
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

  <!--CSS============================================= -->
  <link href="https://owlcarousel2.github.io/OwlCarousel2/assets/owlcarousel/assets/owl.carousel.min.css" rel="stylesheet" />
  <link href="https://owlcarousel2.github.io/OwlCarousel2/assets/owlcarousel/assets/owl.theme.default.min.css" rel="stylesheet" />
  <link rel="stylesheet" href="css/linearicons.css">
  <link rel="stylesheet" href="css/bootstrap.css">
  <link rel="stylesheet" href="css/magnific-popup.css">
  <link rel="stylesheet" href="css/animate.min.css">
  <link rel="stylesheet" href="css/teste.css">
  <link rel="shortcut icon" href="favicon.ico" type="image/x-icon">
  <link rel="icon" href="favicon.ico" type="image/x-icon">
</head>

<body>
  <header>
    <video loop muted autoplay class="background">
   				 	<source src="video\background.mp4" type="video/mp4">	
  				</video>

  </header>
  <nav class="conteudo">
    <h1><span class="gotham-light">GUI</span> <span class="gotham">LUCCA</span></h1>
    <br>
    <ul class="gotham">
      <li><a href="#">Filme</a></li>
      <li><a href="#">Fotos</a></li>
      <li><a href="#">Contato</a></li>
    </ul>
  </nav>

  <script src="js/vendor/jquery-2.2.4.min.js"></script>
  <script src="js/vendor/bootstrap.min.js"></script>
  <script src="js/main.js"></script>
</body>

</html>

http://prntscr.com/kyjfjy

css html5 twitter-bootstrap bootstrap-4 nav-bar

  • Which version of Bootstrap you are using?

  • Bootstrap v4.0.0-beta

  • Cool young, but from what I saw you are practically not using Bootstrap classes right... qq way I edited my answer and includes the CDN of BS 4, but it has not changed at all the result of the code

1 answer

0


Face your problem is that you set the display on NAV as display:inline should be diplay:flex so you can use the properties justify-content: center and align-items: center. Also you have to declare the height and width of the document to be aligned in the center of the screen.

Look at the example. I didn’t touch anything in HTML, only with CSS. But you need to do the @media to treat your layout on smaller screens. Display in "Whole Page" to better see this result.

html, body {
        height: 100%;
        width: 100%;
        padding: 0;
        margin: 0;
    }
    @font-face {
    font-family: 'Gotham';
    src: url('Gotham-Medium.otf');
    src: url('Gotham-Medium?#iefix') format('embedded-opentype'), url('fonts/Gotham-Medium.otf') format('otf'), url('Gotham-Medium.ttf') format('truetype');
    font-weight: normal;
    font-style: normal;
  }
  
  @font-face {
    font-family: 'Gotham-Light';
    src: url('Gotham-Light.otf');
    src: url('Gotham-Light?#iefix') format('embedded-opentype'), url('fonts/Gotham-Light.otf') format('otf'), url('fonts/Gotham-Light.ttf') format('truetype');
    font-weight: normal;
    font-style: normal;
  }
  
  .gotham {
    font-family: 'Gotham', sans-serif;
  }
  
  .gotham-light {
    font-family: 'Gotham-Light', sans-serif;
  }
  
  body {
    margin: 0;
  }
  
  header {
    overflow: hidden;
  }
  
  .background {
    position: fixed;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    min-width: 100%;
    min-height: 100%;
    width: auto;
    height: auto;
    z-index: -1;
  }
  
  .conteudo {
    display: flex;
    justify-content: center;
    align-items: center;
    flex-direction: column;
    color: #fff;
    font-weight: 275;
    width: 100%;
    height: 100%;
  }
  
  .conteudo ul {
    list-style: none;
  }
  
  .conteudo ul li {
    display: inline;
  }
  
  .conteudo ul a {
    color: black;
    font-size: 22px;
    padding-right: 8px;
    text-decoration: none;
    padding: 0.67rem 1.25rem;
    margin-right: 50px;
    border: 1px solid;
    border-color: #fff;
    background-color: #fff;
  }
  
  .conteudo ul a:hover {
    background-color: transparent;
    color: #fff;
  }
  
  .conteudo h1 {
    font-size: 92px;
  }
  
  @media only screen and (max-width: 1277px) {
    .conteudo ul a {
      margin-bottom: 5%;
      display: flex;
      font-size: 20px;
    }
  }
  
  @media only screen and (max-width: 375px) {
    .conteudo {
      width: auto;
    }
  }
  
  @media only screen and (max-width: 1277px) {
    .conteudo h1 {
      font-size: 70px;
      text-align: center;
    }
  }
  <link rel="stylesheet" type="text/css" media="screen" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" />

<header>
  <video loop muted autoplay class="background">
      <source src="https://www.w3schools.com/tags/movie.mp4" type="video/mp4">	
  </video>
</header>

<nav class="conteudo">
  <h1><span class="gotham-light">GUI</span> <span class="gotham">LUCCA</span></h1>
  <br>
  <ul class="gotham">
    <li><a href="#">Filme</a></li>
    <li><a href="#">Fotos</a></li>
    <li><a href="#">Contato</a></li>
  </ul>
</nav>

  • It worked here, thank you very much. For align to work you always have to declare the html and body size at the beginning ?

  • @Lucascorrêa is always good to declare the height of the document, because without a height in the father you can not align the son understands. But how good it worked! If my reply has helped you in any way consider marking it as Accept, on this icon ✔ below the arrows on the left side of my answer :) so the site does not get the open question and already has the answer. And any other doubt is just give the touch I give you a boost.

Browser other questions tagged css html5 twitter-bootstrap bootstrap-4 nav-bar

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