Follow

Keep Up to Date with the Most Important News

By pressing the Subscribe button, you confirm that you have read and are agreeing to our Privacy Policy and Terms of Use
Follow
Facebook Twitter Instagram Youtube
Contact

Is there a way to put this navigation bar behind this custom background?

byMR
October 21, 2023

I am relatively new to HTML and CSS and I am making an application for school and my custom background is not meshing well with the background grid.
Here is the current code.

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Cool Hexagon Grid (interactive)</title>
</head>
<body>
<div class="container">
    <div class="topnav">
        <a class = active href="{{ url_for('home') }}">Home</a>
        <a href="{{ url_for('read') }}">Read</a>
        <a href="{{ url_for('create') }}">Create</a>
    </div>
    <h1>Cool Text Effect</h1>
    <div class = "row">
        <div class="hexagon"></div>
        <div class="hexagon"></div>
        <div class="hexagon"></div>
        <div class="hexagon"></div>
        <div class="hexagon"></div>
        <div class="hexagon"></div>
        <div class="hexagon"></div>
        <div class="hexagon"></div>
        <div class="hexagon"></div>
        <div class="hexagon"></div>
        <div class="hexagon"></div>
        <div class="hexagon"></div>
        <div class="hexagon"></div>
        <div class="hexagon"></div>
        <div class="hexagon"></div>
        <div class="hexagon"></div>
        <div class="hexagon"></div>
        <div class="hexagon"></div>
        <div class="hexagon"></div>
        <div class="hexagon"></div>
    </div>
    <div class = "row">
        <div class="hexagon"></div>
        <div class="hexagon"></div>
        <div class="hexagon"></div>
        <div class="hexagon"></div>
        <div class="hexagon"></div>
        <div class="hexagon"></div>
        <div class="hexagon"></div>
        <div class="hexagon"></div>
        <div class="hexagon"></div>
        <div class="hexagon"></div>
        <div class="hexagon"></div>
        <div class="hexagon"></div>
        <div class="hexagon"></div>
        <div class="hexagon"></div>
        <div class="hexagon"></div>
        <div class="hexagon"></div>
        <div class="hexagon"></div>
        <div class="hexagon"></div>
        <div class="hexagon"></div>
        <div class="hexagon"></div>
    </div>
    <div class = "row">
        <div class="hexagon"></div>
        <div class="hexagon"></div>
        <div class="hexagon"></div>
        <div class="hexagon"></div>
        <div class="hexagon"></div>
        <div class="hexagon"></div>
        <div class="hexagon"></div>
        <div class="hexagon"></div>
        <div class="hexagon"></div>
        <div class="hexagon"></div>
        <div class="hexagon"></div>
        <div class="hexagon"></div>
        <div class="hexagon"></div>
        <div class="hexagon"></div>
        <div class="hexagon"></div>
        <div class="hexagon"></div>
        <div class="hexagon"></div>
        <div class="hexagon"></div>
        <div class="hexagon"></div>
        <div class="hexagon"></div>
    </div>
    <div class = "row">
        <div class="hexagon"></div>
        <div class="hexagon"></div>
        <div class="hexagon"></div>
        <div class="hexagon"></div>
        <div class="hexagon"></div>
        <div class="hexagon"></div>
        <div class="hexagon"></div>
        <div class="hexagon"></div>
        <div class="hexagon"></div>
        <div class="hexagon"></div>
        <div class="hexagon"></div>
        <div class="hexagon"></div>
        <div class="hexagon"></div>
        <div class="hexagon"></div>
        <div class="hexagon"></div>
        <div class="hexagon"></div>
        <div class="hexagon"></div>
        <div class="hexagon"></div>
        <div class="hexagon"></div>
        <div class="hexagon"></div>
    </div>
    <div class = "row">
        <div class="hexagon"></div>
        <div class="hexagon"></div>
        <div class="hexagon"></div>
        <div class="hexagon"></div>
        <div class="hexagon"></div>
        <div class="hexagon"></div>
        <div class="hexagon"></div>
        <div class="hexagon"></div>
        <div class="hexagon"></div>
        <div class="hexagon"></div>
        <div class="hexagon"></div>
        <div class="hexagon"></div>
        <div class="hexagon"></div>
        <div class="hexagon"></div>
        <div class="hexagon"></div>
        <div class="hexagon"></div>
        <div class="hexagon"></div>
        <div class="hexagon"></div>
        <div class="hexagon"></div>
        <div class="hexagon"></div>
    </div>
    <div class = "row">
        <div class="hexagon"></div>
        <div class="hexagon"></div>
        <div class="hexagon"></div>
        <div class="hexagon"></div>
        <div class="hexagon"></div>
        <div class="hexagon"></div>
        <div class="hexagon"></div>
        <div class="hexagon"></div>
        <div class="hexagon"></div>
        <div class="hexagon"></div>
        <div class="hexagon"></div>
        <div class="hexagon"></div>
        <div class="hexagon"></div>
        <div class="hexagon"></div>
        <div class="hexagon"></div>
        <div class="hexagon"></div>
        <div class="hexagon"></div>
        <div class="hexagon"></div>
        <div class="hexagon"></div>
        <div class="hexagon"></div>
    </div>
    <div class = "row">
        <div class="hexagon"></div>
        <div class="hexagon"></div>
        <div class="hexagon"></div>
        <div class="hexagon"></div>
        <div class="hexagon"></div>
        <div class="hexagon"></div>
        <div class="hexagon"></div>
        <div class="hexagon"></div>
        <div class="hexagon"></div>
        <div class="hexagon"></div>
        <div class="hexagon"></div>
        <div class="hexagon"></div>
        <div class="hexagon"></div>
        <div class="hexagon"></div>
        <div class="hexagon"></div>
        <div class="hexagon"></div>
        <div class="hexagon"></div>
        <div class="hexagon"></div>
        <div class="hexagon"></div>
        <div class="hexagon"></div>
    </div>
    <div class = "row">
        <div class="hexagon"></div>
        <div class="hexagon"></div>
        <div class="hexagon"></div>
        <div class="hexagon"></div>
        <div class="hexagon"></div>
        <div class="hexagon"></div>
        <div class="hexagon"></div>
        <div class="hexagon"></div>
        <div class="hexagon"></div>
        <div class="hexagon"></div>
        <div class="hexagon"></div>
        <div class="hexagon"></div>
        <div class="hexagon"></div>
        <div class="hexagon"></div>
        <div class="hexagon"></div>
        <div class="hexagon"></div>
        <div class="hexagon"></div>
        <div class="hexagon"></div>
        <div class="hexagon"></div>
        <div class="hexagon"></div>
    </div>
    <div class = "row">
        <div class="hexagon"></div>
        <div class="hexagon"></div>
        <div class="hexagon"></div>
        <div class="hexagon"></div>
        <div class="hexagon"></div>
        <div class="hexagon"></div>
        <div class="hexagon"></div>
        <div class="hexagon"></div>
        <div class="hexagon"></div>
        <div class="hexagon"></div>
        <div class="hexagon"></div>
        <div class="hexagon"></div>
        <div class="hexagon"></div>
        <div class="hexagon"></div>
        <div class="hexagon"></div>
        <div class="hexagon"></div>
        <div class="hexagon"></div>
        <div class="hexagon"></div>
        <div class="hexagon"></div>
        <div class="hexagon"></div>
    </div>
    <div class = "row">
        <div class="hexagon"></div>
        <div class="hexagon"></div>
        <div class="hexagon"></div>
        <div class="hexagon"></div>
        <div class="hexagon"></div>
        <div class="hexagon"></div>
        <div class="hexagon"></div>
        <div class="hexagon"></div>
        <div class="hexagon"></div>
        <div class="hexagon"></div>
        <div class="hexagon"></div>
        <div class="hexagon"></div>
        <div class="hexagon"></div>
        <div class="hexagon"></div>
        <div class="hexagon"></div>
        <div class="hexagon"></div>
        <div class="hexagon"></div>
        <div class="hexagon"></div>
        <div class="hexagon"></div>
        <div class="hexagon"></div>
    </div>
    <div class = "row">
        <div class="hexagon"></div>
        <div class="hexagon"></div>
        <div class="hexagon"></div>
        <div class="hexagon"></div>
        <div class="hexagon"></div>
        <div class="hexagon"></div>
        <div class="hexagon"></div>
        <div class="hexagon"></div>
        <div class="hexagon"></div>
        <div class="hexagon"></div>
        <div class="hexagon"></div>
        <div class="hexagon"></div>
        <div class="hexagon"></div>
        <div class="hexagon"></div>
        <div class="hexagon"></div>
        <div class="hexagon"></div>
        <div class="hexagon"></div>
        <div class="hexagon"></div>
        <div class="hexagon"></div>
        <div class="hexagon"></div>
    </div>
    <div class = "row">
        <div class="hexagon"></div>
        <div class="hexagon"></div>
        <div class="hexagon"></div>
        <div class="hexagon"></div>
        <div class="hexagon"></div>
        <div class="hexagon"></div>
        <div class="hexagon"></div>
        <div class="hexagon"></div>
        <div class="hexagon"></div>
        <div class="hexagon"></div>
        <div class="hexagon"></div>
        <div class="hexagon"></div>
        <div class="hexagon"></div>
        <div class="hexagon"></div>
        <div class="hexagon"></div>
        <div class="hexagon"></div>
        <div class="hexagon"></div>
        <div class="hexagon"></div>
        <div class="hexagon"></div>
        <div class="hexagon"></div>
    </div>
