i am curios on how i would get a logo above the Navbar Like this:

I am not really sure how i can achieve this, i basically want the navbar to not be at the very top, but have the logo-top at the top of the site, then have the Navbar centered on the Logo, while the Logo is above the Navbar, so basically a part of the Navbar should be hidden behind it, and then align the buttons left and right of it

body {
    margin: 0;
    font-size: 28px;
    font-family: Arial, Helvetica, sans-serif;
  }
  
  .navbar {
    overflow: hidden;
    background-color: grey;
  }
  
  .navbar a {
    display: inline-block;
    font-size: 16px;
    color: white;
    text-align: center;
    padding: 14px 16px;
    text-decoration: none;
  }
  
  .dropdown {
    display: inline-block;
  }
  
  .dropdown .dropbtn {
    display: inline-block;
    font-size: 16px;  
    border: none;
    outline: none;
    color: white;
    padding: 14px 16px;
    background-color: inherit;
    font-family: inherit;
    margin: 0;
  }
  
  .navbar a:hover, .dropdown:hover .dropbtn {
    background-color: red;
  }
  
  .dropdown-content {
    display: none;
    position: absolute;
    background-color: #f9f9f9;
    min-width: 160px;
    box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
    z-index: 1;
  }
  
  .dropdown-content a {
    float: none;
    color: black;
    padding: 12px 16px;
    text-decoration: none;
    display: block;
    text-align: left;
  }
  
  .dropdown-content a:hover {
    background-color: #ddd;
  }
  
  .dropdown:hover .dropdown-content {
    display: block;
  }
  .content {
    padding: 16px;
  }
  
  .sticky {
    position: fixed;
    top: 0;
    width: 100%;
  }
  
  .sticky   .content {
    padding-top: 60px;
  }
  
  .logo {
    width: 10% !important;
    height: 10% !important;
    position: absolute;
    left: 50%;
    margin-left: -50px !important;  /* 50% of your logo width */
    display: block;
  }
  

      <div  align="center">
        <a href="#home">Home</a>
        <a href="#news">News</a>
        <img src="https://via.placeholder.com/50" width="5%; height=5%; z-index: 10">
        <div >
          <button >Server 
            <i ></i>
          </button>
          <div  align="center">
            <a href="#"> Server 2</a>
            <a href="#"> Server 1</a>
          </div>
        </div> 
        <a href="#news">Discord</a>
      </div> 

CodePudding user response：

You could use flex box model and play around with the negative margin on the logo (I use .middle-logo class in here as an example):

body {
  margin: 0;
  font-size: 28px;
  font-family: Arial, Helvetica, sans-serif;
}

.navbar {
  background-color: grey;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-top: 10px;
}

.navbar a {
  display: inline-block;
  font-size: 16px;
  color: white;
  text-align: center;
  padding: 14px 16px;
  text-decoration: none;
}

.dropdown {
  display: inline-block;
}

.dropdown .dropbtn {
  display: inline-block;
  font-size: 16px;
  border: none;
  outline: none;
  color: white;
  padding: 14px 16px;
  background-color: inherit;
  font-family: inherit;
  margin: 0;
}

.navbar a:hover,
.dropdown:hover .dropbtn {
  background-color: red;
}

.dropdown-content {
  display: none;
  position: absolute;
  background-color: #f9f9f9;
  min-width: 160px;
  box-shadow: 0px 8px 16px 0px rgba(0, 0, 0, 0.2);
  z-index: 1;
}

.dropdown-content a {
  float: none;
  color: black;
  padding: 12px 16px;
  text-decoration: none;
  display: block;
  text-align: left;
}

.dropdown-content a:hover {
  background-color: #ddd;
}

.dropdown:hover .dropdown-content {
  display: block;
}

.content {
  padding: 16px;
}

.sticky {
  position: fixed;
  top: 0;
  width: 100%;
}

.sticky .content {
  padding-top: 60px;
}

.logo {
  width: 10% !important;
  height: 10% !important;
  position: absolute;
  left: 50%;
  margin-left: -50px !important;
  /* 50% of your logo width */
  display: block;
}

.middle-logo {
  height: 66px;
  margin-top: -10px;
  margin-bottom: -10px;
  display: inline-block;
  width: 66px;
}

<div  align="center">
  <a href="#home">Home</a>
  <a href="#news">News</a>
  <img src="https://w7.pngwing.com/pngs/107/759/png-transparent-circle-white-circle-white-monochrome-black-thumbnail.png" width="5%; height=5%; z-index: 10" >
  <div >
    <button >Server 
            <i ></i>
          </button>
    <div  align="center">
      <a href="#"> Server 2</a>
      <a href="#"> Server 1</a>
    </div>
  </div>
  <a href="#news">Discord</a>
</div>

I used a random width/height here though, but the important part here is to use that negative margin, you could just adjust it according to your need

CodePudding user response：

You can change the layer of your image/logo with z-index in css