How to align a CSS hamburger button in line with the others on a nav bar

Hi guys,

I’ve tried and struck at how to remove a border arond the hamburger button and space above it.
Since this can be done with pure CSS I don’t want to use an image for the job.
How do I get what I want?
Here’s the code I’m attempting so far:


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; }
[/code] Thank you,
1 Like

You will need to set the vertical alignment for the .nav class to set how you want the hamburger to align with the others.

Remove the bottom:-1.7em from .hamburger and set .nav to vertical-align:middle;

1 Like

Thanks Paul,

It works.

This topic was automatically closed 91 days after the last reply. New replies are no longer allowed.