Search code examples
htmlcssnavigationnavfixed

fixed navbar hides content when jumping from navigation to part of page

When I click on navigation, for example- Home, I'ill get to Home but it starts from behind the navigation and I want to have it start below navigation. I already tried body padding-top but nothing happens. IDK how to fix that.

Here is code:

html,
body,
#pages {
  font-family: Arial, Helvetica;
  line-height: 1.25;
  padding: 0;
  margin: 0;
  background-color: #0d0d0d;
  color: #e6e6e6;
}


/* Global */

.container {
  width: 85%;
  margin: auto;
  overflow: hidden;
}

.container1 {
  width: 100%;
  margin: auto;
  overflow: hidden;
}

#First a {
  border-left: 2px solid #808080;
  border-bottom-left-radius: 5px;
  border-top-left-radius: 5px;
}

#Last a {
  border-right: 2px solid #808080;
  border-bottom-right-radius: 5px;
  border-top-right-radius: 5px;
}


/* Header */

header {
  overflow: hidden;
  background-color: #e6e6e6;
  color: #0d0d0d;
  padding-top: 10px;
  margin: 0;
  min-height: 70px;
  border-bottom: #808080 5px solid;
  position: fixed;
  width: 100%;
  top: 0px;
}

header a {
  font-weight: bold;
  text-decoration: none;
  font-size: 20px;
  color: #e6e6e6;
  margin: 0px;
  padding: 10px;
  background-color: #0d0d0d;
  border-top: 2px solid #808080;
  border-bottom: 2px solid #808080;
}

header a:hover {
  color: #0d0d0d;
  background-color: #e6e6e6;
}

header ul {
  margin: 0;
  padding: 0;
}

header li {
  float: left;
  display: inline-block;
  padding: 5px 0px 10px 0px;
}

header .logo {
  float: left;
}

header .logo h1 {
  margin-top: 10px;
}

header nav {
  float: right;
  margin-top: 15px
}


/* Text Boxy */

#pages {
  float: left;
  margin-top: 100px;
  overflow: hidden;
}

.textBox {
  border-radius: 5px;
  border: 3px solid #e6e6e6;
  margin-bottom: 50px;
  margin-top: 100px;
}

.textArea {
  padding: 0 10px;
}

footer {
  background-color: #e6e6e6;
  color: #0d0d0d;
  text-align: center;
  padding-bottom: 1px;
  margin: 0;
}

#footer {
  border-top: 5px #808080 solid;
}
<header>
  <div class="container">
    <div class="logo">
      <h1>Airsoft Košťany</h1>
    </div>

    <nav>
      <ul>
        <li id="First"><a href="#Home">Home</a></li>
        <li><a href="#Team">Team</a></li>
        <li><a href="#Edit">Edit</a></li>
        <li id="Last"><a href="#Kontakt">Kontakt</a></li>
      </ul>
    </nav>

  </div>
  <!-- End Container-->
</header>

<section id="pages">
  <div class="container">
    <div class="textBox" id="Home">
      <div class="textArea">
        <h3>Home</h3>
        <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean sodales, lacus nec posuere laoreet, erat enim lacinia ipsum, sit amet auctor tellus nibh non purus. Fusce nec eros pellentesque, hendrerit justo at, pulvinar sem. Aliquam velit tortor,
          tristique quis consequat ut, dictum vel tellus. Morbi eu facilisis justo. Morbi lobortis placerat nunc, eget facilisis enim facilisis eu. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Vivamus at
          laoreet magna. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Quisque ullamcorper ut odio non sagittis. Aenean in mi ut turpis elementum facilisis. Vestibulum at tortor ut odio efficitur aliquet. Ut pretium pharetra odio quis finibus.</p>
        <br>
        <br>
      </div>
    </div>
    <div class="textBox" id="Team">
      <div class="textArea">
        <h3>Team</h3>
        <p>Dalibor Trampota</p>
        <img src="">
        <p>Hodnost: Zakladatel <br> Role: Sniper <br> PlayStyle: Utočný sniper<br> Výbava: MB4403D Sniper Rifle</p>
        <br>
        <br>

        <p>Vašek Franta Václav</p>
        <img src="">
        <p>Hodnost: <br> Role: Assault <br> PlayStyle: <br> Výbava: AK74-S</p>
        <br>
        <br>
      </div>
    </div>
    <div class="textBox" id="Edit">
      <div class="textArea">
        <h3>Edit</h3>
        <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean sodales, lacus nec posuere laoreet, erat enim lacinia ipsum, sit amet auctor tellus nibh non purus. Fusce nec eros pellentesque, hendrerit justo at, pulvinar sem. Aliquam velit tortor,
          tristique quis consequat ut, dictum vel tellus. Morbi eu facilisis justo. Morbi lobortis placerat nunc, eget facilisis enim facilisis eu. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Vivamus at
          laoreet magna. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Quisque ullamcorper ut odio non sagittis. Aenean in mi ut turpis elementum facilisis. Vestibulum at tortor ut odio efficitur aliquet. Ut pretium pharetra odio quis finibus.</p>
        <br>
        <br>
      </div>
    </div>
    <div class="textBox" id="Kontakt">
      <div class="textArea">
        <h3>Kontakt</h3>
        <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean sodales, lacus nec posuere laoreet, erat enim lacinia ipsum, sit amet auctor tellus nibh non purus. Fusce nec eros pellentesque, hendrerit justo at, pulvinar sem. Aliquam velit tortor,
          tristique quis consequat ut, dictum vel tellus. Morbi eu facilisis justo. Morbi lobortis placerat nunc, eget facilisis enim facilisis eu. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Vivamus at
          laoreet magna. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Quisque ullamcorper ut odio non sagittis. Aenean in mi ut turpis elementum facilisis. Vestibulum at tortor ut odio efficitur aliquet. Ut pretium pharetra odio quis finibus.</p>
        <br>
        <br>
      </div>
    </div>
    <div class="textBox" id="Page4">
      <div class="textArea">
        <h3>Edit4</h3>
        <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean sodales, lacus nec posuere laoreet, erat enim lacinia ipsum, sit amet auctor tellus nibh non purus. Fusce nec eros pellentesque, hendrerit justo at, pulvinar sem. Aliquam velit tortor,
          tristique quis consequat ut, dictum vel tellus. Morbi eu facilisis justo. Morbi lobortis placerat nunc, eget facilisis enim facilisis eu. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Vivamus at
          laoreet magna. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Quisque ullamcorper ut odio non sagittis. Aenean in mi ut turpis elementum facilisis. Vestibulum at tortor ut odio efficitur aliquet. Ut pretium pharetra odio quis finibus.</p>
        <br>
        <br>
      </div>
    </div>

  </div>
  <!-- End Container-->
