I have noticed a strange issue with my header layout. When I include the hamburger menu and user icon, they align perfectly in a row. However, as soon as I add the company logo, the user icon shifts downward and breaks the alignment.
I have tried adjusting padding-top, margins, and other properties to fix this issue, but nothing seems to work. It's almost like the layout is frozen in place.
Does anyone have any suggestions on what might be causing this problem and how I can resolve it?
$(document).on('click', function(e){
if(e.target.type == "checkbox")
return;
else{
var elem = $('#menuToggle').find('input[type=checkbox]');
if($(elem).prop('checked')){
$(elem).trigger('click');
}
}
});.headlogo {
display: block;
margin-left: auto;
margin-right: auto;
}
.userlogo {
display: block;
float: right;
margin-right: 20px;
margin-top: 10px;
}
/*
* Made by Erik Terwan
* 24th of November 2015
* All rights reserved
*
*
* If you are thinking of using this in
* production code, beware of the browser
* prefixes.
*/
body
{
overflow-x: hidden;
margin: 0;
padding: 0;
font-family: "Avenir Next", "Avenir", sans-serif;
}
a
{
text-decoration: none;
color: white;
transition: color 0.1s ease;
}
a:hover
{
color: black;
}
nav {
display: inline-block;
}
#menuToggle
{
display: block;
position: relative;
top: 50px;
left: 50px;
z-index: 1;
-webkit-user-select: none;
user-select: none;
}
#menuToggle input
{
display: block;
width: 40px;
height: 32px;
position: absolute;
top: -7px;
left: -5px;
cursor: pointer;
opacity: 0; /* hide this */
z-index: 2; /* and place it over the hamburger */
-webkit-touch-callout: none;
}
/*
* Just a quick hamburger
*/
#menuToggle span
{
display: block;
width: 33px;
height: 4px;
margin-bottom: 5px;
position: relative;
background: black;
border-radius: 3px;
z-index: 1;
transform-origin: 4px 0px;
transition: transform 0.5s cubic-bezier(0.77,0.2,0.05,1.0),
background 0.5s cubic-bezier(0.77,0.2,0.05,1.0),
opacity 0.55s ease;
}
#menuToggle span:first-child
{
transform-origin: 0% 0%;
}
#menuToggle span:nth-last-child(2)
{
transform-origin: 0% 100%;
}
/*
* Transform all the slices of hamburger
* into a crossmark.
*/
#menuToggle input:checked ~ span
{
opacity: 1;
transform: rotate(45deg) translate(-2px, -1px);
background: white
}
/*
* But let's hide the middle one.
*/
#menuToggle input:checked ~ span:nth-last-child(3)
{
opacity: 0;
transform: rotate(0deg) scale(0.2, 0.2);
}
/*
* Ohyeah and the last one should go the other direction
*/
#menuToggle input:checked ~ span:nth-last-child(2)
{
opacity: 1;
transform: rotate(-45deg) translate(0, -1px);
}
/*
* Make this absolute positioned
* at the top left of the screen
*/
#menu
{
position: absolute;
width: 400px;
margin: -100px 0 0 -50px;
padding: 50px;
padding-top: 125px;
float: left;
background: black;
list-style-type: none;
-webkit-font-smoothing: antialiased;
/* to stop flickering of text in safari */
transform-origin: 0% 0%;
transform: translate(-100%, 0);
transition: transform 0.5s cubic-bezier(0.77,0.2,0.05,1.0);
}
#menu li
{
padding: 10px 0;
font-size: 22px;
}
/*
* And let's fade it in from the left
*/
#menuToggle input:checked ~ ul
{
transform: scale(1.0, 1.0);
opacity: 1;
}<link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet"/>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<header>
<nav role="navigation">
<div id="menuToggle">
<input type="checkbox" />
<span></span>
<span></span>
<span></span>
<ul id="menu">
<a href="#"><li>Home</li></a>
<a href="#"><li>About</li></a>
<a href="#"><li>Info</li></a>
<a href="#"><li>Contact</li></a>
<a href="#"><li>Contact</li></a>
<a href="#"><li>Contact</li></a>
<a href="#"><li>Contact</li></a>
<a href="#"><li>Contact</li></a>
<a href="https://erikterwan.com/" target="_blank"><li>Show me more</li></a>
</ul>
</div>
</nav>
<img class="headlogo" src="http://www.bilder-upload.eu/upload/4483c1-1504701412.png">
<i class="fa fa-2x fa-user userlogo" aria-hidden="true"></i>
</header>If you want to remove the logo, simply delete the 'src' from the image with the 'headlogo' class.
Thank you to everyone who can provide assistance. :)