I need assistance with stick navigation and a Hook, In the mobile version.

Hello to everyone. You provided me with excellent assistance in this topic:

I'm working on another website, however this time I'd want to employ the method suggested in this topic, with the search box on Stick navigation.

I take the following steps:

I turned on Stick Menu Navigation:

Using a hook element in 'generate inside navigation', I inserted a search field.

On the desktop, I activated Navigation as a header; I enabled Navigation as a header in the mobile version and inserted my logo, however the hook element's search field vanished; As a result, I just enabled Navigation as a desktop header.

I'd want my tablet and mobile versions of my website to appear like this:

I'm using the code provided by @Fernando:

.site-header form.wp-block-search .wp-block-search__inside-wrapper {
    border: solid 3px black;
}

@media (min-width: 1025px) {
    /* CSS in here for desktop only */
    .site-header form.wp-block-search {
        width: 360px;
    }
}

@media (max-width: 1024px) {
    .site-header form.wp-block-search {
        position:unset;
        left: unset;
        transform: unset;
    }
    .site-header .inside-header {
        flex-wrap:wrap;
        position: relative;
    }

    .site-header .site-branding {
        position:absolute;
        left: 50%;
        top: 20px;
        z-index:10000;
        transform:translate(-50%, 30%);
    }
    .site-header form.wp-block-search {
        width: 100%;
    }

}

And by @David:

.site-header .mobile-menu-control-wrapper {
    margin-left: unset;
}

But, it doesn't seem to work, because I activated Navigation as a header.

Could you help me get a header similar to this site?

I sent demo site in the sensitive area.

thank you very much for your attention