'How to Add Logo image in header next to nav menu

I have a navigation menu that's fixed in the left inside a div. I want to be able to put a logo right next to it, centered, but to the right of the menu.

I'm not able to realise what I have to do in the code in order to get it

I tried using a div inside the div, but that does not do it

* {
  background-color: black
}

* {
  padding: 0;
  margin: 0;
}

.navigation {
  z-index: 1;
}

ul {
  list-style-type: none;
  margin: 0;
  padding: 0;
  overflow: hidden;
  background-color: black;
  font-family: 'Trebuchet MS', 'Lucida Sans Unicode', 'Lucida Grande', 'Lucida Sans', Arial, sans-serif;
  font-size: 20px;
  font-weight: bold;
  border-style: dashed;
  border-color: green;
  border-radius: 20px;
  height: 80px;
  width: 750px;
}

li {
  float: left;
}

li a {
  display: block;
  color: white;
  text-align: center;
  padding: 10px 12px;
  text-decoration: none;
  border-style: dotted;
  margin-left: 24px;
  margin-top: 11px;
}

li a:hover {
  background-color: red;
}

.parrafo {
  font-size: 40px;
  padding: 75px;
  border-radius: 10px;
  margin-top: 10px;
  margin-bottom: 10px;
  border-left: 22px;
  padding-left: 150px;
  border-top: dotted 5px red;
  border-bottom: dotted 5px yellowgreen;
  display: flex;
  flex-direction: row;
  font-family: sans-serif;
  font-weight: bold;
  color: white;
}

.queonda {
  font-family: sans-serif;
  font-weight: bold;
  color: white;
  font-size: 50px;
  margin-left: 85px;
}

.test {
  margin-left: 200px;
  margin-top: 270px;
}

.test2 {
  margin-top: 100px;
  margin-bottom: 100px;
  margin-left: 750px;
}

.portrait {
  overflow: hidden;
  display: inline-block;
}

.portrait img {
  transition: transform 0.5s linear;
  background-image: cover;
}

.portrait:hover img {
  transform: scale(1.1);
}

.cat {
  height: 1250px;
  width: 1900px;
}

.algo {
  height: 100vh;
  width: 100vw;
}

.active {
  overflow: hidden;
  background-color: #333;
  position: fixed;
  top: 0;
  width: 100%;
}

.ptm {
  font-size: 70px;
  color: white;
  position: right;
  margin-right: 500px;
  display: inline;
}

<div class="navigation active">
  <ul>
    <li><a href="#home">Tour</a></li>
    <li><a href="#news">Listen to Music</a></li>
    <li><a href="#contact">Contact</a></li>
    <li><a href="#about">About</a></li>
  </ul>
</div>

<div class="portrait algo"><img src="https://i.ibb.co/dLrSmP7/1111.jpg" alt=""></div>

<div class="parrafo">
  <img src="https://muzikercdn.com/uploads/products/4207/420772/09821a89.jpg" alt="Ciudad con Transito">
  <P class="test">MUSIC<br>MAINSTREAM SELLOUT</P>
</div>

<div class="test2">
  <P class="queonda">VIDEOS</P><br><br>
  <video width="1280" controls autoplay="off">
            <source src="./img/prueba2.mp4" type="video/mp4">
        
    </div>
    
        <footer class="footer">
            <div class="container">
                <div class="row">
                    <div class="footer-col">
                        <h4>Terms & Conditions</h4>
                    </div>
                    <div class="footer-col">
                        <h4><a class="textDecoration" href="#privacy">Privacy and Policy</a></h4>
                    </div>
                    
                    <div class="footer-col">
                        <h4>Follow Us</h4>
                        <div class="social-links">
                            
                        </div>
                    </div>
                    <div class="footer-col">
                        <div class="social-links">
                        <h3><a href="#" class="fa fa-facebook"></a>
                            <a href="#" class="fa fa-twitter"></a>
                            <a href="#" class="fa fa-instagram"></a>
                            <a href="#" class="fa fa-youtube"></a>
                        </h3>
                    </div>
                </div>
            </div>
       </footer>

I would really appreciate your help with this

html css

Solution 1:^[1]

If you want it in the menu but next to it, you should just add the logo as a list item. Then you can give it a class (I called it logo) to reposition it.

See below:

* {
  background-color: black
}

