Sailor Jerry Sailor Jerry - 1 month ago 6
CSS Question

Two Navigation Bars, top one aligned right, bottom one aligned left

I am trying to create a navigation bar(s) identical to the one pictured. I am having issue with floating.

This is the navigation bar(s) I am trying to make

<div class="upper_navigation">
<ul>
<li><a href="www.facebook.com" target="_blank"><i class="fa fa-facebook icon" aria-hidden="true"></i></a></li>
<li><a href="twitter.com" target="_blank"><i class="fa fa-twitter icon" aria-hidden="true"></i></a></li>
<li><a href="www.instagram.com" target="_blank"><i class="fa fa-instagram icon" aria-hidden="true"></i></a></li>
<li><a href="youtube.com" target="_blank"><i class="fa fa-youtube-play icon" aria-hidden="true"></i></a></li>
</ul>
<ul>
<li class="li_top li_nav"><a href=#contact>Contact</a></li>
<li class="li_top li_nav"><a href=#sign_up>Sign Up</a></li>
<li class="li_top li_nav"><a href=#donate>Donate</a></li>
</ul>
</div>

<div id="main_navigation">
<ul class="main_nav">
<li><a href="#about" class="li_nav">About Us</a></li>
<li><a href="#trips" class="li_nav">Trips</a></li>
<li><a href="#projects" class="li_nav">Projects</a></li>
<li><a href="#donations" class="li_nav">Donations</a></li>
<li><a href="#sponsors" class="li_nav">Sponsors</a></li>
<li><a href="#contact" class="li_nav">Contact</a></li>
</ul>
</div>

Answer

To achieve what you want you can make the <ul> and <li> inline-block so that it will display in the same line and then float your .upper_navigation to right and float your #main_navigation or .main_nav to left. In the example below I used the class of <ul>.

Here is an example of the css for that.

ul, li{
  display:inline-block;
}
.upper_navigation{
  float:right;
}
.main_nav{
  width:100%;
  float:left; // if you want center change the float to text-align:center
}

This is just how to float your navigations since you said that you are having problems with floating. Here is the jsfiddle.