</section>
<div class="container1">
  <footer>
    <div id="footer">
      <p><b>Název Sem, Copyright &copy, 2018</b></p>
    </div>
  </footer>
</div>

And I want fix it with only html and css not javascript, thanks.

Solution

  • Here's a fantastic article that describes how you can do that. To do that, you have to use a pseudo element (::before) and create a negative-margin and a height of your wish to make it visible under navigation. 

    #Home::before { 
  display: block; 
  content: " "; 
  margin-top: -45px; 
  height: 45px; 
  visibility: hidden; 
  pointer-events: none;
}

    And you have to do that for all your ids that you wanted to have internal navigation, like- Home, Team, Edit, Kontakt, etc.

    Here's the full code:

    html,
body,
#pages {
  font-family: Arial, Helvetica;
  line-height: 1.25;
  padding: 0;
  margin: 0;
  background-color: #0d0d0d;
  color: #e6e6e6;
}


/* Global */

.container {
  width: 85%;
  margin: auto;
  overflow: hidden;
}

.container1 {
  width: 100%;
  margin: auto;
  overflow: hidden;
}

#First a {
  border-left: 2px solid #808080;
  border-bottom-left-radius: 5px;
  border-top-left-radius: 5px;
}

#Last a {
  border-right: 2px solid #808080;
  border-bottom-right-radius: 5px;
  border-top-right-radius: 5px;
}


/* Header */

header {
  overflow: hidden;
  background-color: #e6e6e6;
  color: #0d0d0d;
  padding-top: 10px;
  margin: 0;
  min-height: 70px;
  border-bottom: #808080 5px solid;
  position: fixed;
  width: 100%;
  top: 0px;
}

header a {
  font-weight: bold;
  text-decoration: none;
  font-size: 20px;
  color: #e6e6e6;
  margin: 0px;
  padding: 10px;
  background-color: #0d0d0d;
  border-top: 2px solid #808080;
  border-bottom: 2px solid #808080;
}

header a:hover {
  color: #0d0d0d;
  background-color: #e6e6e6;
}

header ul {
  margin: 0;
  padding: 0;
}

header li {
  float: left;
  display: inline-block;
  padding: 5px 0px 10px 0px;
}

header .logo {
  float: left;
}

header .logo h1 {
  margin-top: 10px;
}

header nav {
  float: right;
  margin-top: 15px
}


/* Text Boxy */

#pages {
  float: left;
  margin-top: 100px;
  overflow: hidden;
}

#Home::before {
  display: block;
  content: " ";
  margin-top: -45px;
  height: 45px;
  visibility: hidden;
  pointer-events: none;
}

#Team::before {
  display: block;
  content: " ";
  margin-top: -45px;
  height: 45px;
  visibility: hidden;
  pointer-events: none;
}

#Edit::before {
  display: block;
  content: " ";
  margin-top: -45px;
  height: 45px;
  visibility: hidden;
  pointer-events: none;
}

#Kontakt::before {
  display: block;
  content: " ";
  margin-top: -45px;
  height: 45px;
  visibility: hidden;
  pointer-events: none;
}

