Float hamburger menu css - html

Question

I'm new in css and I have pure hamburger css menu
Problem is the menu is part of page as absolute item, I want it to float and show always when page scroll, the position is just below the header:
Desired result:
And when menu is open take space of page and show an icon at the bottom of menu:
Snippet:
*{
box-sizing: border-box;
}
body{
font-family: 'Montserrat', sans-serif;
margin:0px;
}
.section-title{
color: #2ddf5c;
}
.main-header{
display: flex;
align-items: center;
justify-content: space-evenly;
width:100%;
/* background: #2ddf5c; */
padding: 16px;
}
.main-header > div{
vertical-align: middle;
}
.main-header__brand{
color: #7B8F34;
text-decoration: none;
font-weight: bold;
font-size: 20px;
}
.main-nav__searchbar_container {
display: flex;
width: 100%;
padding: 8px 8px 8px 40px;
overflow: hidden;
vertical-align: middle;
white-space: nowrap;
}
.main-nav__searchbar_container input.main-nav__searchbar{
width:100%;
height: 50px;
/* background: #2b303b; */
border: none;
font-size: 10pt;
float: left;
/* color: #fff; */
padding-left: 15px;
-webkit-border-radius: 5px;
-moz-border-radius: 5px;
border-radius: 5px;
}
.main-nav__searchbar_container input.main-nav__searchbar::-webkit-input-placeholder{
color: #65737e;
}
.main-nav__searchbar_container input.main-nav__searchbar:-moz-placeholder{ /*Frefox 18 */
color: #65737e;
}
.main-nav__searchbar_container input.main-nav__searchbar::-moz-placeholder{/*Frefox 19 */
color: #65737e;
}
.main-nav__searchbar_container input.main-nav__searchbar:-ms-input-placeholder{
color: #65737e;
}
.main-nav__searchbar_container button.icon{
-webkit-border-top-right-radius: 5px;
-webkit-border-bottom-right-radius: 5px;
border-top-right-radius: 5px;
border-bottom-right-radius: 5px;
border: none;
background: #4f5b66;
height: 50px;
width: 50px;
color: #ffffff;
opacity: 0;
font-size: 10pt;
-webkit-transition: all .55s ease;
-moz-transition: all .55s ease;
-ms-transition: all .55s ease;
-o-transition: all .55s ease;
transition: all .55s ease;
}
.main-nav__searchbar_container:hover button.icon,
.main-nav__searchbar_container:active button.icon,
.main-nav__searchbar_container:focus button.icon{
outline: none;
opacity: 1;
margin-left: -50px;
}
.main-nav__searchbar_container:hover button.icon:hover{
background: red;
cursor: pointer;
}
input.main-nav__searchbar:hover{
border: 2px solid #4f5b66;
}
.main-nav__searchbar{
display: flex;
width: 100%;
/* margin: 8px; */
/* padding: 8px; */
border: 2px solid;
border-radius: 4px;
outline: none;
transition: .3s;
}
.main-nav{
display: flex;
width: 100%;
text-align: right;
margin: 0 10px;
}
.main-nav__items{
display: flex;
margin:8px;
padding:8px;
list-style: none;
}
.main-nav__item{
display: inline-block;
}
.main-nav__social{
display:block;
width: 35px;
height: 35px;
margin-left: 10px;
padding: 4px;
}
#main-slider {
width: 100%;
height: 528px;
/* border-radius: 0% 0% 50% 50% / 0% 0% 20% 20%; */
border-bottom-right-radius: 50% 25%;
border-bottom-left-radius: 50% 25%;
position: relative;
}
/* menu icon */
.main .menu-icon {
cursor: pointer;
float: right;
padding: 28px 20px;
position: relative;
user-select: none;
}
.main .menu-icon .nav-icon {
background: #333;
display: block;
height: 2px;
position: relative;
transition: background .2s ease-out;
width: 18px;
}
.main .menu-icon .nav-icon:before,
.main .menu-icon .nav-icon:after {
background: #333;
content: '';
display: block;
height: 100%;
position: absolute;
transition: all .2s ease-out;
width: 100%;
}
.main .menu-icon .nav-icon:before {
top: 5px;
}
.main .menu-icon .nav-icon:after {
top: -5px;
}
/* menu btn */
.main .menu-btn {
display: none;
}
.main .menu-btn:checked ~ .menu {
/* max-height: 240px; */
display: block;
}
.main .menu-btn:checked ~ .menu-icon .nav-icon {
background: transparent;
}
.main .menu-btn:checked ~ .menu-icon .nav-icon:before {
transform: rotate(-45deg);
top:0;
}
.main .menu-btn:checked ~ .menu-icon .nav-icon:after {
transform: rotate(45deg);
top:0;
}
#media (min-width: 48em) {
.main li a {
padding: 20px 30px;
}
.main .menu {
clear: none;
float: right;
max-height: none;
}
}
<header class="main-header">
<div>
<a href="index.html" class="main-header__brand">
uHost
</a></div><nav class="main-nav">
<div class=main-nav__searchbar_container><input type="text" placeholder="Search" class="main-nav__searchbar">
<button class="icon"><i class="fas fa-search" aria-hidden="true"></i></button>
</div>
<ul class="main-nav__items">
<li class="main-nav__item">
<img class="main-nav__social" src="navbar-icons/social-media__icons/facebook.svg" alt="facebook">
</li>
<li class="main-nav__item">
<img class="main-nav__social" src="navbar-icons/social-media__icons/instagram-bosquejado.svg" alt="instagram">
</li>
</ul>
</nav>
</header>
<div class="main">
<input class="menu-btn" type="checkbox" id="menu-btn" />
<label class="menu-icon" for="menu-btn"><span class="nav-icon"></span></label>
<ul class="menu">
<li>Test1</li>
<li>Test2</li>
<li>Test3</li>
</ul>
</div>
<main>
<section>
<div class="slider-wrapper">
<img id="main-slider" src="https://via.placeholder.com/1365x528?text=Slider">
</div>
</section>
I try to change position:fixed instead position: absolute on
.main .menu-icon .nav-icon:before,
.main .menu-icon .nav-icon:after
class, but it no works, hamb menu bars disappear and some strange effect happen when it opens
Regards

