Jafar Ocean Jafar Ocean - 3 years ago 70
CSS Question

I need the logo to overlap the navbar

I want the logo to overlap my navbar like this:



enter image description here

So far I have this:
enter image description here

As you can see the logo just make the navbar bigger, how do I make the logo overlap the navbar?
The codepen is https://codepen.io/anon/pen/NvqbLo

I think the problem is with the CSS:

.topnav a {
float: left;
display: block;
color: #777;
text-align: center;
padding: 14px 16px;
text-decoration: none;
font-size: 17px;
}

Answer Source

One of the option:

.topnav {
  background-color: #F8F8F8;
  margin-bottom:0px;
}
.topnav .logo { position: absolute; z-index:1; top:0; }
.topnav .nav { padding-left: 360px; }
.topnav ul.nav li { float: left; list-style:none; }
.topnav .nav a {
  color: #777;
  text-align: center;
  padding: 14px 16px;
  text-decoration: none;
  font-size: 17px;
}

.topnav a:hover {
  background-color: #D5D5D5;
  color: #333;
}

.topnav .icon {
  display: none;
}

@media screen and (max-width: 600px) {
  .topnav a:not(:first-child) {display: none;}
  .topnav a.icon {
    float: right;
    display: block;
  }
}

@media screen and (max-width: 600px) {
  .topnav.responsive {position: relative;}
  .topnav.responsive .icon {
    position: absolute;
    right: 0;
    top: 0;
  }
  .topnav.responsive a {
    float: none;
    display: block;
    text-align: left;
  }
  
  .topnav {
    background-color: #134095;
  }

  .topnav a {
    color: white;
  }
}

.container {
  padding-right: 15px;
  padding-left: 15px;
  margin-right: auto;
  margin-left: auto;
}
@media (min-width: 768px) {
  .container {
    width: 750px;
  }
}
@media (min-width: 992px) {
  .container {
    width: 970px;
  }
}
@media (min-width: 1200px) {
  .container {
    width: 1170px;
  }
}
<div class="topnav" id="myTopnav">
            <div class="container">
                <a href="#home" class="logo" style="z-index:1;position:absolute;"><img src="https://preview.c9users.io/jafar70/toucan-tech/navimg.jpg"></a>
                <ul class="nav">
                  <li><a href="#contact">lorem ipsum</a></li>
                  <li><a href="#contact">lorem ipsum</a></li>
                  <li><a href="#contact">lorem ipsum</a></li>
              </ul>
                
                <a href="javascript:void(0);" style="font-size:15px;" class="icon" onclick="myFunction()">&#9776;</a>
            </div>
        </div>
        
        <div class="learn-more">
            <br><br><br><br>
            <div class="container">
            <p class="title">Suspendisse urna nibh, viverra non, semper suscipit, posuere a, pede</p>
            <p class="lead">Suspendisse urna nibh, viverra non, semper suscipit, posuere a, pede.Lorem ipsum dolor sit amet, consectetuer adipiscing elit. </p>
            <button class="btn"><div>Call to action <span aria-hidden="true" data-icon=">"></span></div></button>
            </div>
        </div>
    <script>
        function myFunction() {
            var x = document.getElementById("myTopnav");
            if (x.className === "topnav") {
                x.className += " responsive";
            } else {
                x.className = "topnav";
            }
        }
    </script>

P.S: view it in full screen, not really responsive optimized at this point.

Recommended from our users: Dynamic Network Monitoring from WhatsUp Gold from IPSwitch. Free Download