How can I align my menu icon and header text - html

Question

On my site, there is a menu hamburger icon and a title. I've been trying to align them so they on the same row, but I can't figure out how. I've tried wrapping inside a div and I've also tried display:inline-block. Does anybody know how to align the text and hamburger icon.
#import url(http://fonts.googleapis.com/css?family=Raleway:500);
*,
*:before,
*:after {
box-sizing: border-box;
}
.menu-wrapper {
position: relative;
width: 250px;
height: 250px;
margin-top: 60px;
margin-left: 30px;
}
.menu {
position: relative;
width: 36px;
height: 6px;
background-color: #707070;
user-select: none;
transition: all 0.25s ease-in-out;
cursor: pointer;
margin: 5px;
color: #707070;
-webkit-perspective: 1000;
-webkit-backface-visibility: hidden;
-webkit-transform: translate3d(0, 0, 0);
-webkit-tap-highlight-color: transparent;
}
.menu label {
cursor: pointer;
position: absolute;
font-family: 'Raleway', sans-serif;
font-size: 40px;
line-height: 30px;
top: -12px;
left: 48px;
}
.menu:hover > ul.nav-links,
.menu.open > ul.nav-links {
transition: all 0.25s ease-in-out;
opacity: 1;
width: 180px;
transform: translateX(15px);
pointer-events: auto;
}
.menu:after,
.menu:before {
content: "";
position: absolute;
width: 36px;
height: 6px;
background-color: #707070;
transition: all 0.25s ease-in-out;
}
.menu:after {
top: 12px;
}
.menu:before {
top: -12px;
}
.menu:hover,
.menu.open {
background-color: transparent;
}
.menu:hover::after,
.menu:hover::before,
.menu.open::after,
.menu.open::before {
transition: all 0.3s ease-in-out;
width: 18px;
}
.menu:hover::after,
.menu.open::after {
transform: translate(3px, -7px) rotate(405deg);
}
.menu:hover::before,
.menu.open::before {
transform: translate(12px, 17px) rotate(-405deg);
}
.menu ul.nav-links {
margin: 0;
padding: 36px 0 0 0;
opacity: 0;
transform: translateX(-15px);
transition: all 0.25s ease-in-out;
position: absolute;
width: 0;
height: 0;
pointer-events: none;
}
.menu ul.nav-links li {
width: 100%;
padding: 4px 8px;
list-style-type: none;
font-family: 'Raleway', sans-serif;
font-size: 25px;
text-transform: uppercase;
transition: all 0.25s ease-in-out;
border-left: 2px solid #707070;
}
.menu ul.nav-links li:hover,
.menu ul.nav-links li.active {
color: #707070;
border-left: 2px solid #707070;
}
#import url('https://fonts.googleapis.com/css?family=Fjalla+One');
#import url('https://fonts.googleapis.com/css?family=Roboto');
#import url('https://fonts.googleapis.com/css?family=Oswald');
#import url('https://fonts.googleapis.com/css?family=Quicksand');
header {
background: #fff;
height: 145px;
position: fixed;
top: 0;
transition: top 0.2s ease-in-out;
width: 100%;
border-bottom: 5px solid;
border-bottom-color: #bcbcbc;
}
.nav-up {
top: -145px;
}
body,
html {
margin: 0;
padding: 0;
}
video.home {
position: absolute;
top: 0;
right: 0;
bottom: 0;
left: 0;
overflow: hidden;
z-index: -100;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
}
div.vid {
position: fixed;
top: 0;
right: 0;
bottom: 0;
left: 0;
overflow: hidden;
z-index: -100;
}
footer {
background: #222020;
height: 50px;
position: fixed;
bottom: 0;
margin-bottom: 0.5em;
margin-bottom: 0.5em;
margin-left: 0.5em;
margin-right: 0.5em;
width: 99%;
}
p.copyright {
color: white;
text-transform: uppercase;
font-size: 15px;
font-family: 'Roboto', sans-serif;
}
div.footer {
float: left;
margin-left: 2em;
}
h1 {
text-align: center;
font-family: 'Fjalla One', sans-serif;
color: #666;
}
p {
color: black;
font-family: 'Oswald', sans-serif;
}
a.contact {
text-decoration: none;
color: white;
background-color: #36a2dc;
padding: 20px;
padding-left: 10px;
border-radius: 5%;
cursor: pointer;
outline: none;
height: 100px;
width: 200px;
font-family: 'Quicksand', sans-serif;
}
i.icon {
padding: 8px;
}
div.contact {
position: absolute;
left: 50%;
transform: translate(-50%, -50%);
}
ul.social {
display: block;
margin: 5% 0;
list-style-type: none;
text-align: center;
margin-top: 0px;
}
ul.social li {
font-size: 1em;
display: inline;
padding: 0 2%;
}
ul.social li a {
color: #707070;
}
ul.social li.dribble a:hover {
color: #e040a9;
}
ul.social li.twitter a:hover {
color: #258fc9;
}
ul.social li.behance a:hover {
color: #212121;
}
ul.social li.googleplus a:hover {
color: #e73710;
}
ul.social li.github a:hover {
color: #171515;
}
/*=================HEADER=====================================*/
a {
text-decoration: none;
color: #707070;
}
a:hover {
color: #898e8e;
}
a:active {
color: white;
}
div.head {
margin-top: 10px;
}
/*=========================================================== */
.container {
max-width: 960px;
margin: 0 auto;
}
/* ============================================================
SECTIONS
============================================================ */
section.module:last-child {
margin-bottom: 0;
}
section.module h2 {
margin-bottom: 40px;
font-family: 'Fjalla One', sans-serif;
font-size: 30px;
color: #515151;
text-align: center;
}
section.module p {
margin-bottom: 40px;
font-size: 16px;
font-weight: 300;
color: #515151;
text-align: center;
}
section.module p:last-child {
margin-bottom: 0;
}
section.module.content {
padding: 40px 0;
}
section.module.parallax {
height: 600px;
background-position: 50% 50%;
background-repeat: no-repeat;
background-attachment: fixed;
background-size: cover;
}
section.module.parallax h1 {
color: rgba(255, 255, 255, 0.8);
font-size: 48px;
line-height: 600px;
font-weight: 700;
text-align: center;
text-transform: uppercase;
text-shadow: 0 0 10px rgba(0, 0, 0, 0.2);
}
section.module.parallax-1 {
background-image: url("https://static.pexels.com/photos/34578/pexels-photo.jpg");
}
section.module.parallax-2 {
background-image: url("https://d2lm6fxwu08ot6.cloudfront.net/img-thumbs/960w/UQ9AB8NRV9.jpg");
}
section.module.parallax-3 {
background-image: url("https://d2lm6fxwu08ot6.cloudfront.net/img-thumbs/960w/2UXCQG5Q7W.jpg");
}
#media all and (min-width: 600px) {
section.module h2 {
font-size: 42px;
}
section.module p {
font-size: 20px;
}
section.module.parallax h1 {
font-size: 96px;
}
}
#media all and (min-width: 960px) {
section.module.parallax h1 {
font-size: 160px;
}
}
<header class="nav-down">
<!-- Open on hover menú -->
<div class="menu-wrapper">
<div class="menu">
<ul class="nav-links">
<li>Home
</li>
<li>About
</li>
<li>Portfolio
</li>
<li class="active">Projects
</li>
<li>Contact
</li>
</ul>
</div>
</div>
<div class="">
<h1>William Chen</h1>
<ul class="social">
<li class="dribble"><i class="fa fa-dribbble fa-3x"></i>
</li>
<li class="twitter"><i class="fa fa-twitter fa-3x"></i>
</li>
<li class="behance"><i class="fa fa-behance fa-3x"></i>
</li>
<li class="googleplus"><i class="fa fa-google-plus fa-3x"></i>
</li>
<li class="github"><i class="fa fa-github fa-3x"></i>
</li>
</ul>
</div>
</header>

