Wednesday, 11 September 2013

How to move CSS navbar elements to the right?

How to move CSS navbar elements to the right?

for an online course I was taking I created a web app through heroku
here is the site
http://is.gd/fMJN8f
In the top I have a navigation bar with elements for home, about, faq,
contact, login and register
I would like to move the login and register elements to the right of the
navigation bar so the login drop-down menu looks nicer
here is the code I tried
<div class = "navbar navbar-inverse navbar-fixed-top">
<div class = "navbar-inner">
<div class = "container">
<button type = "button" class = "btn btn-navbar" data-toggle =
"collapse" data-target = ".nav-collapse">
<span class = "icon-bar"></span>
<span class = "icon-bar"></span>
<span class = "icon-bar"></span>
</button>
<a class = "brand" href = "#"><span class =
"SportMem-sport">Sport</span><span class =
"SportMem-mem">Mem</span></a>
<div class = "nav-collapse collapse">
<ul class = "nav">
<li class = "active"><a href = "#">Home</a></li>
<li><a href = "/about">About</a></li>
<li><a href = "/faq">FAQs</a></li>
<li><a href = "/contact">Contact</a></li>
<li class = "login">
<a id = "login-start" href = "#">
Login<span></span>
</a>
<div id = "login-form">
<form>
<fieldset id = "inputs">
<input id = "username" type = "email" name = "Email"
placeholder = "Email Address" required>
<input id = "password" type = "password" name = "Password"
placeholder = "Password" required>
</fieldset>
<fieldset id = "actions">
<input type = "submit" id = "submit" value = "Log-in">
<label><input type = "checkbox" checked = "checked"> Keep me
logged-on</label>
</fieldset>
</form>
</div>
</li>
<li class = "register.html"><a href = "#register">Register</a></li>
</ul>
</div>
</div>
</div>
i tried floating the elements to the right among others but nothing I've
tried worked
Could someone please find me a solution?
Help is greatly appreciated

No comments:

Post a Comment