Guren Guren - 13 days ago 5
CSS Question

How can I make the .header and .nav stay fixed on the top of the viewport?

I am trying to make it so the .header and .nav always stay in a fixed position; effectively so that they never disappear from the viewport.

The interesting part is that I am using FlexBox, and I have never heard of a FlexBox utility that allows me to keep an item fixed to the viewport.

Objective: Make the .header and .nav stay in a fixed position in the viewport.

Can someone help me?



*{
margin:0;
font-family: 'Roboto', sans-serif;
}
.wrapper{
width:100%;
min-width: 960px;
margin:0 auto;
/*display:flex;
align-items: flex-end;
this is just for the night vision button to position better
*/
}
.parent{
display:flex;
flex-wrap: wrap;
/*these two at the bottomr are optional to
center them on the page
max-width: 960px;
margin:0 auto;*/
max-width: 960px;
margin: auto;
}

/*WE MISSED THE .ONE SELECTOR*/
.one{
flex-grow: 1;
}
.title{
text-align: center;
position:relative;
font-size: 50px;
top:20px;
}

.header{
height:100px;
width:100%;
order:0;
border-bottom: 1px solid rgb(0,0,0);
align-self: flex-start;
}

.banner{
width:100%;
min-width: 960px;
height:500px;
color:white;
background-color: rgb(0,0,0);
order:3;
}
.boxOne{
width:45%;
min-width: 200px;
height:300px;
border-right: 1px solid rgb(0,0,0);
order:4;
padding: 5px;
padding-left: 10px;
padding-right: 10px;
padding-top: 10px;
border-left: 1px solid rgb(120,120,120);
text-align: justify;
}
.boxTwo{
width:45%;
min-width: 200px;
height:300px;
order:4;
padding: 5px;
padding-left: 10px;
padding-right: 10px;
padding-top: 10px;
border-right: 1px solid rgb(120,120,120);
}
.footer{
width:100%;
height:100px;
border-top: 1px solid rgb(0,0,0);
border-bottom: 1px solid rgb(0,0,0);
border-right: 1px solid rgb(120,120,120);
border-left: 1px solid rgb(120,120,120);
order:5;
}
.nbar{
display:flex;
-webkit-display:flex;
flex-wrap: wrap;
align-items: stretch;
flex-flow: wrap;
border-bottom: 1px solid rgb(0,0,0);
order:1;
}
.two{
flex-grow: 0;
}
.home {
order:1;
}
.services {
order:2;
}
.testimonials {
order:3;
}
.portfolio {
order:4;
}
.contact {
order:5;
}
li {
display:inline-flex;
padding:10px 40px 10px 60px;
font-size: 15px;
/*border: 1px solid rgb(0,0,0);*/
/*text-align: center;
align-content: stretch;*/
justify-content: center;
background-color: white;
transition: background-color 0.08s linear;
}
li:hover {
color:white;
background-color: rgb(0,0,0);
}

a:link {
text-decoration: none;
color:black;
}

a:visited {
text-decoration: none;
color:black;
}
a:hover {
text-decoration: underline;
color:rgb(255,255,255);

}

.tt:link {
text-decoration: none;
color:black;
}

.tt:visited {
text-decoration: none;
color:black;
}
.tt:hover {
text-decoration: none;
}


.disc{
padding-left: 5px;
padding-top: 5px;
font-size: 10px;
color: rgb(150,150,150);
}
.people{
overflow: hidden;
height:500px;
width:960px;
}
/*.popup {
background-color: white;
height: 20px;
width:90px;
border: 1px solid rgb(255, 0, 0);
position:fixed;
bottom:0;
}*/
/*Removed Mobile version support to allow visualization */