Answer 1

Here is a JsFiddle with some changes: https://jsfiddle.net/m5b2f0gc/1/
One thing I did is changed the .menu margin, and then I created a new ID called "william" to help move the margin left.
.menu {
position: relative;
width: 36px;
height: 6px;
background-color: #707070;
user-select: none;
transition: all 0.25s ease-in-out;
cursor: pointer;
margin: 20px;
color: #707070;
-webkit-perspective: 1000;
-webkit-backface-visibility: hidden;
-webkit-transform: translate3d(0, 0, 0);
-webkit-tap-highlight-color: transparent;
}
#william {
margin-left: 150px;
}

Answer 2

Lots of comments here...but none of them are suggesting the seemingly easiest option.
Wrap both of the elements in question in a div (or not, it works without parent div so long as your widths for both menu-wrapper and head are <= 100% combined).
Add the following both the .menu-wrapper and the .head class:
.menu-wrapper, .head {
float:left;
}
That will get them on the same row. Then you can use padding/line heights to get them aligned more beautifully.

Answer 3

I think this code does what you want:
#import url(http://fonts.googleapis.com/css?family=Raleway:500);
*,
*:before,
*:after {
box-sizing: border-box;
}
.menu-wrapper {
position: relative;
width: 250px;
height: 250px;
margin-top: 60px;
margin-left: 30px;
text-align: justify;
}
.menu {
position: relative;
width: 36px;
height: 6px;
background-color: #707070;
user-select: none;
transition: all 0.25s ease-in-out;
cursor: pointer;
margin: 5px;
color: #707070;
-webkit-perspective: 1000;
-webkit-backface-visibility: hidden;
-webkit-transform: translate3d(0, 0, 0);
-webkit-tap-highlight-color: transparent;
}
.menu label {
cursor: pointer;
position: absolute;
font-family: 'Raleway', sans-serif;
font-size: 40px;
line-height: 30px;
top: -12px;
left: 48px;
}
.menu:hover > ul.nav-links,
.menu.open > ul.nav-links {
transition: all 0.25s ease-in-out;
opacity: 1;
width: 180px;
transform: translateX(15px);
pointer-events: auto;
}
.menu:after,
.menu:before {
content: "";
position: absolute;
width: 36px;
height: 6px;
background-color: #707070;
transition: all 0.25s ease-in-out;
}
.menu:after {
top: 12px;
}
.menu:before {
top: -12px;
}
.menu:hover,
.menu.open {
background-color: transparent;
}
.menu:hover::after,
.menu:hover::before,
.menu.open::after,
.menu.open::before {
transition: all 0.3s ease-in-out;
width: 18px;
}
.menu:hover::after,
.menu.open::after {
transform: translate(3px, -7px) rotate(405deg);
}
.menu:hover::before,
.menu.open::before {
transform: translate(12px, 17px) rotate(-405deg);
}
.menu ul.nav-links {
margin: 0;
padding: 36px 0 0 0;
opacity: 0;
transform: translateX(-15px);
transition: all 0.25s ease-in-out;
position: absolute;
width: 0;
height: 0;
pointer-events: none;
}
.menu ul.nav-links li {
width: 100%;
padding: 4px 8px;
list-style-type: none;
font-family: 'Raleway', sans-serif;
font-size: 25px;
text-transform: uppercase;
transition: all 0.25s ease-in-out;
border-left: 2px solid #707070;
}
.menu ul.nav-links li:hover,
.menu ul.nav-links li.active {
color: #707070;
border-left: 2px solid #707070;
}
#import url('https://fonts.googleapis.com/css?family=Fjalla+One');
#import url('https://fonts.googleapis.com/css?family=Roboto');
#import url('https://fonts.googleapis.com/css?family=Oswald');
#import url('https://fonts.googleapis.com/css?family=Quicksand');
header {
background: #fff;
height: 145px;
position: fixed;
top: 0;
transition: top 0.2s ease-in-out;
width: 100%;
border-bottom: 5px solid;
border-bottom-color: #bcbcbc;
}
.nav-up {
top: -145px;
}
body,
html {
margin: 0;
padding: 0;
}
video.home {
position: absolute;
top: 0;
right: 0;
bottom: 0;
left: 0;
overflow: hidden;
z-index: -100;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
}
div.vid {
position: fixed;
top: 0;
right: 0;
bottom: 0;
left: 0;
overflow: hidden;
z-index: -100;
}
footer {
background: #222020;
height: 50px;
position: fixed;
bottom: 0;
margin-bottom: 0.5em;
margin-bottom: 0.5em;
margin-left: 0.5em;
margin-right: 0.5em;
width: 99%;
}
p.copyright {
color: white;
text-transform: uppercase;
font-size: 15px;
font-family: 'Roboto', sans-serif;
}
div.footer {
float: left;
margin-left: 2em;
}
h1 {
text-align: center;
font-family: 'Fjalla One', sans-serif;
color: #666;
margin-bottom: -80px;
}
p {
color: black;
font-family: 'Oswald', sans-serif;
}
a.contact {
text-decoration: none;
color: white;
background-color: #36a2dc;
padding: 20px;
padding-left: 10px;
border-radius: 5%;
cursor: pointer;
outline: none;
height: 100px;
width: 200px;
font-family: 'Quicksand', sans-serif;
}
i.icon {
padding: 8px;
}
div.contact {
position: absolute;
left: 50%;
transform: translate(-50%, -50%);
}
ul.social {
display: block;
margin: 5% 0;
list-style-type: none;
text-align: center;
margin-top: 0px;
}
ul.social li {
font-size: 1em;
display: inline;
padding: 0 2%;
}
ul.social li a {
color: #707070;
}
ul.social li.dribble a:hover {
color: #e040a9;
}
ul.social li.twitter a:hover {
color: #258fc9;
}
ul.social li.behance a:hover {
color: #212121;
}
ul.social li.googleplus a:hover {
color: #e73710;
}
ul.social li.github a:hover {
color: #171515;
}
/*=================HEADER=====================================*/
a {
text-decoration: none;
color: #707070;
}
a:hover {
color: #898e8e;
}
a:active {
color: white;
}
div.head {
margin-top: 10px;
}
/*=========================================================== */
.container {
max-width: 960px;
margin: 0 auto;
}
/* ============================================================
SECTIONS
============================================================ */
section.module:last-child {
margin-bottom: 0;
}
section.module h2 {
margin-bottom: 40px;
font-family: 'Fjalla One', sans-serif;
font-size: 30px;
color: #515151;
text-align: center;
}
section.module p {
margin-bottom: 40px;
font-size: 16px;
font-weight: 300;
color: #515151;
text-align: center;
}
section.module p:last-child {
margin-bottom: 0;
}
section.module.content {
padding: 40px 0;
}
section.module.parallax {
height: 600px;
background-position: 50% 50%;
background-repeat: no-repeat;
background-attachment: fixed;
background-size: cover;
}
section.module.parallax h1 {
color: rgba(255, 255, 255, 0.8);
font-size: 48px;
line-height: 600px;
font-weight: 700;
text-align: center;
text-transform: uppercase;
text-shadow: 0 0 10px rgba(0, 0, 0, 0.2);
}
section.module.parallax-1 {
background-image: url("https://static.pexels.com/photos/34578/pexels-photo.jpg");
}
section.module.parallax-2 {
background-image: url("https://d2lm6fxwu08ot6.cloudfront.net/img-thumbs/960w/UQ9AB8NRV9.jpg");
}
section.module.parallax-3 {
background-image: url("https://d2lm6fxwu08ot6.cloudfront.net/img-thumbs/960w/2UXCQG5Q7W.jpg");
}
#media all and (min-width: 600px) {
section.module h2 {
font-size: 42px;
}
section.module p {
font-size: 20px;
}
section.module.parallax h1 {
font-size: 96px;
}
}
#media all and (min-width: 960px) {
section.module.parallax h1 {
font-size: 160px;
}
}
<h1>William Chen</h1>
<div class="menu-wrapper">
<div class="menu">
<ul class="nav-links">
<li>Home
</li>
<li>About
</li>
<li>Portfolio
</li>
<li class="active">Projects
</li>
<li>Contact
</li>
</ul>
</div>
</div>
<div class="head">
<ul class="social">
<li class="dribble"><i class="fa fa-dribbble fa-3x"></i>
</li>
<li class="twitter"><i class="fa fa-twitter fa-3x"></i>
</li>
<li class="behance"><i class="fa fa-behance fa-3x"></i>
</li>
<li class="googleplus"><i class="fa fa-google-plus fa-3x"></i>
</li>
<li class="github"><i class="fa fa-github fa-3x"></i>
</li>
</ul>
</div>
JSFiddle: https://jsfiddle.net/wvyxe5rp/2/
What I did is move the h1 element on top and then add this line:
margin-bottom: -80px;
inside the css of h1.