I'm attempting to move the Login menu all the way to the right on the navigation bar. Currently, all the menu items are aligned to the left and I need to align the Login menu to the right. However, I'm unsure of where to begin.
The navigation menu is generated from an array list in nav.php:
<ul>
<?php
foreach ($navItems as $item) {
echo "<li><a href=\"$item[slug]\"><h2>$item[title]</h2></a></li>";
}
?>
</ul>
Here is the array list in array.php that the navigation menu items are coming from:-
<?php
//Navigation Menu Items
$navItems =array(
array(
'slug' => "index.php",
'title' => "Home"
),
array(
'slug' => "about.php",
'title' => "About Us"
),
array(
'slug' => "why.php",
'title' => "Why Us"
),
array(
'slug' => "what.php",
'title' => "What's Included"
),
array(
'slug' => "faq.php",
'title' => "FAQs"
),
array(
'slug' => "contact.php",
'title' => "Contact Us"
),
array(
'slug' => "login.php",
'title' => "Login"
),
);
?>
In another file called spacer.php, these elements are included:
<nav>
<h2 class="hidden">Our navigation</h2>
<?php include 'includes/nav.php'; ?>
</nav>
Below is the CSS for the navigation menu:
nav{
margin: 0 auto;
width: 100%;
font-size: 18px;
z-index: 300;
font-weight: bolder;
font-family: 'Open Sans', sans-serif;
text-shadow:0px 1px #D6D0C1 ;
}
nav ul
{
list-style:none;
}
nav ul li
{
display:block;
float:left;
padding:25px 25px;
}
nav ul li a
{
font-family: 'Open Sans', sans-serif;
text-transform:uppercase;
transition: all .25s ease;
}
nav ul li a:hover
{
color:#A0522D;
}
You can see a live example here.