* {
  padding: 0;
  margin: 0;
}

.navigation {
  z-index: 1;
}

.logo {
  padding: 6px;
  border: 0;
  margin-left: 4em;
}

ul {
  list-style-type: none;
  margin: 0;
  padding: 0;
  overflow: hidden;
  background-color: black;
  font-family: 'Trebuchet MS', 'Lucida Sans Unicode', 'Lucida Grande', 'Lucida Sans', Arial, sans-serif;
  font-size: 20px;
  font-weight: bold;
  border-style: dashed;
  border-color: green;
  border-radius: 20px;
  height: 80px;
  width: 750px;
}

li {
  float: left;
}

li a {
  display: block;
  color: white;
  text-align: center;
  padding: 10px 12px;
  text-decoration: none;
  border-style: dotted;
  margin-left: 24px;
  margin-top: 11px;
}

li a:hover {
  background-color: red;
}

.parrafo {
  font-size: 40px;
  padding: 75px;
  border-radius: 10px;
  margin-top: 10px;
  margin-bottom: 10px;
  border-left: 22px;
  padding-left: 150px;
  border-top: dotted 5px red;
  border-bottom: dotted 5px yellowgreen;
  display: flex;
  flex-direction: row;
  font-family: sans-serif;
  font-weight: bold;
  color: white;
}

.queonda {
  font-family: sans-serif;
  font-weight: bold;
  color: white;
  font-size: 50px;
  margin-left: 85px;
}

.test {
  margin-left: 200px;
  margin-top: 270px;
}

.test2 {
  margin-top: 100px;
  margin-bottom: 100px;
  margin-left: 750px;
}

.portrait {
  overflow: hidden;
  display: inline-block;
}

.portrait img {
  transition: transform 0.5s linear;
  background-image: cover;
}

.portrait:hover img {
  transform: scale(1.1);
}

.cat {
  height: 1250px;
  width: 1900px;
}

.algo {
  height: 100vh;
  width: 100vw;
}

.active {
  overflow: hidden;
  background-color: #333;
  position: fixed;
  top: 0;
  width: 100%;
}

.ptm {
  font-size: 70px;
  color: white;
  position: right;
  margin-right: 500px;
  display: inline;
}

<div class="navigation active">
  <ul>
    <li><a href="#home">Tour</a></li>
    <li><a href="#news">Listen to Music</a></li>
    <li><a href="#contact">Contact</a></li>
    <li><a href="#about">About</a></li>
    <li>
      <a class="logo"><img src="https://dummyimage.com/40/#41404/fff"></a>
    </li>
  </ul>
</div>

<div class="portrait algo"><img src="https://i.ibb.co/dLrSmP7/1111.jpg" alt=""></div>

<div class="parrafo">
  <img src="https://muzikercdn.com/uploads/products/4207/420772/09821a89.jpg" alt="Ciudad con Transito">
  <P class="test">MUSIC<br>MAINSTREAM SELLOUT</P>
</div>

<div class="test2">
  <P class="queonda">VIDEOS</P><br><br>
  <video width="1280" controls autoplay="off">
            <source src="./img/prueba2.mp4" type="video/mp4"></video>

</div>

<footer class="footer">
  <div class="container">
    <div class="row">
      <div class="footer-col">
        <h4>Terms & Conditions</h4>
      </div>
      <div class="footer-col">
        <h4><a class="textDecoration" href="#privacy">Privacy and Policy</a></h4>
      </div>

      <div class="footer-col">
        <h4>Follow Us</h4>
        <div class="social-links">

        </div>
      </div>
      <div class="footer-col">
        <div class="social-links">
          <h3>
            <a href="#" class="fa fa-facebook"></a>
            <a href="#" class="fa fa-twitter"></a>
            <a href="#" class="fa fa-instagram"></a>
            <a href="#" class="fa fa-youtube"></a>
          </h3>
        </div>
      </div>
    </div>
  </div>
</footer>

Side note: forgot to close </video> and the .container div which was making your HTML invalid.

Sources

This article follows the attribution requirements of Stack Overflow and is licensed under CC BY-SA 3.0.

Source: Stack Overflow

Solution	Source
Solution 1	Kameron

'How to Add Logo image in header next to nav menu

Solution 1:[1]

Sources

Related Questions

Solution 1:^[1]