Combine search bar with menu drop down on mobile view?

[GoombaGrows]

Hello,

Am I able to remove the search from the top right of my mobile view and add it into the menu drop down instead?

Thanks in advance!

[GoombaGrows]

Link: https://qz26pn-cv.myshopify.com/

Password: bagono

[topnewyork]

Hi @GoombaGrows 
1. Go to Online Store -> Theme -> Edit code.
2. Open your theme.liquid file
3. In theme.liquid, paste the below code before </head>

<style>
@media (max-width: 768px){
.header__icon--menu .icon {
    display: none;
}
svg.icon.icon-search {
    order: -1 !important;
    margin-right: auto !important;
    position: absolute !important;
    left: -27rem !important;
    top: 50% !important;
    transform: translateY(-50%) !important;
}
}
</style>

Result:

If my reply is helpful, kindly click like and mark it as an accepted solution.
Thanks!

[GoombaGrows]

Hello,

Thanks for taking the time to help, however I don't want to just move the search bar rather id like to add it into the drop down menu and keep the drop down menu where it is. The result I'm looking for is something like this.

Thanks again!

[topnewyork]

@GoombaGrows 
Try this code 
Go to Shopify Admin > Online Store > Themes > Edit Code

Open header.liquid or navigation.liquid

Find the dropdown menu code

<ul class="dropdown-menu">

Add this search icon inside the dropdown

<li class="dropdown-item">
    <form action="/search" method="get">
        <input type="text" name="q" placeholder="Search..." class="search-input">
        <button type="submit" class="search-button">🔍</button>
    </form>
</li>

If my reply is helpful, kindly click like and mark it as an accepted solution.
Thanks!

[GoombaGrows]

Sadly I couldn't find anything like <ul class="dropdown-menu"> in the header.liquid folder. I tried to add the code in a couple different places but couldn't get it to work. 

[topnewyork]

Which theme do you have?

[GoombaGrows]

Dawn theme