How to align Hamburger menu items? - html

Question

I have certain menu items in Navbar. It converts to Hamburger when rendered in mobile view thus its responsive. The items in Hamburger menu doesn't align properly. Following is the code reference
body {
margin: 0;
font-family: Helvetica, sans-serif;
background-color: #f4f4f4;
}
a {
color: #000;
}
.header {
background-color: #fff;
box-shadow: 1px 1px 4px 0 rgba(0, 0, 0, 0.1);
position: fixed;
width: 100%;
z-index: 3;
}
.header ul {
margin: 0;
padding: 0;
list-style: none;
overflow: hidden;
background-color: #fff;
}
.header li a {
display: block;
padding: 20px 20px;
border-right: 1px solid #f4f4f4;
text-decoration: none;
}
.header li a:hover,
.header .menu-btn:hover {
background-color: #f4f4f4;
}
.header .logo {
display: block;
float: left;
font-size: 2em;
padding: 10px 20px;
text-decoration: none;
}
.header .menu {
clear: both;
max-height: 0;
transition: max-height 0.2s ease-out;
}
.header .menu-icon {
cursor: pointer;
display: inline-block;
float: right;
padding: 28px 20px;
position: relative;
user-select: none;
}
.header .menu-icon .navicon {
background: #333;
display: block;
height: 2px;
position: relative;
transition: background 0.2s ease-out;
width: 18px;
}
.header .menu-icon .navicon:before,
.header .menu-icon .navicon:after {
background: #333;
content: "";
display: block;
height: 100%;
position: absolute;
transition: all 0.2s ease-out;
width: 100%;
}
.header .menu-icon .navicon:before {
top: 5px;
}
.header .menu-icon .navicon:after {
top: -5px;
}
.header .menu-btn {
display: none;
}
.header .menu-btn:checked~.menu {
max-height: 240px;
}
.header .menu-btn:checked~.menu-icon .navicon {
background: transparent;
}
.header .menu-btn:checked~.menu-icon .navicon:before {
transform: rotate(-45deg);
}
.header .menu-btn:checked~.menu-icon .navicon:after {
transform: rotate(45deg);
}
.header .menu-btn:checked~.menu-icon:not(.steps) .navicon:before,
.header .menu-btn:checked~.menu-icon:not(.steps) .navicon:after {
top: 0;
}
.menu-search {
display: flex;
flex-wrap: wrap;
float: right;
}
.search-box h5 {
color: red;
}
/* 48em = 768px */
#media (min-width: 52em) {
.header li {
float: left;
}
.header li a {
padding: 20px 30px;
}
.header .menu-search .menu-box .menu {
clear: none;
text-align: left;
max-height: none;
}
.header .menu-icon {
display: none;
}
.menu {
float: left;
}
}
<header class="header">
Celebyte
<div class="menu-search">
<span class="search-box">
<h5>Search Box</h5>
</span>
<span class="menu-box">
<input class="menu-btn" type="checkbox" id="menu-btn" />
<label class="menu-icon" for="menu-btn"
><span class="navicon"></span
></label>
<ul class="menu">
<li>Celebyte Gifting</li>
<li>Track Order</li>
<li>All Categories</li>
<li>Login</li>
</ul>
</span>
</div>
</header>
As seen above I wanted SearchBox and MenuItems to be in one row, thus used flex, but, even the hamburger items also getting the above property. My intention is to align Hamburger items to left. So what could be the best possible solution?
Codesandbox link: https://codesandbox.io/s/vibrant-night-r7p4e

Answer 1

body {
margin: 0;
font-family: Helvetica, sans-serif;
background-color: #f4f4f4;
}
a {
color: #000;
}
.header {
background-color: #fff;
box-shadow: 1px 1px 4px 0 rgba(0, 0, 0, 0.1);
position: fixed;
width: 100%;
z-index: 3;
}
.header ul {
margin: 0;
padding: 0;
list-style: none;
overflow: hidden;
background-color: #fff;
}
.header li a {
display: block;
padding: 20px 20px;
border-right: 1px solid #f4f4f4;
text-decoration: none;
}
.header li a:hover,
.header .menu-btn:hover {
background-color: #f4f4f4;
}
.header .logo {
display: block;
float: left;
font-size: 2em;
padding: 10px 20px;
text-decoration: none;
}
.header .menu {
clear: both;
max-height: 0;
transition: max-height 0.2s ease-out;
}
.header .menu-icon {
cursor: pointer;
display: inline-block;
float: right;
padding: 28px 20px;
position: relative;
user-select: none;
}
.header .menu-icon .navicon {
background: #333;
display: block;
height: 2px;
position: relative;
transition: background 0.2s ease-out;
width: 18px;
}
.header .menu-icon .navicon:before,
.header .menu-icon .navicon:after {
background: #333;
content: "";
display: block;
height: 100%;
position: absolute;
transition: all 0.2s ease-out;
width: 100%;
}
.header .menu-icon .navicon:before {
top: 5px;
}
.header .menu-icon .navicon:after {
top: -5px;
}
.header .menu-btn {
display: none;
}
.header .menu-btn:checked~.menu {
max-height: 240px;
}
.header .menu-btn:checked~.menu-icon .navicon {
background: transparent;
}
.header .menu-btn:checked~.menu-icon .navicon:before {
transform: rotate(-45deg);
}
.header .menu-btn:checked~.menu-icon .navicon:after {
transform: rotate(45deg);
}
.header .menu-btn:checked~.menu-icon:not(.steps) .navicon:before,
.header .menu-btn:checked~.menu-icon:not(.steps) .navicon:after {
top: 0;
}
.menu-search {
display: flex;
flex-wrap: wrap;
width: calc(100% - 166.297px);
}
.search-box h5 {
color: red;
}
/* 48em = 768px */
#media (min-width: 52em) {
.header li {
float: left;
}
.header li a {
padding: 20px 30px;
}
.header .menu-search .menu-box .menu {
clear: none;
text-align: left;
max-height: none;
}
.header .menu-icon {
display: none;
}
.menu {
float: left;
}
}
.search-box {
position: absolute;
right: 10px;
}
<header class="header">
Celebyte
<div class="menu-search">
<span class="menu-box">
<input class="menu-btn" type="checkbox" id="menu-btn" />
<label class="menu-icon" for="menu-btn"><span class="navicon"></span></label>
<ul class="menu">
<li>Celebyte Gifting</li>
<li>Track Order</li>
<li>All Categories</li>
<li>Login</li>
</ul>
</span>
<span class="search-box">
<h5>Search Box</h5>
</span>
</div>
</header>