如何对齐菜单图标和标题文本

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><a href="index.html">Home</a> </li> <li><a href="about.html">About</a> </li> <li><a href="#">Portfolio</a> </li> <li class="active"><a href="#">Projects</a> </li> <li><a href="#">Contact</a> </li> </ul> </div> </div> <div class=""> <h1>William Chen</h1> <ul class="social"> <li class="dribble"><a href="https://dribbble.com/WilliamC" target="_blank"><i class="fa fa-dribbble fa-3x"></i></a> </li> <li class="twitter"><a href="https://twitter.com/CookieWilliamC" target="_blank"><i class="fa fa-twitter fa-3x"></i></a> </li> <li class="behance"><a href="https://www.behance.net/WilliamC" target="_blank"><i class="fa fa-behance fa-3x"></i></a> </li> <li class="googleplus"><a href="https://plus.google.com/102927761095010198782" target="_blank"><i class="fa fa-google-plus fa-3x"></i></a> </li> <li class="github"><a href="https://github.com/monsterwill" target="_blank"><i class="fa fa-github fa-3x"></i></a> </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><a href="index.html">Home</a> </li> <li><a href="about.html">About</a> </li> <li><a href="#">Portfolio</a> </li> <li class="active"><a href="#">Projects</a> </li> <li><a href="#">Contact</a> </li> </ul> </div> </div> <div class="head"> <ul class="social"> <li class="dribble"><a href="https://dribbble.com/WilliamC" target="_blank"><i class="fa fa-dribbble fa-3x"></i></a> </li> <li class="twitter"><a href="https://twitter.com/CookieWilliamC" target="_blank"><i class="fa fa-twitter fa-3x"></i></a> </li> <li class="behance"><a href="https://www.behance.net/WilliamC" target="_blank"><i class="fa fa-behance fa-3x"></i></a> </li> <li class="googleplus"><a href="https://plus.google.com/102927761095010198782" target="_blank"><i class="fa fa-google-plus fa-3x"></i></a> </li> <li class="github"><a href="https://github.com/monsterwill" target="_blank"><i class="fa fa-github fa-3x"></i></a> </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.