Sailor Jerry Sailor Jerry - 1 year ago 55
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">
<li><a href="" target="_blank"><i class="fa fa-facebook icon" aria-hidden="true"></i></a></li>
<li><a href="" target="_blank"><i class="fa fa-twitter icon" aria-hidden="true"></i></a></li>
<li><a href="" target="_blank"><i class="fa fa-instagram icon" aria-hidden="true"></i></a></li>
<li><a href="" target="_blank"><i class="fa fa-youtube-play icon" aria-hidden="true"></i></a></li>
<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>

<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>

Answer Source

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{
  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.

Recommended from our users: Dynamic Network Monitoring from WhatsUp Gold from IPSwitch. Free Download