Logo Moved half over menu, half under

Not sure what do you mean with half over the menu and half under.

Do you mean something like this?
https://postimg.org/image/g4nze4af5/

To do that, I change the CSS:
#main-nav .container .navbar-header.responsive-logo {
margin-left: 100px;
margin-top: 25px;
}

https://cyberchimps.com/store/fine-pro/

Sort of like this demo.

This is a good article that explains how to do it:
https://front-back.com/how-to-make-absolute-positioned-elements-overlap-their-overflow-hidden-parent

What I do is:
div.col-md-4.col-sm-8.col-xs-12 {
position: relative;
}

div.col-md-4.col-sm-8.col-xs-12 img.site-logo {
position: absolute;
top: /*set the position here*/;
}

On the website you provided, the author sets the top: -15px;
But you can try top: 150px; and see your logo is moved further down.

The rest is just how you play with your image size, padding and margin.

Thanks for your time and effort!

Hey @arto88,

Thank you for jumping in to help! ??