Fri. Sep 22nd, 2023

[ANSWERED] html – Logo above Navbar

By

Nov 18, 2022 css, html

Solution 1 :

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 class="navbar" 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" class="middle-logo">
  <div class="dropdown">
    <button class="dropbtn">Server 
            <i class="fa fa-caret-down"></i>
          </button>
    <div class="dropdown-content" 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

Solution 2 :

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

Problem :

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 class="navbar" 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 class="dropdown">
          <button class="dropbtn">Server 
            <i class="fa fa-caret-down"></i>
          </button>
          <div class="dropdown-content" align="center">
            <a href="#"> Server 2</a>
            <a href="#"> Server 1</a>
          </div>
        </div> 
        <a href="#news">Discord</a>
      </div>

Comments

Comment posted by isherwood

Center alignment of the flexbox children would be better than negative margins. Ideally layout doesn’t hinge on image size, for example, but works regardless of image size.

Comment posted by How to Answer

Answers should be more specific. Please see

By

Related Post

[ANSWERED] html – Trying to align a div to the right using CSS

Nov 20, 2022

[ANSWERED] javascript – Text box to display updated text and save on button click

Nov 20, 2022

[ANSWERED] html – select all elements within a parent class

Nov 20, 2022