Search bar in menu aligned right to logo

Can someone please help me?! I’m using storefront theme.

I want to make my menu sticky and next to the logo. I’m almost there, thanks to the answers in previous topics. For example:

‘You will need to create a child theme first, this is a must for making these sort of changes.

This page offers a pre-made child theme style.css and other tips for modifying this theme: https://www.pootlepress.com/2015/02/21-tips-tricks-and-css-tweaks-for-woothemes-storefront/

I made my menu this size by doing the following:

1. Installing JetPack and activagint the Custom Store Logo feature, then I uploaded a .png with transparent background in the Appearance > Customizer > Site Title, Tagline, Logo

2. Added this to my child theme’s style.css:

@media screen and (min-width: 768px) {
/* LOGO */
.site-header .site-branding, .site-header .site-logo-anchor, .site-header .site-logo-link { width: 20% !important; /* Use px values if you want, eg. 350px */ }

/* SECONDARY NAVIGATION */
.site-header .secondary-navigation { width: 40% !important; /* Use px values if you want, eg. 350px */ }

/* SEARCH BAR */
.site-header .site-search { width: 15% !important; /* Use px values if you want, eg. 350px */ }
}

3. Then I installed the free extension found here and activated it:
https://www.pootlepress.com/product-category/woothemes-storefont/

Then it was just a matter of tweaking the search bar and logo width in the code i shared above until things started to “line up”.’

But when I activate the option: align menu right of logo, the search option disappears!

Does anyone know how to get it back? Thanks in advance!