Top bar : How to add social icons + items of top menu in topbar right?

[Rui Guerreiro – SUPPORT]

I placed the social icons inside the ul and it’s displaying fine on both browsers.

https://www.dropbox.com/s/gqiqjut53t88iqy/Screenshot%202015-11-05%2016.28.05.png?dl=0

-Rui

[mengeco]

Thanks Mohammad but this solution code directly in the widget is too fragile for my client.

And I do not want to use the images of icons directly in the widget because it is simpler to use the shortcode plugin of “Access press” to edit the links at once (footer, top bar …).

1) In widget, I add a simple list with shortcake (perfect for update)
2) I add your code in my css :

#top-bar ul li{
	font-size: 16px !important;
	display: block;
	float: right;
}

This is almost perfect but the icons are too bottom relative to the text
Is what can be improved ?

Thank you very much to help me again

PS : the link dropbox don’t work

[Rui Guerreiro – SUPPORT]

My name is Rui, Mohammad is my colleague 🙂

Add this custom css.

.aps-social-icon-wrapper {
    margin-top: -10px;
}

You should check your settings inside that press plugin.

Can’t support anymore this customization, hope you understand.

-Rui

[mengeco]

This reply has been marked as private.

[Rui Guerreiro – SUPPORT]

haha that one is great.
No problem. Glad I could help.

-Rui

[mengeco]

…And how to get the same result on mobile?
For now, the top bar appears on three lines and not on a single
Thanks !!!

[Rui Guerreiro – SUPPORT]

Will check what can be done.

-Rui

[Rui Guerreiro – SUPPORT]

Hi,

Try the code below.

@media only screen and (max-width: 767px) {
#black-studio-tinymce-3 li {
    display: inline-block!important;
   }
}

-Rui

[mengeco]

Ok, thanks !! and
Is it possible to separate a few more items “Accueil” and “Contact” ?

[David Martin – Support]

Hi,

Please use this:

#top-bar ul li:first-of-type {
    margin-right: 0;
}
#top-bar ul li {
    margin-right: 30px;
}

Thanks,
David

[mengeco]

This reply has been marked as private.

[David Martin – Support]

Hi,

Could you add an annotated screenshot of what you need, for both desktop and mobile – to avoid confusion?

Thanks,
David.

[mengeco]

This reply has been marked as private.

[David Martin – Support]

Perfect, now I understand.

Please add this:

@media only screen and (max-width: 767px) {
#black-studio-tinymce-3 li {
    display: inline-block!important;
    margin-right: 15px;
}
}

[mengeco]

ok, thank you Martin, it’s good

But I don’t understand why:

> my menu top-bar is in a widget like this:
1) Social [aps-social id=”1″]
2) Contact
3) Accueil

…and on my website, order of items is different :
3) Accueil 2) Contact 1) Social [aps-social id=”1″]

How use the same order of item in widget and on website ?

Thanks