Social icons display

[proximomktg]

https://millersseptic.com

In the class x-social-global I added a menu in the top bar. how can i get the social icons to display after instead of infront?

Ideally would like in one line the get coupons to the left, then the menu and social icons last.

[paul.r]

Hi,

To achieve that, you can add this in Theme Options > CSS

.x-topbar {
    width: 100%;
}

.x-topbar div.x-topbar {
    float: left;
    width: auto;
}


.x-topbar div.x-topbar h4 {
    margin:0;
}

.x-topbar p:empty {
   display:none;
}

.x-topbar .x-social-global {
    display: inline-block;
}

Hope that helps.

[proximomktg]

All perfect, except

Is it possible for the social icon to display after the menu?

[jade]

Hi there,

You might need to update or change this code to achieve what you are trying to do but please try:

.x-topbar-inner {
    display: flex;
}

Then add a different class specific to the menu items you have on the topbar like topbar-menu so instead of just:

<div class="x-social-global">

you will have

<div class="x-social-global topbar-menu">

Then add this code in the custom CSS:

.topbar-menu {
    margin-left: auto;
}

You can find more info on how to check for CSS selectors here.
Then information about writing your custom CSS here.