Want to customize nev. menu

Try this instead:

.menu-bar-items {
    flex: 1 0 auto;
    justify-content: flex-end;
}
.wp-block-search__inside-wrapper {
    padding: 3px 15px 5px 5px;
    margin: 4px;
    background-color: #4d4f52;
    border-radius: 40px;

}
.wp-block-search__inside-wrapper input[type="search"],
.wp-block-search__inside-wrapper input[type="search"]:focus {
    line-height: 1;
    padding: 0 5px;
    background-color: transparent;
    border: 0;
    color: #fff;
    width: 100%;
}
.wp-block-search__inside-wrapper button {
    border: 0;
    background: unset;
    color: #fff;
    font-size: 20px;
    padding: 0 5px;
    order: -1;
    margin-left: 0;
    margin-right: 10px;
    opacity: 0.6;
}
.wp-block-search__inside-wrapper button:hover {
    color: #fff;
    opacity: 1;
}
@media(max-width: 768px) {
    nav .navigation-branding img {
        height: 45px;
    }
    .wp-block-search__inside-wrapper {
        max-width: calc( 100vw - 200px );
    }
}

All done. just need to fix last one thing: 1st character is getting hidden: https://prnt.sc/KDyUZZywdocn

I edited the code here:

https://generatepress.com/forums/topic/want-to-customize-nev-menu/page/2/#post-2393082

All set, Thank you so much.

You're welcome