Archived topic
Social Media Bar/Menu/Mobile
3 replies · Started by Robb on January 10, 2021
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
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.
Hello David
Legend, that worked a treat. All resolved.
Much appreciated sir.
Robb
Glad to be of help!