</div>
</body>

<style>

    *{
        margin: 0px;
        padding: 0px;
    }

    body {
        background-color: #000;
    }

    h1 {
        color:white;
        text-align: center;
        position: absolute;
        z-index: 5;
    }
.topnav {
  background-color: #333;
  overflow: hidden;
  z-index: 5;
}

/* Style the links inside the navigation bar */
.topnav a {
  float: left;
  color: #f2f2f2;
  text-align: center;
  padding: 14px 16px;
  text-decoration: none;
  font-size: 17px;
  font-family: 'Courier New', Courier, monospace;
  z-index: 5;

}

/* Change the color of links on hover */
.topnav a:hover {
  background-color: #5A5A5A;
  color: whitesmoke;
  
}

/* Add a color to the active/current link */
.topnav a.active {
  background-color: #333;
  color: #72bcd4;
}

    .row{
        display: inline-flex;
        margin-top: -32px;
        margin-left: -50px;
        z-index: 0;
    }

    .row:nth-child(even){
        margin-left: 2px;
    }

    .hexagon {
        width: 100px;
        height: 110px;
        margin: 2px;
        background-color: #111;
        clip-path: polygon(50% 0, 100% 25%, 100% 75%, 50% 100%,
         0% 75%, 0% 25%);
         animation: animation 4s linear infinite;
         transition: 1s;
    }

    .hexagon:hover{
        background-color: #0f0;
        transition: 0s;
    }

    @keyframes animation {
        0% {
            filter: hue-rotate(0deg);
        }
        100%{filter: hue-rotate(360deg);}
    }

    .hexagon:after{
        content: '';
        position: absolute;
        top: 4px;
        bottom: 4px;
        left: 4px;
        right: 4px;
        background-color: #111;
        clip-path: polygon(50% 0, 100% 25%, 100% 75%, 50% 100%,
         0% 75%, 0% 25%);
    }

    .hexagon:before{
        content: '';
        position: absolute;
        width: 50px;
        height: 100px;
        background-color: rgba(255, 255, 255, 0.03);
        z-index: 2;
    }
