[ColleenParticipant]

Hi there,

I’ve added social links to my left fixed nav bar but they are stacking on top of each other and because of the big bubbles round them when you hover over them, it’s pushing my cart display total down off the page permanently (on MacBook Air screen anyways). I’d really like to remove the bubble round those icons and have the three social buttons display horizontally next to each other rather than stacked to allow cart to appear back on the nav bar.

URL: http://www.barking-rad.co.uk

Thanks,
Colleen

[Prasant RaiModerator]

Hello Colleen,

Thanks for writing in!

You can add this under Custom > CSS in the Customizer:

.x-navbar .x-nav > li.x-navbar-social > a > span {
    padding: 4px !important;
    float: left;
}

li.menu-item.current-menu-parent.x-menu-item.x-menu-item-woocommerce {
    clear: both;
}

Thanks.

[ColleenParticipant]

Thanks for that, almost worked! It has float left which makes the social buttons sit in a horizontal line as desired but not centred like the rest of the menu items, changing it to float right does the same but uncentered to the right. If I change it to float: center; it stacks them again rather than horizontal line – any recommendations for having them centred?

Thanks

[ChristianModerator]

Further customizations from here would be getting into custom development, which is outside the scope of support we can offer. If you need more in depth changes, you may wish to consult with a developer. X is quite extensible with child themes, so there are plenty of possibilities. Thanks for understanding.

[Author]

Posts