Navigation elements mobile view

Hi GP support,
Thanks for the help earlier

I have a question this time, about the display of elements in mobile view, breakpoint view is 1307px in my case.
The desktop view is ok.

I was set on this task on mobile view:

-displaying elements in this order: search icon on the left border, then hamburger menu on the far right (done)

picture: https://i.postimg.cc/mgJbPywk/pic1.png

It's thanks to the following code I dug up in the forum from a solution Ying provided for a user :

}
@media (max-width: 1307px) {
    .menu-bar-items {
        order: -1;
        margin-right: auto;
    }

now two issues have arisen :

- first, when the sticky navigation is activated, my logo is making its entrance, but the problem is that it's not aligned in the middle same as the search icon; not aligned on the left border, only the hamburger menu is perfectly at the far right:

picture: https://i.postimg.cc/902WbXR7/pic3.png

- second, when you click on the search icon, and the search bar appears, the text being entered is passing behind the X button, same thing is happening for the sticky navigation with the addition that the X button has moved forward

picture normal:https://i.postimg.cc/RFjsfqYc/pic4.png
sticky:https://i.postimg.cc/Kj2jRDmB/pic4-sticky.png

in conclusion, I would like to align everything perfectly in the navigation when the logo appears & resolving this search bar issue with the text and X button.

Thanks for your support GP