Html - How to fix CSS grid overlapping my navbar?

vernie
February 2, 2024
70 views
0 votes
2 Answers

I am a bit new to HTML and CSS. I am not sure how to fix my grids with overlay overlapping my sticky navbar. I created the grid using this method:

        <section id="projects">
            <h2>PROJECTS</h2>
            <div class="grid-container">
                <div class="grid-item">
                    <p><b>Project 1</b></p>
                    <img src="image1.png" alt="image1" class="image1>
                    <div class="overlay">
                        <div class="projects-text">
                            Placeholder
                            <br><a class="repo-text" href="">Repo Link</a> 
                        </div>
                    </div>
                </div>
                <div class="grid-item">
                    <p><b>Project 2</b></p>
                    <img src="image2.jpg" alt="image2" class="image2">
                    <div class="overlay">
                        <div class="projects-text">
                            Placeholder
                            <br><a class="repo-text" href="">Repo Link</a>
                        </div>
                    </div>
                </div>
                <div class="grid-item">
                    <p><b>Project 3</b></p>
                    <img src="image3.jpg" alt="image3" class="image3">
                    <div class="overlay">
                        <div class="projects-text">
                            Placeholder
                            <br><a class="repo-text" href="">Repo Link</a>
                        </div>
                    </div>
                </div>
            </div>
        </section>

and with this CSS:

.grid-container {
    display: grid;
    grid-template-columns: auto auto auto;
    padding: 10px;
    grid-column-gap: 20px;
    grid-row-gap: 20px;
}

.grid-item {
    background-color: white;
    border: 5px solid lavender;
    border-radius: 15px;
    padding: 20px;
    font-size: 30px;
    text-align: center;
    justify-content: center;
    height: 350px;
    position: relative;
}

.overlay {
    position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
    height: 100%;
    width: 100%;
    opacity: 0;
    transition: .5s ease;
    background-color: lavender;
}

.grid-item:hover .overlay{
    opacity: 1;
}

This is my navbar:

        <nav>
            <ul>
                <li><a href=""></a></li>
                <li><a href=""></a></li>
                <li><a href=""></a></li>
                <li><a href=""></a></li>
                <li><a href=""></a></li>
            </ul>
        </nav>

nav {
    overflow: hidden;
    width: 100%;
}

nav ul {
    list-style-type: none;
    margin: 0;
    padding: 0;
    overflow: hidden;
    top: 0;
    width: 100%;
    position: fixed;
}

nav li {
    font-family: "";
    float: left;
}

nav a {
    display: block;
    text-align: center;
    padding: 14px 16px;
    text-decoration: none;
    position: relative;
}

nav a::after {
    content: "";
    display: block;
    position: absolute;
    left: 0;
    bottom: 0;
    width: 0;
    height: 5px;
    transition: width 0.3s ease;
}

nav a:hover::after {
    width: 100%;
}

After commenting out lines of code, I realized the problem was with the position:relative in .grid-item, but if I remove it or change the property, the overlaying effect doesn’t work anymore. How do I fix this, or is there a better way to implement this?

Tags: css html

Answers

position: fixed takes the ul element out of normal flow, making the header collapse to 0 height and probably hiding it entirely.

Using a flexbox container instead would let you split the page’s height into a static header and a body that fills the remaining space.

.layout {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  justify-content: stretch;
}

nav {
  flex: none;
  overflow: hidden;
  border-bottom: 1px solid #0002;
}
nav ul {
  list-style-type: none;
  margin: 0;
  padding: 0;
  overflow: hidden;
  width: 100%;
}
nav li {
  float: left;
}
nav a {
  display: block;
  padding: 14px 16px;
  text-decoration: none;
}

main {
  flex: 1 1 auto;
  height: 0;
  contain: content;
  overflow-y: auto;
  padding: 10px;
}

<div class="layout">
  <nav>
      <ul>
          <li><a href="">Home</a></li>
          <li><a href="">Something</a></li>
          <li><a href="">Something</a></li>
          <li><a href="">Contact</a></li>
      </ul>
  </nav>
  <main>
    Page content...
    <br><br><br><br><br><br><br><br>
    ... that may require scrolling
  </main>
</div>

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>CSS Grid</title>

    <style>
        
        nav {
            display: grid;
            grid-template-columns: auto auto auto;
            gap: 5px;
        }
 
 
        nav a {
 
            text-align: center;
            padding: 14px 16px;
            text-decoration: none;
            background-color: hsl(60, 56%, 61%);

        }

        nav a:hover {
            background-color: hsl(60, 56%, 81%);
        }


        .grid-item {
            background-color: white;
            border: 5px solid lavender;
            border-radius: 15px;
            padding: 20px;
            font-size: 30px;
            text-align: center;
            justify-content: center;
            height: 350px;
            cursor: pointer;
        }

        .grid-item:hover {
            background-color: beige;
        }








    </style>

</head>
<body>

    <nav>
        <a href="">Link 1</a>
        <a href="">Link 2</a>
        <a href="">Link 3</a>
    </nav>

    <section id="projects">

        <h2>PROJECTS</h2>
        
            <div class="grid-item">
                <p><b>Project 1</b></p>
                <img src="image1.png" alt="image1" class="image1>
                <div class="overlay">
                    <div class="projects-text">
                        Placeholder
                        <br><a class="repo-text" href="">Repo Link</a> 
                    </div>
                </div>
            </div>

            <div class="grid-item">
                <p><b>Project 2</b></p>
                <img src="image2.jpg" alt="image2" class="image2">
                <div class="overlay">
                    <div class="projects-text">
                        Placeholder
                        <br><a class="repo-text" href="">Repo Link</a>
                    </div>
                </div>
            </div>
            
            <div class="grid-item">
                <p><b>Project 3</b></p>
                <img src="image3.jpg" alt="image3" class="image3">
                <div class="overlay">
                    <div class="projects-text">
                        Placeholder
                        <br><a class="repo-text" href="">Repo Link</a>
                    </div>
                </div>
            </div>
        
    </section>

</body>
</html>

In fact you need grid only at nav level, if at all you desire to use grid somewhere on your page.

Please signup or login to give your own answer.

Click here to cancel reply.

Html – How to fix CSS grid overlapping my navbar?

Answers