Removing (hamburger-style) menu on mobile, replacing with static search bar

Hello Team,

Most of my navigation is within the first fold of my webpage, so my client had me remove the top page nav, and just have the magnifying glass option. I’d really like to remove the ‘hamburger-style’ navigation button on mobile, and replace it with just the search feature.

In the future, it would be nice if both were static boxes where one could type in at any time vs. the magnifying glass and search box just appearing after one clicks it. I can open up a new support-request for this option if need be, thought I’d mention it since we’re on the topic though!

Here is my current quick CSS overall:

.team-member-name, .team-member-job-title { text-align: center; }

.avia-team-member .team-member-name {
font-size: 14px !important;
}

body .column-top-margin {
margin-top: 5px;
margin-bottom: 5px;
}

.avia-slideshow-inner {
height 300px !important;
}

.avia-slideshow { margin-bottom: 0px; }

#menu-item-search > a:nth-child(1) > span:nth-child(1) {
display: block;
float: left;
}

.span.avia_hidden_link_text:nth-child(3) {
display:none;
}

#menu-item-search [data-av_icon]:before {
float: left;
margin-right: 10px;
}

.toggler { text-align: center !important; }

.iconbox a, .iconbox .custom-class:hover {
background-color:;
}

.avia_textblock { padding: 10px; }

#top .avia-button-fullwidth {
padding: 15px 15px 12px;
}
#top .avia-button-fullwidth {
font-size: 13px;

}

a.av-icon-char:hover span {
color: #;
}

.av_font_icon.av-icon-style-border .av-icon-char { padding: 12px; }
#top .avia-icon-tooltip { font-size: 10px!important; }

.iconbox .iconbox_content .iconbox_content_title {
font-size: 10px;
}
.icon_caption {font-size: 10px;}

.avia_transform .avia-icon-list .iconlist_icon {
opacity: 1 !important;}

#footer .widget {
text-align: center;
}