XF 2.2 Moving the navigation and logo

[optrex]

The trend in design currently is to have the navigation tabs directly at the top of the page. I'd like to move the logo to alongside the tabs to avoid the dead space above them.


This dead space disappears when you scroll, but I'd like the logo to remain


How can I easily achieve this on a default skin please?

 

[optrex]

I struggled with this as the original idea I found from someone else broke the responsive look.
However a slight modification to the original code helped and I put this in extra.less

.p-header-inner {
    display: none;
}

.p-nav-smallLogo
{
    display: block;
    max-width: 150px;
    align-self: center;
    margin: 0 0 0 10px;
    img
    {
        display: block;
        max-height: 47px;
    }
}

 

[Hotfix]

Thank you!