Hi guys, I've tried this for a while but I can't go anywhere. I seek help from you here. Here's the code: <!DOCTYPE html> <html><head> <meta charset="UTF-8"> <title>How the hell to do this?</title> <style> html, body { padding: 0; margin: 0; } .bar { width: 100%; padding: 0.3em 0; text-align: center; background: rgba(101,101,101,1.0); } .nav { display: inline-block; padding: 0.3em 0.5em; text-align: center; border-radius: 2em; border-left: 0.08em solid #555; border-right: 0.08em solid #555; -webkit-box-shadow: 0 0 0.2em #888; -moz-box-shadow: 0 0 0.2em #888; box-shadow: 0 0 0.2em #888; } .nav:last-child { display: inline-block; padding: none; } .nav a:active, .nav a:visited { color: #BBB; } .nav a:hover { color: #FFF; } .nav:nth-of-type(2) { margin-left: 0.3em; margin-right: 0.3em; } .hamburger { position: relative; font-size: .6em; width: 3.3em; height: 3.3em; background: #555; bottom: -1.7em; } .hamburger:before { border-top: 0.3em solid #efefef; content: ""; position: absolute; width: 1.9em; height: 1em; border-bottom: 0.3em solid #efefef; top: 1em; left: 0.7em; } .hamburger:after { content: ""; position: absolute; top: 1.6em; width: 1.9em; height: 0.3em; background: #efefef; left: 0.7em; } </style> </head><body> <div class=bar> <ul> <li class=nav> <a href='#' title='Box 1'>Box 1</a> </li> <li class=nav> <a href='#' title='Box 2'>Box 2</a> </li> <li class=nav> <a href='#' title='Setting'><div class=hamburger></div></a> </li> </ul> </div> </body></html> Code (markup): I want to align a CSS button in line with the others on the nav bar but thing doesn't go as planned. Since it can do using only CSS I don't want to use an image for the job. How can I get what I want. Thank you,
Hi! You can just load Font Awesome off the CDN... saves you a lot of CSS pain. <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>How to do this</title> <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.5.0/css/font-awesome.min.css"> <style> html, body{ padding:0; margin:0; border:0; } .bar{ width:100%; padding:0.3em 0; text-align:center; background:rgba(101,101,101,1.0); } .bar a{ color:#fff; } /* DO YOUR BOX STYLING HERE */ .nav{ display:inline-block; padding:10px; border:1px solid #555; } </style> </head> <body> <h1>YOU CAN LOAD FONT AWESOME OFF THE CDN</h1> <a href="https://fortawesome.github.io/Font-Awesome/icons/" target="_blank">https://fortawesome.github.io/Font-Awesome/icons/</a> <br/><br/> <div class="bar"> <div class="nav"> <a href='#' title='Box 1'>Box 1</a> </div> <div class="nav"> <a href='#' title='Box 2'>Box 2</a> </div> <div class="nav"> <a href='#' title='Setting'><i class="fa fa-bars fa-lg"></i></a> </div> </div> </body> </html> HTML:
I've got help from another forum. Set vertical-align: middle; to the nav and remove bottom: -1.7em; from the hamburger.