</style>
</html>

I am expecting a seamless design with the background going behind the topnav,
any other suggestions for my code would be greatly appreciated I am still learning.
I have tried using z index but that was all I could think of with my limited skills.

MEDevel.com: Open-source for Healthcare and Education

Collecting and validating open-source software for healthcare, education, enterprise, development, medical imaging, medical records, and digital pathology.

Visit Medevel

>Solution :

You just need to put your background in a div with the overflow:hidden property.
This is happening because you put negative margins on your .row class

* {
  margin: 0px;
  padding: 0px;
}

body {
  background-color: #000;
}

h1 {
  color: white;
  text-align: center;
  position: absolute;
  z-index: 1;
}

.topnav {
  background-color: #333;
  overflow: hidden;
}


/* Style the links inside the navigation bar */

.topnav a {
  float: left;
  color: #f2f2f2;
  text-align: center;
  padding: 14px 16px;
  text-decoration: none;
  font-size: 17px;
  font-family: 'Courier New', Courier, monospace;
}


/* Change the color of links on hover */

.topnav a:hover {
  background-color: #5A5A5A;
  color: whitesmoke;
}


/* Add a color to the active/current link */

.topnav a.active {
  background-color: #333;
  color: #72bcd4;
}

.row {
  display: inline-flex;
  margin-top: -32px;
  margin-left: -50px;
}

