CSS Help - Navbar Overlapping content

RandomRyan

Member
Nov 7, 2013
37
4
Hi,

I need help with my Navbar. I'm trying to figure out why the Navbar is overlapping the content. When I click one of the links on the navbar, the content goes to the top of the page when clicked. But the navbar is covers it.

I tried to search for the answer on Google, but the only thing that comes up is Bootstrap solutions.

Thanks.

HTML:

HTML:
<body>

    <div class="topbar">
            <img src="images/phone.png" alt="" class="phone">
        <h2>222-222-2222</h2>
    </div>

    <div class="nav">
      <input type="checkbox" id="check">
      <label for="check" class="checkbtn">
        <i class="fas fa-bars"></i>
      </label>
      <img src="images/logo.png" alt="" class="logo">
      <ul>
          <li><a class="active" href="#">Home</a></li>
          <li><a class="scrollTo" href="#about">About</a></li>
          <li><a href="#services">Services</a></li>
          <li><a href="#instagramfeed">Gallery</a></li>
          <li><a href="#contact">Contact</a></li>
      </ul>
    </div>

    <section id="banner">
                <div class="banner">

                </div>
            </section>

      <!-- About/welcome page -->
      <section id="about">
        <div class="aboutus">
          <p id="about">Landscaping</p>
          <p>Another paragraph</p>
        </div>
      </section>

CSS:

CSS:
*{
  margin: 0;
  padding: 0;
  box-sizing: border-box;
  list-style: none;
  text-decoration: none;
}

.topbar {
  background: #e5e5e5;
  height: 80px;
  width: 100%;
  display: flex;
  position: fixed;
  z-index: 2;
}

.topbar .phone {
  margin-left: 74%;
  margin-top: 8px;
  margin-right: -14px;
  float: left;
  height: 25px;
  width: 25px;
}

.topbar h2 {
  font-family: Lato-Regular, sans-serif;
  font-size:20px;
  color: #444444;
  line-height: 4px;
    width: 100%;
    height: auto;
    padding: 1%;
}

@media (max-width: 1000px) {
  .topbar .phone {
    margin-left: 7px;
  }

  .topbar h2 {
    margin-left: 10px;
    margin-top: 14px;
  }

}

 .nav {
  background: #fff;
  height: 150px;
  width: 100%;
  margin-top: 40px;
  position: fixed;
  z-index: 2;
  border-bottom: 10px solid #257834;
}

.nav img.logo{
    width: 244px;
    float: left;
    margin-top: 2px;
    margin-left: 60px;
    margin-bottom: 6px;
}
.nav ul{
  float: right;
  margin-right: 110px;
  margin-top: 30px;
}
.nav ul li{
  display: inline-block;
  line-height: 80px;
  margin: 0 2px;
}
.nav ul li a{
  color: black;
  font-weight: 500;
  font-size: 20px;
  padding: 7px 13px;
  border-radius: 3px;
  font-family: OpenSansBold, sans-serif;
}
.nav a.active, .nav a:hover{
  background: #f2f2f2;
  transition: .5s;
}
.nav .checkbtn {
  font-size: 30px;
  color: black;
  float: right;
  line-height: 80px;
  margin-right: 40px;
  margin-top: 50px;
  cursor: pointer;
  display: none;
}
.nav #check {
  display: none;
}

@media (max-width: 952px){
  .nav label .logo{
    font-size: 27px;
    padding-left: 25px;
  }
  .nav ul li a{
    font-size: 16px;
  }
}
@media (max-width: 858px){
  .nav .checkbtn{
    display: block;
    margin-right: 40px;
  }
  .nav ul{
    position: fixed;
    width: 100%;
    height: 100vh;
    background: #d6d6d6;
    top: 160px;
    left: -100%;
    text-align: center;
    transition: all .5s;
  }
  .nav ul li{
    display: block;
    margin: 50px 0;
    line-height: 30px;
  }
  .nav ul li a{
    font-size: 20px;
  }
  a:hover,a.active{
    background: none;
    color: white;
  }
  #check:checked ~ ul{
    left: 0;
  }
}


/* banner */

    #banner .banner {
        width: 100%;
        height: 900px;
        background-image: url(images/kelowna.jpg);
        background-size: cover;
        background-position: center top;
        background-repeat: no-repeat;
    }

  /* About */
  #about .aboutus {
    width: 100%;
    height: fixed;
        margin-bottom: 60px;
    background: #FEFEFE;
  }

  .aboutus p {
    font-family: OpenSansLight;
    text-align: center;
    font-size: 16px;
    margin-top: 40px;
    margin-bottom: -5px;
      }
 

DDDDec

Tongue Boxing Champion 2023
May 30, 2017
402
248
pretty sure when the navbar has a fixed position the content will flow under it, maybe use @media for when you scroll then it has the fixed position, also look into using grid and flex i like to use grid because i can just justify-content:end; (start, center, end) so on .

also i use position: sticky; instead of position: fixed;

stackoverflow that i found: (not sure if this is allowed or not if it isnt just remove it)

: this is a nice little place for some cool css tricks got a few decent guides on how to use css
 

Users who are viewing this thread

Top