Question 43867 in Html Question posted in
Some basic documentation can be found here.

Overflow hidden – Html

I want my navbar to be sticky on the top all the time even when i scroll but when i scroll, the content of my cards dont cut, so it´s content goes on top of my navbar and i dont understand what i am missing? Any thougts? Im using bootstrap 5.

nav {
  background-color: black;
  position: sticky;
  overflow: hidden;
  top: 0px;
  padding: 0;
  border: 2px solid green;
}

.nav {
  color: lightgrey;
  float: left;
  margin: 1vw;
}
<nav>
  <a href="../../index.html" class="nav">Home</a>
  <a href="./products.html" class="nav">Products</a>
  <a href="./about.html" class="nav">About us</a>
  <a href="./contact.html" class="nav">Contact</a>
</nav>

<main class="container">
  <div class="row gy-3">
    <div class="col-md-3">
      <div class="card">
        <img src="https://via.placeholder.com/99" class="card-img-top" alt="...">
        <div class="card-body">
          <h5 class="card-title">Card title</h5>
          <p class="card-text">Some quick example text
           to build on the card title and make up the 
            bulk of the card's content.</p>
          <a href="#" class="btn btn-primary">Go somewhere</a>
        </div>
      </div>
    </div>
  </main>

I also tried and put the img in my card inside a div and use overflow:hidden;…it didnt work.

Tags:

2

Answers


  1. 0

    Put some z-index to your nav. like z-index: 10;
    https://developer.mozilla.org/en-US/docs/Web/CSS/z-index

    Login or Signup to reply.
  2. 0

    If the navbar should be at the top of your window all the time without moving, use position: fixed instead of sticky

    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search