Exclude word from string.Split - css

Question

I'm new in css and I have pure hamburguer 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 bellow header
Desire 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;
}
.badge {
background-color: #fff;
border-radius: 30px;
box-shadow: 0 15px 35px 0 rgba(42,51,83,.12), 0 5px 15px rgba(0,0,0,.06);
position: absolute;
margin-top: 0.5em;
}
.text {
padding: 0.5rem 0.25rem 0.5rem 1rem;
}
.link {
border-radius: inherit;
display: inline-block;
background-color: #7B8F34;
padding: 0.5rem 1rem;
color: #F9F9EC;
}
.slider-wrapper {
display: flex;
justify-content: center;
align-items: flex-end;
}
/* menu */
.main .menu {
clear: both;
/* max-height: 0; */
display: none;
transition: max-height .2s ease-out;
}
/* 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>
Regards