I need the navbar to show the donation bar on the same line as the navigation options. When resizing the image, it drops down as shown below. I have attempted using responsive img tags and divs with column sizes, but they have not been successful.
As an additional question: How can I align the nav items with the buttons? The bread and donation buttons are slightly off, and padding adjustments do not work.
https://i.sstatic.net/ai40U.png
<!-- Collect all nav links, forms, and other content for toggling -->
<div class="collapse navbar-collapse navbar-ex1-collapse">
<ul class="nav navbar-nav">
<!-- Hidden li used to remove active class from about link when scrolled up past about section -->
<li class="hidden">
<a class="page-scroll" href="#page-top"></a>
</li>
<li>
<a class="page-scroll" href="news.html">News</a>
</li>
<li>
<a class="page-scroll" href="aboutus.html">About us</a>
</li>
<li>
<a class="page-scroll" href="team.html">Our Team</a>
</li>
<li>
<a class="page-scroll" href="volunteering.html">Volunteer</a>
</li>
<li>
<a class="page-scroll" href="contactus.html">Contact</a>
</li>
<li>
<div class="dropdown">
<button onclick="location.href='donation.html'" class="dropbtn2" >Donate</button>
<div class="dropdown-content">
<a class="page-scroll" href="donation.html#section1">SET DONATION</a>
<a class="page-scroll" href="donation.html#section2">GIFT A DONATION</a>
</div>
</div>
</li>
</ul>
<a href="donation.html"><img class="alignright hidden-xs" src="icons/fundraisingbar.png"></a>
</div>
<!-- /.navbar-collapse -->
</div>
<!-- /.container -->
</nav>
CSS:
/* Dropdown BOX */
/* Dropdown Button */
.dropbtn {
background-color: #F8F8F8;
color: 777777;
padding: 16px;
font-size: 16px;
border: none;
cursor: pointer;
}
.dropbtn2 {
background-color: #F8F8F8;
color: red;
padding: 16px;
font-size: 16px;
border: none;
cursor: pointer;
}
/* The container <div> - needed to position the dropdown content */
.dropdown {
position: relative;
display: inline-block;
}
/* Dropdown Content (Hidden by Default) */
.dropdown-content {
display: none;
position: absolute;
background-color: #f9f9f9;
min-width: 160px;
box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
z-index: 1;
}
/* Links inside the dropdown */
.dropdown-content a {
color: black;
padding: 12px 16px;
text-decoration: none;
display: block;
}
/* Change color of dropdown links on hover */
.dropdown-content a:hover {background-color: #f1f1f1}
/* Show the dropdown menu on hover */
.dropdown:hover .dropdown-content {
display: block;
}
/* Change the background color of the dropdown button when the dropdown content is shown */
.dropdown:hover .dropbtn {
background-color: #3e8e41;
}