-2

You heard the title. I'm working on a webpage at www.thundergamingforums.com and I can't seem to find how to do that. Please explain in CSS/HTML, however if you need to please completely rewrite the code in whatever language it takes.

    <!DOCTYPE html>
<html>
<head>
<style>
#navbarc {}

#navbarc ul {
    list-style-type: none;
    margin: 0;
    padding: 0;
    overflow: hidden;
    background-color: #222;
}

#navbarc li {
    float: left;
}

#navbarc li a {
    display: block;
    color: white;
    text-align: center;
    padding: 14px 16px;
    text-decoration: none;
}

#navbarc li a:hover:not(.active) {
    background-color: #111;
    transition: color .1s;
    color: #00a6ff;
}

#navbarc .active {
    background-color: #00a6ff;
}
</style>
</head>
<body>
<div id="navbarc">
<ul>
  <li><a class="active" href="#home">Home</a></li>
  <li><a href="#about">Forums</a></li>
  <li><a href="https://www.youtube.com/channel/UCUKBcVKyI6rpgBFu9Zp5_ZA">Youtube</a></li>
  <li><a href="http://steamcommunity.com/groups/officialthundergaming">Steam Group</a></li>

</ul>
</div>
</body>
</html>
Joe Thompson
  • 1
  • Duplicate of https://stackoverflow.com/questions/14667829/how-to-create-a-sticky-navigation-bar-that-becomes-fixed-to-the-top-after-scroll – Vandesh Jul 31 '17 at 18:42

2 Answers2

0

Using html/css, you can use position: sticky though it's worth noting it has limited browser support http://caniuse.com/css-sticky/embed/

body {
  padding-top: 100px;
  height: 300vh;
}

#navbarc {
  position: sticky;
  top: 0;
}
<!DOCTYPE html>
<html>

<head>
  <style>
    #navbarc {
    }
    
    #navbarc ul {
      list-style-type: none;
      margin: 0;
      padding: 0;
      overflow: hidden;
      background-color: #222;
    }
    
    #navbarc li {
      float: left;
    }
    
    #navbarc li a {
      display: block;
      color: white;
      text-align: center;
      padding: 14px 16px;
      text-decoration: none;
    }
    
    #navbarc li a:hover:not(.active) {
      background-color: #111;
      transition: color .1s;
      color: #00a6ff;
    }
    
    #navbarc .active {
      background-color: #00a6ff;
    }
  </style>
</head>

<body>
  <div id="navbarc">
    <ul>
      <li><a class="active" href="#home">Home</a></li>
      <li><a href="#about">Forums</a></li>
      <li><a href="https://www.youtube.com/channel/UCUKBcVKyI6rpgBFu9Zp5_ZA">Youtube</a></li>
      <li><a href="http://steamcommunity.com/groups/officialthundergaming">Steam Group</a></li>

    </ul>
  </div>
</body>

</html>
Michael Coker
  • 52,626
  • 5
  • 64
  • 64
0

If I am correct you want to stick your nav bar to the top of the screen when it touches the top of the screen.

You may require jQuery for doing this with the help of scrollTop method.

<script>
var stickyNavTop = $('#navbarc').offset().top;

$(window).scroll(function() {  
    if ($(window).scrollTop() > stickyNavTop) {
        $('#navbarc').addClass('fixed');
    }
    else {
        $('#navbarc').removeClass('fixed');
    }  
});
</script>
Aamir J
  • 23
  • 5