I am encountering a challenge with aligning my navigation links with my logo. Currently, the logo is centered within the navigation bar and the links are appearing above it instead of next to it. The problematic layout can be seen in the image below https://i.sstatic.net/XnKzZ.png
My objective is to achieve this desired layout:
https://i.sstatic.net/lu45w.png
Below is my header code:
<header id="header" role="banner">
<div class="header-inner">
<nav class="navbar">
<div class="container text-xs-center">
<div class="navbar-nav">
<a href='{{ url("/") }}' class="nav-item-link nav-item nav-link">Home</a>
<a href="#" class="nav-item-link nav-item nav-link">Our Team</a>
<a href="#" class="nav-item-link 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-link nav-item nav-link">About Us</a>
<a href='{{ url("/contact") }}' class="nav-item-link nav-item nav-link">Contact Us</a>
<a href='{{ url("/donate") }}' class="nav-item-link nav-item nav-link" id="donate">Support Us</a>
</div>
</div>
</nav>
</div>
</header>
Here is my CSS styling:
a.nav-item{
color:#000;
font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif;
font-weight:bold;
padding:20px;
}
a.nav-item:hover{
color:#000;
}
a.nav-item:hover{
color:#000;
}
.navbar-nav{
display:inline-block;
}
#donate{
background-color: #7ED321;
border-radius: 8px;
padding: 15px;
}
#header{
width:100%;
}
.header-inner{
padding: 18px 0;
width:100%;
}
I would greatly appreciate any assistance on resolving this issue!