<!DOCTYPE html>
<html>
<!-- dockmann -->
<head>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta charset="UTF-8">
<meta name="description" content="Dockmann Web Services">
<meta name="keywords" content="HTML,CSS,JavaScript">
<meta name="author" content="Paul Aranguren">
<link href="https://fonts.googleapis.com/css?family=Roboto:300" rel="stylesheet">
<link rel="stylesheet" type="text/css" href="style.css" />
<script src="jquery-3.1.1.min.js"></script>
<script type="text/javascript" src="script.js"></script>
</head>
<body>
<div class="wrapper">
<div class="parent">
<div class="one header">
<a class="tt" href="http://www.dockmann.com"><p class="title">DOCKMANN</p></a>
</div>
<!-- end header -->
<div class="one nav">
<ul class="nbar">
<li class="two home">
<a href="http://www.dockmann.com/">HOME</a>
</li>
<li class="two services">
SERVICES
</li>
<li class="two testimonials">
TESTIMONIALS
</li>
<li class="two portfolio">
PORTFOLIO
</li>
<li class="two contact">
CONTACT
</li>
</ul>
</div>
<!-- end nav -->
<div class="one banner">
<img class="people" src="image/macdesk.jpg" />
</div>
<!-- end banner -->
<div class="one boxOne">
<h2>Who we are...</h2>
<br />

</div>
<!-- end boxOne -->
<div class="one boxTwo">
<h2>Where we are</h2>
</div>
<!-- end boxTwo -->
<div class="one footer">
<p class="disc">
Dockmann Corp., herein after referred to as "Dockmann", "Dockmann Corp",
"us", "we", "our", as well as any and all present and future directors of this corporation are not endorsing the <thead>
use of any product shown on this site. <br />This site is purely intended to provide the service mentioned in our page.
</thead>
Dockmann Corp. All rights reserved. ©2016
</p>
</div>
<!-- end footer -->

</div>

<!-- <button class="popup">
Night Vision!
</div> -->
</div>

</body>
</html>




Answer

display:flex and position:absolute/relative and fixed does not go together.

To make the header and nav bar fixed ,wrap it with a div and set its position:fixed. I have changed your markup a bit

check the following snippet

* {
  margin: 0;
  font-family: 'Roboto', sans-serif;
}
.wrapper {
  width: 100%;
  min-width: 960px;
  margin: 0 auto;
  /*display:flex;
  align-items: flex-end;
  this is just for the night vision button to position better
  */
}
.parent {
  display: flex;
  flex-wrap: wrap;
  /*these two at the bottomr are optional to
  center them on the page
  max-width: 960px;
  margin:0 auto;*/
  max-width: 960px;
  margin: auto;
}
.header-content {
  position: fixed;
}
.content-2 {
  position: absolute;
  top: 170px;
}
/*WE MISSED THE .ONE SELECTOR*/