.textArea {
  border-radius: 5px;
  border: 3px solid #e6e6e6;
  margin-bottom: 50px;
  margin-top: 100px;
  padding: 0 10px;
}

footer {
  background-color: #e6e6e6;
  color: #0d0d0d;
  text-align: center;
  padding-bottom: 1px;
  margin: 0;
}

#footer {
  border-top: 5px #808080 solid;
}
    <header>
  <div class="container">
    <div class="logo">
      <h1>Airsoft Košťany</h1>
    </div>

    <nav>
      <ul>
        <li id="First"><a href="#Home">Home</a></li>
        <li><a href="#Team">Team</a></li>
        <li><a href="#Edit">Edit</a></li>
        <li id="Last"><a href="#Kontakt">Kontakt</a></li>
      </ul>
    </nav>

  </div>
  <!-- End Container-->
</header>

<section id="pages">
  <div class="container">
    <div class="textBox" id="Home">
      <div class="textArea">
        <h3>Home</h3>
        <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean sodales, lacus nec posuere laoreet, erat enim lacinia ipsum, sit amet auctor tellus nibh non purus. Fusce nec eros pellentesque, hendrerit justo at, pulvinar sem. Aliquam velit tortor,
          tristique quis consequat ut, dictum vel tellus. Morbi eu facilisis justo. Morbi lobortis placerat nunc, eget facilisis enim facilisis eu. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Vivamus at
          laoreet magna. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Quisque ullamcorper ut odio non sagittis. Aenean in mi ut turpis elementum facilisis. Vestibulum at tortor ut odio efficitur aliquet. Ut pretium pharetra odio quis finibus.</p>
        <br>
        <br>
      </div>
    </div>
    <div class="textBox" id="Team">
      <div class="textArea">
        <h3>Team</h3>
        <p>Dalibor Trampota</p>
        <img src="">
        <p>Hodnost: Zakladatel <br> Role: Sniper <br> PlayStyle: Utočný sniper<br> Výbava: MB4403D Sniper Rifle</p>
        <br>
        <br>

        <p>Vašek Franta Václav</p>
        <img src="">
        <p>Hodnost: <br> Role: Assault <br> PlayStyle: <br> Výbava: AK74-S</p>
        <br>
        <br>
      </div>
    </div>
    <div class="textBox" id="Edit">
      <div class="textArea">
        <h3>Edit</h3>
        <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean sodales, lacus nec posuere laoreet, erat enim lacinia ipsum, sit amet auctor tellus nibh non purus. Fusce nec eros pellentesque, hendrerit justo at, pulvinar sem. Aliquam velit tortor,
          tristique quis consequat ut, dictum vel tellus. Morbi eu facilisis justo. Morbi lobortis placerat nunc, eget facilisis enim facilisis eu. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Vivamus at
          laoreet magna. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Quisque ullamcorper ut odio non sagittis. Aenean in mi ut turpis elementum facilisis. Vestibulum at tortor ut odio efficitur aliquet. Ut pretium pharetra odio quis finibus.</p>
        <br>
        <br>
      </div>
    </div>
    <div class="textBox" id="Kontakt">
      <div class="textArea">
        <h3>Kontakt</h3>
        <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean sodales, lacus nec posuere laoreet, erat enim lacinia ipsum, sit amet auctor tellus nibh non purus. Fusce nec eros pellentesque, hendrerit justo at, pulvinar sem. Aliquam velit tortor,
          tristique quis consequat ut, dictum vel tellus. Morbi eu facilisis justo. Morbi lobortis placerat nunc, eget facilisis enim facilisis eu. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Vivamus at
          laoreet magna. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Quisque ullamcorper ut odio non sagittis. Aenean in mi ut turpis elementum facilisis. Vestibulum at tortor ut odio efficitur aliquet. Ut pretium pharetra odio quis finibus.</p>
        <br>
        <br>
      </div>
    </div>
    <div class="textBox" id="Page4">
      <div class="textArea">
        <h3>Edit4</h3>
        <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean sodales, lacus nec posuere laoreet, erat enim lacinia ipsum, sit amet auctor tellus nibh non purus. Fusce nec eros pellentesque, hendrerit justo at, pulvinar sem. Aliquam velit tortor,
          tristique quis consequat ut, dictum vel tellus. Morbi eu facilisis justo. Morbi lobortis placerat nunc, eget facilisis enim facilisis eu. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Vivamus at
          laoreet magna. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Quisque ullamcorper ut odio non sagittis. Aenean in mi ut turpis elementum facilisis. Vestibulum at tortor ut odio efficitur aliquet. Ut pretium pharetra odio quis finibus.</p>
        <br>
        <br>
      </div>
    </div>

  </div>
  <!-- End Container-->
</section>
<div class="container1">
  <footer>
    <div id="footer">
      <p><b>Název Sem, Copyright &copy, 2018</b></p>
    </div>
  </footer>
</div>

    Amd here's the jsfiddle: http://jsfiddle.net/drq9hm70/6/