.row:nth-child(even) {
  margin-left: 2px;
}

.hexagon {
  width: 100px;
  height: 110px;
  margin: 2px;
  background-color: #111;
  clip-path: polygon(50% 0, 100% 25%, 100% 75%, 50% 100%, 0% 75%, 0% 25%);
  animation: animation 4s linear infinite;
  transition: 1s;
}

.hexagon:hover {
  background-color: #0f0;
  transition: 0s;
}

@keyframes animation {
  0% {
    filter: hue-rotate(0deg);
  }
  100% {
    filter: hue-rotate(360deg);
  }
}

.hexagon:after {
  content: '';
  position: absolute;
  top: 4px;
  bottom: 4px;
  left: 4px;
  right: 4px;
  background-color: #111;
  clip-path: polygon(50% 0, 100% 25%, 100% 75%, 50% 100%, 0% 75%, 0% 25%);
}

.hexagon:before {
  content: '';
  position: absolute;
  width: 50px;
  height: 100px;
  background-color: rgba(255, 255, 255, 0.03);
  z-index: 1;
}

.background {
  overflow: hidden;
}
<div class="container">
  <div class="topnav">
    <a class=a ctive href="{{ url_for('home') }}">Home</a>
    <a href="{{ url_for('read') }}">Read</a>
    <a href="{{ url_for('create') }}">Create</a>
  </div>
  <h1>Cool Text Effect</h1>
  <div class="background">
    <div class="row">
      <div class="hexagon"></div>
      <div class="hexagon"></div>
      <div class="hexagon"></div>
      <div class="hexagon"></div>
      <div class="hexagon"></div>
      <div class="hexagon"></div>
      <div class="hexagon"></div>
      <div class="hexagon"></div>
      <div class="hexagon"></div>
      <div class="hexagon"></div>
      <div class="hexagon"></div>
      <div class="hexagon"></div>
      <div class="hexagon"></div>
      <div class="hexagon"></div>
      <div class="hexagon"></div>
      <div class="hexagon"></div>
      <div class="hexagon"></div>
      <div class="hexagon"></div>
      <div class="hexagon"></div>
      <div class="hexagon"></div>
    </div>
    <div class="row">
      <div class="hexagon"></div>
      <div class="hexagon"></div>
      <div class="hexagon"></div>
      <div class="hexagon"></div>
      <div class="hexagon"></div>
      <div class="hexagon"></div>
      <div class="hexagon"></div>
      <div class="hexagon"></div>
      <div class="hexagon"></div>
      <div class="hexagon"></div>
      <div class="hexagon"></div>
      <div class="hexagon"></div>
      <div class="hexagon"></div>
      <div class="hexagon"></div>
      <div class="hexagon"></div>
      <div class="hexagon"></div>
      <div class="hexagon"></div>
      <div class="hexagon"></div>
      <div class="hexagon"></div>
      <div class="hexagon"></div>
    </div>
    <div class="row">
      <div class="hexagon"></div>
      <div class="hexagon"></div>
      <div class="hexagon"></div>
      <div class="hexagon"></div>
      <div class="hexagon"></div>
      <div class="hexagon"></div>
      <div class="hexagon"></div>
      <div class="hexagon"></div>
      <div class="hexagon"></div>
      <div class="hexagon"></div>
      <div class="hexagon"></div>
      <div class="hexagon"></div>
      <div class="hexagon"></div>
      <div class="hexagon"></div>
      <div class="hexagon"></div>
      <div class="hexagon"></div>
      <div class="hexagon"></div>
      <div class="hexagon"></div>
      <div class="hexagon"></div>
      <div class="hexagon"></div>
    </div>
    <div class="row">
      <div class="hexagon"></div>
      <div class="hexagon"></div>
      <div class="hexagon"></div>
      <div class="hexagon"></div>
      <div class="hexagon"></div>
      <div class="hexagon"></div>
      <div class="hexagon"></div>
      <div class="hexagon"></div>
      <div class="hexagon"></div>
      <div class="hexagon"></div>
      <div class="hexagon"></div>
      <div class="hexagon"></div>
      <div class="hexagon"></div>
      <div class="hexagon"></div>
      <div class="hexagon"></div>
      <div class="hexagon"></div>
      <div class="hexagon"></div>
      <div class="hexagon"></div>
      <div class="hexagon"></div>
      <div class="hexagon"></div>
    </div>
    <div class="row">
      <div class="hexagon"></div>
      <div class="hexagon"></div>
      <div class="hexagon"></div>
      <div class="hexagon"></div>
      <div class="hexagon"></div>
      <div class="hexagon"></div>
      <div class="hexagon"></div>
      <div class="hexagon"></div>
      <div class="hexagon"></div>
      <div class="hexagon"></div>
      <div class="hexagon"></div>
      <div class="hexagon"></div>
      <div class="hexagon"></div>
      <div class="hexagon"></div>
      <div class="hexagon"></div>
      <div class="hexagon"></div>
      <div class="hexagon"></div>
      <div class="hexagon"></div>
      <div class="hexagon"></div>
      <div class="hexagon"></div>
    </div>
    <div class="row">
      <div class="hexagon"></div>
      <div class="hexagon"></div>
      <div class="hexagon"></div>
      <div class="hexagon"></div>
      <div class="hexagon"></div>
      <div class="hexagon"></div>
      <div class="hexagon"></div>
      <div class="hexagon"></div>
      <div class="hexagon"></div>
      <div class="hexagon"></div>
      <div class="hexagon"></div>
      <div class="hexagon"></div>
      <div class="hexagon"></div>
      <div class="hexagon"></div>
      <div class="hexagon"></div>
      <div class="hexagon"></div>
      <div class="hexagon"></div>
      <div class="hexagon"></div>
      <div class="hexagon"></div>
      <div class="hexagon"></div>
    </div>
    <div class="row">
      <div class="hexagon"></div>
      <div class="hexagon"></div>
      <div class="hexagon"></div>
      <div class="hexagon"></div>
      <div class="hexagon"></div>
      <div class="hexagon"></div>
      <div class="hexagon"></div>
      <div class="hexagon"></div>
      <div class="hexagon"></div>
      <div class="hexagon"></div>
      <div class="hexagon"></div>
      <div class="hexagon"></div>
      <div class="hexagon"></div>
      <div class="hexagon"></div>
      <div class="hexagon"></div>
      <div class="hexagon"></div>
      <div class="hexagon"></div>
      <div class="hexagon"></div>
      <div class="hexagon"></div>
      <div class="hexagon"></div>
    </div>
    <div class="row">
      <div class="hexagon"></div>
      <div class="hexagon"></div>
      <div class="hexagon"></div>
      <div class="hexagon"></div>
      <div class="hexagon"></div>
      <div class="hexagon"></div>
      <div class="hexagon"></div>
      <div class="hexagon"></div>
      <div class="hexagon"></div>
      <div class="hexagon"></div>
      <div class="hexagon"></div>
      <div class="hexagon"></div>
      <div class="hexagon"></div>
      <div class="hexagon"></div>
      <div class="hexagon"></div>
      <div class="hexagon"></div>
      <div class="hexagon"></div>
      <div class="hexagon"></div>
      <div class="hexagon"></div>
      <div class="hexagon"></div>
    </div>
    <div class="row">
      <div class="hexagon"></div>
      <div class="hexagon"></div>
      <div class="hexagon"></div>
      <div class="hexagon"></div>
      <div class="hexagon"></div>
      <div class="hexagon"></div>
      <div class="hexagon"></div>
      <div class="hexagon"></div>
      <div class="hexagon"></div>
      <div class="hexagon"></div>
      <div class="hexagon"></div>
      <div class="hexagon"></div>
      <div class="hexagon"></div>
      <div class="hexagon"></div>
      <div class="hexagon"></div>
      <div class="hexagon"></div>
      <div class="hexagon"></div>
      <div class="hexagon"></div>
      <div class="hexagon"></div>
      <div class="hexagon"></div>
    </div>
    <div class="row">
      <div class="hexagon"></div>
      <div class="hexagon"></div>
      <div class="hexagon"></div>
      <div class="hexagon"></div>
      <div class="hexagon"></div>
      <div class="hexagon"></div>
      <div class="hexagon"></div>
      <div class="hexagon"></div>
      <div class="hexagon"></div>
      <div class="hexagon"></div>
      <div class="hexagon"></div>
      <div class="hexagon"></div>
      <div class="hexagon"></div>
      <div class="hexagon"></div>
      <div class="hexagon"></div>
      <div class="hexagon"></div>
      <div class="hexagon"></div>
      <div class="hexagon"></div>
      <div class="hexagon"></div>
      <div class="hexagon"></div>
    </div>
    <div class="row">
      <div class="hexagon"></div>
      <div class="hexagon"></div>
      <div class="hexagon"></div>
      <div class="hexagon"></div>
      <div class="hexagon"></div>
      <div class="hexagon"></div>
      <div class="hexagon"></div>
      <div class="hexagon"></div>
      <div class="hexagon"></div>
      <div class="hexagon"></div>
      <div class="hexagon"></div>
      <div class="hexagon"></div>
      <div class="hexagon"></div>
      <div class="hexagon"></div>
      <div class="hexagon"></div>
      <div class="hexagon"></div>
      <div class="hexagon"></div>
      <div class="hexagon"></div>
      <div class="hexagon"></div>
      <div class="hexagon"></div>
    </div>
    <div class="row">
      <div class="hexagon"></div>
      <div class="hexagon"></div>
      <div class="hexagon"></div>
      <div class="hexagon"></div>
      <div class="hexagon"></div>
      <div class="hexagon"></div>
      <div class="hexagon"></div>
      <div class="hexagon"></div>
      <div class="hexagon"></div>
      <div class="hexagon"></div>
      <div class="hexagon"></div>
      <div class="hexagon"></div>
      <div class="hexagon"></div>
      <div class="hexagon"></div>
      <div class="hexagon"></div>
      <div class="hexagon"></div>
      <div class="hexagon"></div>
      <div class="hexagon"></div>
      <div class="hexagon"></div>
      <div class="hexagon"></div>
    </div>
  </div>
</div>
byMR
Published
Add a comment

Leave a Reply

Keep Up to Date with the Most Important News

By pressing the Subscribe button, you confirm that you have read and are agreeing to our Privacy Policy and Terms of Use

Read more

Discover more from Dev solutions

Subscribe now to keep reading and get access to the full archive.

Continue reading