How to move social buttons to right top menu?

[heelsadmin]

Hi there,

I’d like to move the social network info buttons to the right side of the header top menu (next to contact us). Currently they are on the left of the header and I feel it detracts from the logo. How can I do this please?

Many thanks.

Attachments:

You must be logged in to view attached files.

[Catalin]

Hello,

Please add this to your style.css file from your child theme:

COPY CODE

#top-social 
{
float:right !important;
}

let me know if this helps.

Thank you,
Catalin

Hi there!!! Help others from the community and mark any reply as solution if it solved your question. Mark as a solution

[heelsadmin]

Thanks for your help Caitlin. I did as you suggested and the social icons have moved towards the right side of the top menu but all other items in the top menu have now disappeared.

Please see the screen shots attached for the css file where I pasted the code and the result. Any further advice please? Did I make a mistake with adding the copy maybe? Sorry, a newbie 🙂

(I added the code to style.css in the kleo-child theme.)

Attachments:

You must be logged in to view attached files.

[Catalin]

please send me admin credentials to your website to take a look… reply as private for security reasons. 10x

Hi there!!! Help others from the community and mark any reply as solution if it solved your question. Mark as a solution

[heelsadmin]

Hi Catalin, thanks for your offer.

I’ve just managed to return the menu back (it had turned off in the menu manager). Since trying to move the social network icons, we’d like to try centralising the main logo in the header instead (and leave the social icons on the left). I saw in a previous forum post that someone had been provided code to enable this – it was with other code as well so I wondered if you could please send me the code to centralise the logo?

And did I place the code in the css before (can you tell from the image attached previously?).

Many thanks,

[Catalin]

I still need a link to your website to be able to provide you the code you are requesting… 🙂 you can reply as private if you don’t want the link to be public.

Hi there!!! Help others from the community and mark any reply as solution if it solved your question. Mark as a solution

[heelsadmin]

This reply has been set as private.

[Catalin]

add this to your style.css file from your child theme:

COPY CODE

.navbar-header
{
  margin-left:40% !important
}

you want to center also the logo when sticky menu… you don’t have the menu added.

Thank you,
Catalin

Hi there!!! Help others from the community and mark any reply as solution if it solved your question. Mark as a solution

[heelsadmin]

Done, thanks a million! The sticky menu is showing more deep than the non-sticky menu was..is that normal?

Is there a similar code we could use for centralising the main menu? It’s off set to the left now and looks odd underneath the centralised logo.

Also, I’ve tried to move the search icon and function to the top right menu, which we’d also like to add ‘Log in’ and ‘Join us’ links. Do you have any advice on how they can be moved/created please?

Many thanks,

[Catalin]

To center it is a bit tricky. We plan to add this to KLEO in a next update.
Those weren’t thought to be moved there.. sorry

Hi there!!! Help others from the community and mark any reply as solution if it solved your question. Mark as a solution

[heelsadmin]

This reply has been set as private.

[Abe]

Hi, that is strange. Put a link to your site to check and before that try to remove any extra codes you might have added

Hi there!!! Help others from the community and mark any reply as solution if it solved your question. Mark as a solution

---
@ SeventhQueen we do our best to have super happy customers. Thanks for being our customer.

[troy14]

I think part of the issue with this proposed fix was that the menu expands to the right, so, that said, what was ultimately the solution to move the social links to the right side?

[Abe]

I think the full code should be like this:

#top-social li {float: right !important;}
#top-social { float:right !important; }
 Hi there!!! Help others from the community and mark any reply as solution if it solved your question. Mark as a solution

---
@ SeventhQueen we do our best to have super happy customers. Thanks for being our customer.

[troy14]

I’ll give that a try now; is there a simple way to float the icons on the right and have the descriptors show before the icons, so that it expands to the left?

[troy14]

Interesting… That works nicely, but check this out; they show up in this order: Instagram, Foursquare, Pinterest, Facebook, Twitter, but there is no pipe in the layout between Instagram and Foursquare.

Thoughts?

[Abe]

Sorry for the late reply. Do you have a link to check?

Hi there!!! Help others from the community and mark any reply as solution if it solved your question. Mark as a solution

---
@ SeventhQueen we do our best to have super happy customers. Thanks for being our customer.

[Author]

Posts