CODEWITHSUNDEEP
htmlcss
Robdll
Robdll

Reputation: 6263

How to implement a fixed navbar

I was playing on codepen to build a bsic single page portfolio, and i wanted to create a fixed navbar followed by a couple of section. The navbar must be fixed. For some unknown reason, my navbar seems to take more space then it should, and the content can be visible above it.

I can't spot the error, is anyone willing to help me?

body {
  background-color: black;
  font-size: 2em;
  color: white;
  height: 100vh;
}

a,
a:hover,
a:visited,
a:link,
a:active {
  color: inherit;
  text-decoration: none;
}

a:hover {
  text-decoration: none;
  animation-name: nav-link-hover;
  animation-duration: 1.5s;
  animation-fill-mode: forwards;
  animation-timing-function: ease-out
}

nav {
  display: flex;
  justify-content: space-between;
  position: fixed;
  top: 0;
  overflow: hidden;
  width: 100%;
  border-bottom: 1px dotted white;
}

main {
  height: 100%;
  margin-top: 50px;
}

section {
  height: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
  border: 1px solid red;
}


/** ANIMATION */

@keyframes nav-link-hover {
  from {
    color: white;
  }
  to {
    color: LawnGreen;
  }
}


/** MEDIA QUERY */

@media (min-width: 1200px) {
  body {
    width: 1140px;
    max-width: 100%;
  }
}
<nav>
  <a href="#me">Rob.dll </a>
  <a href="#portfolio">Portfolio</a>
</nav>
<main>
  <section> dada1 </section>
  <section> dada2 </section>
</main>

Here's the codepen

Upvotes: 1

Views: 88

Answers (1)

blecaf
blecaf

Reputation: 1645

I see you are using bootstrap. To have a fixed header which is not full width you have to use media query to make it align with the rest of the containers. So i had to put media queries to fit the bootstrap containers. See below i hope it helps. https://codepen.io/blecaf/pen/PmmJav

body {
  background-color: black;
  font-size: 2em;
  color: white;
  height: 100vh;
}

a,
a:hover,
a:visited,
a:link,
a:active {
  color: inherit;
  text-decoration: none;
}

a:hover {
  text-decoration: none;
  animation-name: nav-link-hover;
  animation-duration: 1.5s;
  animation-fill-mode: forwards;
  animation-timing-function: ease-out
}

nav {
  display: flex;
  justify-content: space-between;
  position: fixed;
  top: 0;
  overflow: hidden;
  width: 100%;
  left: 0;
  border-bottom: 1px dotted white;
  
}

main {
  height: 100%;
  margin-top: 50px;
}

section {
  height: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
  border: 1px solid red;
}


/** ANIMATION */

@keyframes nav-link-hover {
  from {
    color: white;
  }
  to {
    color: LawnGreen;
  }
}

.fixed-header {
  max-width: 1110px;
  width: 100%;
  border: 1px yellow solid;
  margin: 0 auto;
  display: flex;
  justify-content: space-between;
}


/** MEDIA QUERY */

@media (min-width: 576px) {
  .fixed-header {
    max-width: 510px;
  }
}

@media (min-width: 768px) {
  .fixed-header {
    max-width: 690px;
  }
}

@media (min-width: 992px) {
  .fixed-header {
    max-width: 930px;
  }
}

@media (min-width: 1200px) {
  body {
    width: 1140px;
    max-width: 100%;
  }
  .fixed-header {
    max-width: 1110px;
  }
}
<link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.0.0-alpha.6/css/bootstrap.min.css" rel="stylesheet"/>
<body class="container">
<nav>
  <div class="fixed-header">
  <a href="#me">Rob.dll </a>
  <a href="#portfolio">Portfolio</a>
  </div>
</nav>
<main>
  <section>    dada1  </section>
  <section>    dada2   </section>
</main>
<body>

Upvotes: 1

Related Questions