I’m having trouble aligning the menu hamburger icon and title on my website. I’ve tried various methods like wrapping them in a div and using display:inline-block, but they still won’t align properly. Can anyone provide guidance on how to achieve this alignment?
@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=...')
...
<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://..." target="_blank"><i class="fa fa-d... fa-3x"></i></a>
...
</ul>
</div>
</header>