[NSFW] Making Image in Menu Bar for Twenty Eleven Responsive

How did you get the image in your site first?

Do not edit the theme itself. First create a child theme for your changes.

Yep i realize that, planning to move everything to child theme , This is just for testing purposes so that i can make sure it works.

Andrew , im trying to find the tutorial. Will link it asap. Here you Go
https://digitalraindrops.net/2011/08/twenty-eleven-social-icons-in-navigation/

Look at the background-size property https://www.w3schools.com/cssref/css3_pr_background-size.asp

Tried to use z index to place the logo in front of the menu bar, It works fine but when i resize or see in a mobile device it messes up header and social icons in menu bar. Any ideas?