在导航中将导航项与徽标对齐4

Question

我目前正在尝试将导航项目与我在导航栏中心的图像徽标对齐。如下图所示，导航链接位于我的徽标上

我试图让它看起来更像这样：

这是我的导航代码：

<header>
    <nav class="navbar">
        <div class="container text-xs-center">
            <div class="navbar-nav">
                <a href='{{ url("/") }}' class="nav-item nav-link">Home</a>
                <a href="#" class="nav-item nav-link">Our Team</a>
                <a href="#" class="nav-item nav-link">Media</a>
                <a href='{{ url("/") }}' class="nav-item nav-link"><img src="./images/zipzap.jpg" class="img-fluid" alt=""></a>
                <a href="#" class="nav-item nav-link">About Us</a>
                <a href='{{ url("/contact") }}' class="nav-item nav-link">Contact Us</a>
                <a href='{{ url("/donate") }}' class="nav-item nav-link" id="donate">Support Us</a>
            </div>
        </div>
    </nav>
</header>

和css：

a.nav-item{
    color:#000;
    font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif;
    font-weight:bold;
}

a.nav-item:hover{
    color:#000;
}

a.nav-item:active{
    color:#000;
}

.navbar-nav{
    display:inline-block;
}

#donate{
    background-color: #7ED321;
    border-radius: 8px;
    padding: 15px;
}

任何帮助将不胜感激！