XF 2.2 Moving the navigation and logo

optrex

Well-known member
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.
1597009039602.png

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

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

optrex

Well-known member
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

CSS:
.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;
    }
}

1597112834864.png
 
Top