I am having trouble aligning a CSS hamburger menu next to my logo. I have placed both the CSS hamburger and the logo in the header. Although I was able to float the logo to the right, it is not on the same line as the menu.
After the header, I would like to add some boxes. This will specifically be for the mobile version of the site.
body {
margin: 0;
padding: 0;
font-family: 'Source Sans Pro', sans-serif;
}
h1 {
width: 100%;
color: #fff;
text-align: center;
}
img {
max-width: 100%;
}
.header_logo {
float: right;
}
/*
* Created by Erik Terwan
* November 24th, 2015
* MIT License
*/
a {
text-decoration: none;
color: #fff;
transition: color 0.3s ease;
}
a:hover {
color: tomato;
}
// Remaining CSS code here...
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width,initial-scale=1">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<title>Batukeros - Space Groove Gang</title>
// External stylesheet links
</head>
<body>
<div class="container">
<header>
<nav role="navigation">
<div id="menuToggle">
// Menu toggle input and spans for hamburger icon
</ul>
</div>
</nav>
<img class="header_logo" src="../images/logo_s.png" alt="logo batukeros">
// Additional header content
</header>
<main>
<section class="content">
<section id="box_dates" class="box">Termine</section>
<section id="box_about" class="box">Über uns</section>
<section id="box_pics" class="box">Fotos</section>
<section id="box_imprint" class="box">Impressum</section>
</section>
</main>
</div>
</body>
</html>Appreciate your guidance!