How to resize HTML navbar icon

user_4851728 0
Viewed 40

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 class="w3-bar w3-black w3-card-4 w3-large" 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 class="w3-right w3-hide-small" style="display: flex; justify-content: right; align-items: center; height: 75px; margin-right: 10px; font-family: Impact, sans-serif; font-size: 1.25em;">
    <div class="w3-dropdown-hover">
      <button class="w3-button">Services</button>
      <div class="w3-dropdown-content w3-bar-block w3-card-4">
        <a href="/coaching#coach" class="w3-bar-item w3-button w3-white">Coaching</a>
        <a href="/coaching#rental" class="w3-bar-item w3-button w3-white">Rentals</a>
        <a href="/coaching#pricing" class="w3-bar-item w3-button w3-white">Packages and Pricing</a>
      </div>
    </div>
    <a href="/sales" class="w3-bar-item w3-button">Sales</a>
    <a href="/info" class="w3-bar-item w3-button">FAQ</a>
    <a href="/contact" class="w3-bar-item w3-button">Contact</a>
    </div>
  </div>
</div>

css html
1 Answers

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 class="relative w3-bar w3-black w3-card-4 w3-large" 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;" class="logo-absolute">
    </a>
    <div class="w3-right w3-hide-small" style="display: flex; justify-content: right; align-items: center; height: 75px; margin-right: 10px; font-family: Impact, sans-serif; font-size: 1.25em;">
    <div class="w3-dropdown-hover">
      <button class="w3-button">Services</button>
      <div class="w3-dropdown-content w3-bar-block w3-card-4">
        <a href="/coaching#coach" class="w3-bar-item w3-button w3-white">Coaching</a>
        <a href="/coaching#rental" class="w3-bar-item w3-button w3-white">Rentals</a>
        <a href="/coaching#pricing" class="w3-bar-item w3-button w3-white">Packages and Pricing</a>
      </div>
    </div>
    <a href="/sales" class="w3-bar-item w3-button">Sales</a>
    <a href="/info" class="w3-bar-item w3-button">FAQ</a>
    <a href="/contact" class="w3-bar-item w3-button">Contact</a>
    </div>
  </div>
</div>

user_43359390
Related