[Answered ]-How do I put the oversized logo overlap the nav?

by

1👍

First you need to put your image inside your List

<div class = "navigation-container">
    <ul>
        <li><img class = "logo" src ="{% static 'financeapp/family examiner 2.png' %}"
            alt="company logo" height = 150px width = 150px style="background-color: black;"></li>
        <li><a href="#"> Home </a></li>
        <li><a href="#"> About </a></li>
        <li><a href="#"> Contact </a></li>
        <li><a href="#"> Join Us </a></li>
    </ul>
</div>

Then you can put a margin-top on your list to make it go down, so the picture does properly fit later

  .navigation-container {
      display: flex;
      justify-content: space-betwee;
      width: 100%; /*left side*/
      margin-top: 5rem;
  
  }

Then you can set your .logo to margin-top: -43px; as example and the logo will move up.

You will need to play around with the numbers to make it so you like the look.

Also important note is that none of this is responsive and it will probably not look good later on.
You always should start to design for mobiles first.

👤Spyr0

Leave a comment