[Resolved] Social Media Bar/Menu/Mobile

[Robb]

Hello

my site is https://robbwallace.co.uk

I have my social channels floating right on my desktop menu.
In mobile, they used to form a horizontal line on the menu under podcast. Recently after an update (I do not know which or what) it now displays each channel vertically.

Is there a way for me to display my social channels horizontally in one row of the mobile menu? Or above/below the mobile menu. Any solution that saves some space so customers can still see aspects of the screen.

Thanks
Robb

[David]

Hi there,

you would need some CSS to allow the social menu icons to display horizontally – try this:

@media (max-width: 768px) {
    #mobile-header.toggled .main-nav > ul {
        display: flex !important;
        flex-wrap: wrap;
    }
    #mobile-header.toggled .main-nav > ul >  li:nth-child(-n+6) {
        flex: 1 0 100%;
    }
}

This part of the CSS: li:nth-child(-n+6) defines the 100% width should only apply to the fist 6 main menu items. Any items after that will form a row.

[Robb]

Hello David

Legend, that worked a treat. All resolved.
Much appreciated sir.

Robb

[David]

Glad to be of help!

[Author]

Posts