Adding a PNG logo to my navigation bar, with it flowing from the top and bottom

Question

I tried adding a logo to my navigation bar, but whenever i add the logo to the code, it just messes up the padding of the navbar itself and extends enough for it to have space to lie on it without overlapping, which is exactly what I need for the assignment I am given. I need to add a png logo, larger than my navbar and for the logo to overlap from the top and bottom of the navbar, the png logo is just a simple leaf without background.

Here is a picture showing my result and the needed result

 .menu { text-align: left; background-image: url("navigation-background.jpg"); }.menu ul{ display: inline-flex; list-style: none; color: maroon; }.menu ul li{ margin: 0; padding-left: 10px; padding-right: 10px; display:inline; text-align: center; }.menu ul li a{ text-decoration: none; color: white; display: flex; }.menu ul li img{ display: flow; }

 <div class="menu"> <ul> <li><img src="leaf.png" style="width: 40px;height: auto;"></li> <li> <a href="index.html">Дома</a> </li> <li> <a href="servisi.html">Сервиси</a> </li> <li> <a href="zanas.html">Зa нас</a> </li> <li> <a href="kontakt.html">Контакт</a> </li> <li> <a href="najava.html">Најава</a> </li> </ul> </div>

Any opinions/tips would be welcome when it comes to my code, I am a total newbie so take it easily. Thanks!

Answer 1

you should adjust:

style="width:40px;height:auto;

increase height from 40 incrementally and check whether ok