Answer 1

Add this style on your style it is solution:
*{
box-sizing: border-box;
}
body{
font-family: 'Montserrat', sans-serif;
margin:0px;
}
.section-title{
color: #2ddf5c;
}
.main-header{
display: flex;
align-items: center;
justify-content: space-evenly;
width:100%;
/* background: #2ddf5c; */
padding: 16px;
}
.main-header > div{
vertical-align: middle;
}
.main-header__brand{
color: #7B8F34;
text-decoration: none;
font-weight: bold;
font-size: 20px;
}
.main-nav__searchbar_container {
display: flex;
width: 100%;
padding: 8px 8px 8px 40px;
overflow: hidden;
vertical-align: middle;
white-space: nowrap;
}
.main-nav__searchbar_container input.main-nav__searchbar{
width:100%;
height: 50px;
/* background: #2b303b; */
border: none;
font-size: 10pt;
float: left;
/* color: #fff; */
padding-left: 15px;
-webkit-border-radius: 5px;
-moz-border-radius: 5px;
border-radius: 5px;
}
.main-nav__searchbar_container input.main-nav__searchbar::-webkit-input-placeholder{
color: #65737e;
}
.main-nav__searchbar_container input.main-nav__searchbar:-moz-placeholder{ /*Frefox 18 */
color: #65737e;
}
.main-nav__searchbar_container input.main-nav__searchbar::-moz-placeholder{/*Frefox 19 */
color: #65737e;
}
.main-nav__searchbar_container input.main-nav__searchbar:-ms-input-placeholder{
color: #65737e;
}
.main-nav__searchbar_container button.icon{
-webkit-border-top-right-radius: 5px;
-webkit-border-bottom-right-radius: 5px;
border-top-right-radius: 5px;
border-bottom-right-radius: 5px;
border: none;
background: #4f5b66;
height: 50px;
width: 50px;
color: #ffffff;
opacity: 0;
font-size: 10pt;
-webkit-transition: all .55s ease;
-moz-transition: all .55s ease;
-ms-transition: all .55s ease;
-o-transition: all .55s ease;
transition: all .55s ease;
}
.main-nav__searchbar_container:hover button.icon,
.main-nav__searchbar_container:active button.icon,
.main-nav__searchbar_container:focus button.icon{
outline: none;
opacity: 1;
margin-left: -50px;
}
.main-nav__searchbar_container:hover button.icon:hover{
background: red;
cursor: pointer;
}
input.main-nav__searchbar:hover{
border: 2px solid #4f5b66;
}
.main-nav__searchbar{
display: flex;
width: 100%;
/* margin: 8px; */
/* padding: 8px; */
border: 2px solid;
border-radius: 4px;
outline: none;
transition: .3s;
}
.main-nav{
display: flex;
width: 100%;
text-align: right;
margin: 0 10px;
}
.main-nav__items{
display: flex;
margin:8px;
padding:8px;
list-style: none;
}
.main-nav__item{
display: inline-block;
}
.main-nav__social{
display:block;
width: 35px;
height: 35px;
margin-left: 10px;
padding: 4px;
}
#main-slider {
width: 100%;
height: 528px;
/* border-radius: 0% 0% 50% 50% / 0% 0% 20% 20%; */
border-bottom-right-radius: 50% 25%;
border-bottom-left-radius: 50% 25%;
position: relative;
}
/* menu icon */
.main .menu-icon {
cursor: pointer;
float: right;
padding: 28px 20px;
position: relative;
user-select: none;
}
.main .menu-icon .nav-icon {
background: #333;
display: block;
height: 2px;
position: relative;
transition: background .2s ease-out;
width: 18px;
}
.main .menu-icon .nav-icon:before,
.main .menu-icon .nav-icon:after {
background: #333;
content: '';
display: block;
height: 100%;
position: absolute;
transition: all .2s ease-out;
width: 100%;
}
.main .menu-icon .nav-icon:before {
top: 5px;
}
.main .menu-icon .nav-icon:after {
top: -5px;
}
/* menu btn */
.main .menu-btn {
display: none;
}
.main .menu-btn:checked ~ .menu {
/* max-height: 240px; */
display: block;
}
.main .menu-btn:checked ~ .menu-icon .nav-icon {
background: transparent;
}
.main .menu-btn:checked ~ .menu-icon .nav-icon:before {
transform: rotate(-45deg);
top:0;
}
.main .menu-btn:checked ~ .menu-icon .nav-icon:after {
transform: rotate(45deg);
top:0;
}
#media (min-width: 48em) {
.main li a {
padding: 20px 30px;
}
.main .menu {
clear: none;
float: right;
max-height: none;
}
}
/* start update */
main {display: flex;position: relative;}
main .main {
background: #fff;
order: 2;
padding-top: 15px;
}
main .main .menu {
transition: all .3s ease-in-out;
width: 0;
overflow: hidden;
margin: 0;
padding: 0;
text-align: center;
}
main .main .menu-icon {
position: absolute;
right: 0;
top: 0;
z-index: 9;
}
main .main .menu-btn:checked ~ .menu {
width: 200px;
font-size: 14px;
opacity: 1;
padding-left: 25px;
}
/* end update */
<header class="main-header">
<div>
<a href="index.html" class="main-header__brand">
uHost
</a></div>
<nav class="main-nav">
<div class=main-nav__searchbar_container><input type="text" placeholder="Search" class="main-nav__searchbar">
<button class="icon"><i class="fas fa-search" aria-hidden="true"></i></button>
</div>
<ul class="main-nav__items">
<li class="main-nav__item">
<img class="main-nav__social" src="navbar-icons/social-media__icons/facebook.svg" alt="facebook">
</li>
<li class="main-nav__item">
<img class="main-nav__social" src="navbar-icons/social-media__icons/instagram-bosquejado.svg" alt="instagram">
</li>
</ul>
</nav>
</header>
<main>
<div class="main">
<input class="menu-btn" type="checkbox" id="menu-btn" />
<label class="menu-icon" for="menu-btn">
<span class="nav-icon"></span>
</label>
<ul class="menu">
<li>Test1</li>
<li>Test2</li>
<li>Test3</li>
</ul>
</div>
<section>
<div class="slider-wrapper">
<img id="main-slider" src="https://via.placeholder.com/1365x528?text=Slider">
</div>
</section>
</main>

Answer 2

In-order to do this, you will need to make an outer container.
For example:
<nav id="outer-nav"></nav>
<div id="container">
<div class="slider"></div>
<div id="hamburger-menu">
<div id="hamburger-menu-container">
<div id="hamburger-menu-items">
<ul>
<li>etc</li>
</ul>
</div>
</div>
</div>
</div>
Now that we have the outer container, we can create the CSS to look something like this:
#container {
position:relative;
min-height: 800px;
}
#hamburger-menu {
position:absolute;
left: 0;
right: 0;
top: 0;
bottom: 0;
}
#hamburger-menu-container {
position: relative;
}
The hamburger menu will now stretch the whole distance allowed by the header. And as you add more contents inside the hamburger menu, you can use absolute positioning to place them in different areas of the menu.
For example:
#hamburger-menu-items {
position: absolute;
top: 100px;
}
#hamburger-something-else {
position: absolute;
bottom: 100px;
}
I haven't tested this completely, but should work. Let me know if otherwise :)