search icon, mobile logo and menu icon in one line

Hi there,

Any chance you can remove the browser tools blocker as it makes it difficult for us as it just adds lots of time in testing the solution. Let me know :)

i have disabled this option on this link. please refresh a couple of times if you are not able to check.

link - https://www.vegrecipesofindia.com/white-sauce-pasta-recipe/

So swap this CSS:

.site-logo {
    width: 425px;
}

For this:

.site-logo:not(.mobile-header-logo) {
    width: 425px;
}

i added the code, but the menu icon stays below and the search icon is aligned with the mobile logo.

Where did you add the code, i can still see the original code ( first code above ) ?

i removed it. thats why you cannot see it.

Can you re-add the code David provided so we can see why it's not working?

i have added the code. please check the same link and refresh once or twice - https://www.vegrecipesofindia.com/white-sauce-pasta-recipe/

Awesome, now try adding this:

#mobile-header .mobile-header-logo {
    max-width: 50%;
}

hi tom

i added this code, but it squishes the mobile header logo image.

You can try setting the image height to auto to prevent any aspect ratio loss:

#mobile-header .mobile-header-logo {
    max-width: 50%;
}

#mobile-header .mobile-header-logo img {
    height: auto;
}

thanks a lot tom. worked great.

Awesome glad I could help :)