Adding nav item to the outside of mobile menu

Site: https://becomingyouwithjulie.com

My search icon image url: https://static1.squarespace.com/static/613ce2c584a12d65875f02ff/t/663d2a386d8c9d3f4e56f193/1715284536428/search-icon-2048x2048-cmujl7en.png

I am trying to get rid of the “search” navigation item I have on my mobile site and replace it with a search icon. The problem I am facing is I don’t know how to move navigation items actually OUT of the mobile menu and into the header with the hamburger icon and logo.

What I’m going after:

My website:

I already have code to get rid of the search in the mobile menu. All I need is the code on how to either create or transform the search navigation item into an image (like I have on desktop) and code to move it out of the mobile menu and into the header. But either way here’s the code I’m using:
// HIDE HEADER NAV LINKS ON MOBILE //
.header-menu-nav-list [data-folder="root"]>div:first-child>div>div:nth-child(6) {
  display: none !important;
}
  .header-menu-nav-list [data-folder="root"]>div:first-child>div>div:nth-child(6) {
  display: none !important;
}
 

I appreciate any help!

Thanks!

Add this code to Website > Website Tools > Code Injection > FOOTER

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.7.0/jquery.min.js"></script>
<script>
  $(document).ready(function(){
    $('<a href="/search"><img src="https://static1.squarespace.com/static/613ce2c584a12d65875f02ff/t/663d2a386d8c9d3f4e56f193/1715284536428/search-icon-2048x2048-cmujl7en.png"/></a>').insertAfter('.header-display-mobile .header-mobile-logo');
});
</script>
<style>
  .header-mobile-logo+ a img {
    width: 30px;
}

.header-title.header-title--use-mobile-logo {
    display: flex;
    align-items: center;
}

.header-mobile-logo+a {
    position: relative;
    right: 6vw;
}
</style>

Thanks for the code @tuanphan!

This worked really well for mobile, but it also applied to the desktop version. And weirdly, it also uncentered my logo on desktop.

Thoughts on how to fix this?

Thanks,
Julie

I updated the code, it missing an ID, you can check again

Thanks again for the code @tuanphan.

It works perfectly for mobile. But on desktop, it is still uncentering my logo.

Thoughts on how to fix this?

Thanks,
Julie