How to resize HTML navbar icon-CodePudding

I have an image that I'm using as the home button for a navbar on a website. I want the image height to exceed the height of the navbar (so that it hangs over the bottom of the navbar). I tried setting the max-height for the navbar to half of the height for the image/home button, but it just crops the image instead of allowing it to overrun the bar. How do I style it so that my image/button can be larger than the navbar?

<link href="https://www.w3schools.com/w3css/4/w3.css" rel="stylesheet"/>
<div  style="max-height: 4em;">
    <a href="/home">
      <img src="{% static 'myProject/images/Logo_nobg.png' %}" style="width: 7em; height: 7em; background: transparent; z-index: 15;">
    </a>
    <div  style="display: flex; justify-content: right; align-items: center; height: 75px; margin-right: 10px; font-family: Impact, sans-serif; font-size: 1.25em;">
    <div >
      <button >Services</button>
      <div >
        <a href="/coaching#coach" >Coaching</a>
        <a href="/coaching#rental" >Rentals</a>
        <a href="/coaching#pricing" >Packages and Pricing</a>
      </div>
    </div>
    <a href="/sales" >Sales</a>
    <a href="/info" >FAQ</a>
    <a href="/contact" >Contact</a>
    </div>
  </div>
</div>

CodePudding user response：

Your code uses the w3schools design system and for the .w3-bar class it uses overflow hidden, so you'll never be able to move the logo out of there unless you override it.

That's what I've done in the code example is override the overflow hidden then use relative position on the containing div then I was able to use absolute positioning on the logo (I used a demo logo so you can see the effect) to move it 15px from the top and left.

Feel free to edit to suit your needs.

.relative {
position: relative;
}

.logo-absolute {
position: absolute;
top: 15px;
left: 15px;
}

.w3-bar {
overflow: visible !important;
}

<link href="https://www.w3schools.com/w3css/4/w3.css" rel="stylesheet"/>
  <div  style="max-height: 4em;">
    <a href="/home">
      <img src="https://upload.wikimedia.org/wikipedia/commons/thumb/a/a0/W3Schools_logo.svg/512px-W3Schools_logo.svg.png" style="width: 7em; height: 7em; background: transparent; z-index: 15;" >
    </a>
    <div  style="display: flex; justify-content: right; align-items: center; height: 75px; margin-right: 10px; font-family: Impact, sans-serif; font-size: 1.25em;">
    <div >
      <button >Services</button>
      <div >
        <a href="/coaching#coach" >Coaching</a>
        <a href="/coaching#rental" >Rentals</a>
        <a href="/coaching#pricing" >Packages and Pricing</a>
      </div>
    </div>
    <a href="/sales" >Sales</a>
    <a href="/info" >FAQ</a>
    <a href="/contact" >Contact</a>
    </div>
  </div>
</div>