Problems with formatting menu bar

Question

I've made a menu bar using a 'ul' containing 'li', it kept displaying the in reverse order until I added : .nav-bar .btn{ float: left; } .nav-bar ul{ float: right; } .nav-bar .btn{ float: left; } .nav-bar ul{ float: right; }

But after I did that all of the buttons where overlapping and too small. Does anyone know how to fix this?

http://jsfiddle.net/w3hp1txq/7/

Answer 1

I have removed the <div> tags inside <ul> and added padding. This is an example. You can modify it as per your need or the UI you want.

 /*----------nav-bar-----------*/ .nav-bar { width: 100%; top: 0; left: 0; position: fixed; text-align: center; background-color: rgba(0, 0, 0, 0.75); height: auto; z-index: 1; } .nav-bar .logo { top: 0; width: 150px; position: absolute; left: 1%; height: 90%; display: block; } .nav-bar .btn { width: 21%; padding-bottom: 1.2%; float: left; display: block; list-style:none; border-bottom: 2px solid #777777; text-shadow: 2px 2px 4px #000000; margin-bottom: 0; } .nav-bar ul { float: right; } .nav-bar a { padding-right: 40px; padding-top: 12.5%; width: 100%; padding-bottom: 2%; text-decoration: none; color: #777777; bottom: 0; }

  <body> <div class="nav-bar"> <img class="logo" src="logo.png" /> <div class="container"> <ul> <li class="btn"> <a href="#">Home</a> </li> <li class="btn"> <a href="#">About</a> </li> <li class="btn"> <a href="#">Services</a> </li> <li class="btn selected"> <a href="#">Contact</a> </li> </ul> </div> </div> </body>

Problems with formatting menu bar

Question

1 answers

solution1
1 ACCPTED 2015-01-05 06:28:45

Problems with formatting menu bar

Question

1 answers

solution1 1 ACCPTED 2015-01-05 06:28:45

solution1
1 ACCPTED 2015-01-05 06:28:45