.one {
  flex-grow: 1;
}
.title {
  text-align: center;
  position: relative;
  font-size: 50px;
  top: 20px;
}
.header {
  height: 100px;
  width: 100%;
  order: 0;
  border-bottom: 1px solid rgb(0, 0, 0);
  align-self: flex-start;
}
.banner {
  width: 100%;
  min-width: 960px;
  height: 500px;
  color: white;
  background-color: rgb(0, 0, 0);
  order: 3;
}
.boxOne {
  width: 45%;
  min-width: 200px;
  height: 300px;
  border-right: 1px solid rgb(0, 0, 0);
  order: 4;
  padding: 5px;
  padding-left: 10px;
  padding-right: 10px;
  padding-top: 10px;
  border-left: 1px solid rgb(120, 120, 120);
  text-align: justify;
}
.boxTwo {
  width: 45%;
  min-width: 200px;
  height: 300px;
  order: 4;
  padding: 5px;
  padding-left: 10px;
  padding-right: 10px;
  padding-top: 10px;
  border-right: 1px solid rgb(120, 120, 120);
}
.footer {
  width: 100%;
  height: 100px;
  border-top: 1px solid rgb(0, 0, 0);
  border-bottom: 1px solid rgb(0, 0, 0);
  border-right: 1px solid rgb(120, 120, 120);
  border-left: 1px solid rgb(120, 120, 120);
  order: 5;
}
.nbar {
  display: flex;
  -webkit-display: flex;
  flex-wrap: wrap;
  align-items: stretch;
  border-bottom: 1px solid rgb(0, 0, 0);
  order: 1;
}
.two {
  flex-grow: 0;
}
.home {
  order: 1;
}
.services {
  order: 2;
}
.testimonials {
  order: 3;
}
.portfolio {
  order: 4;
}
.contact {
  order: 5;
}
li {
  display: inline-flex;
  padding: 10px 40px 10px 60px;
  font-size: 15px;
  /*border: 1px solid rgb(0,0,0);*/
  /*text-align: center;
  align-content: stretch;*/
  justify-content: center;
  background-color: white;
  transition: background-color 0.08s linear;
}
li:hover {
  color: white;
  background-color: rgb(0, 0, 0);
}
a:link {
  text-decoration: none;
  color: black;
}
a:visited {
  text-decoration: none;
  color: black;
}
a:hover {
  text-decoration: underline;
  color: rgb(255, 255, 255);
}
.tt:link {
  text-decoration: none;
  color: black;
}
.tt:visited {
  text-decoration: none;
  color: black;
}
.tt:hover {
  text-decoration: none;
}
.disc {
  padding-left: 5px;
  padding-top: 5px;
  font-size: 10px;
  color: rgb(150, 150, 150);
}
.people {
  overflow: hidden;
  height: 500px;
  width: 960px;
}
/*.popup {
  background-color: white;
  height: 20px;
  width:90px;
  border: 1px solid rgb(255, 0, 0);
  position:fixed;
  bottom:0;
}*/

/*Removed Mobile version support to allow visualization */
<html>
<!-- dockmann -->

<head>
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta charset="UTF-8">
  <meta name="description" content="Dockmann Web Services">
  <meta name="keywords" content="HTML,CSS,JavaScript">
  <meta name="author" content="Paul Aranguren">
  <link href="https://fonts.googleapis.com/css?family=Roboto:300" rel="stylesheet">
  <link rel="stylesheet" type="text/css" href="style.css" />
  <script src="jquery-3.1.1.min.js"></script>
  <script type="text/javascript" src="script.js"></script>
</head>

<body>
  <div class="wrapper">
    <div class="parent">
      <div class="header-content">
        <div class="one header">
          <a class="tt" href="http://www.dockmann.com">
            <p class="title">DOCKMANN</p>
          </a>
        </div>
        <!-- end header -->
        <div class="one nav">
          <ul class="nbar">
            <li class="two home">
              <a href="http://www.dockmann.com/">HOME</a>
            </li>
            <li class="two services">
              SERVICES
            </li>
            <li class="two testimonials">
              TESTIMONIALS
            </li>
            <li class="two portfolio">
              PORTFOLIO
            </li>
            <li class="two contact">
              CONTACT
            </li>
          </ul>
        </div>
      </div>
      <div class="content-2">
        <!-- end nav -->
        <div class="one banner">
          <img class="people" src="image/macdesk.jpg" />
        </div>
        <!-- end banner -->
        <div class="one boxOne">
          <h2>Who we are...</h2>
          <br />

        </div>
        <!-- end boxOne -->
        <div class="one boxTwo">
          <h2>Where we are</h2>
        </div>
        <!-- end boxTwo -->
        <div class="one footer">
          <p class="disc">
            Dockmann Corp., herein after referred to as "Dockmann", "Dockmann Corp", "us", "we", "our", as well as any and all present and future directors of this corporation are not endorsing the
            <thead>
              use of any product shown on this site.
              <br />This site is purely intended to provide the service mentioned in our page.
            </thead>
            Dockmann Corp. All rights reserved. ©2016
          </p>
        </div>
        <!-- end footer -->
      </div>

    </div>

    <!-- <button class="popup">
      Night Vision!
    </div> -->
  </div>

</body>

</html>

hope it helps