How to move social buttons to right top menu?

This topic has 16 replies, 4 voices, and was last updated 8 years by Abe.

Author

Tagged: centralise logo in header, top menu, header, social info, social networks
October 7, 2014 at 04:53 #30902

heelsadmin
Participant

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.
October 7, 2014 at 13:06 #30923

Catalin
Moderator
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
October 8, 2014 at 05:11 #31029

heelsadmin
Participant

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.

October 8, 2014 at 11:07 #31044

Catalin
Moderator

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

October 8, 2014 at 11:26 #31045

heelsadmin
Participant

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,

October 8, 2014 at 11:39 #31048

Catalin
Moderator

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

October 8, 2014 at 11:52 #31054

heelsadmin
Participant

This reply has been set as private.
October 8, 2014 at 12:04 #31056

Catalin
Moderator
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
October 8, 2014 at 13:05 #31065

heelsadmin
Participant

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,

October 17, 2014 at 01:37 #31983

Catalin
Moderator

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

January 13, 2015 at 10:47 #41852

heelsadmin
Participant

This reply has been set as private.

January 15, 2015 at 22:06 #42256

Abe
Keymaster

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.

November 1, 2015 at 19:13 #85349

troy14
Participant

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?
November 7, 2015 at 01:32 #86077

Abe
Keymaster
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.
November 7, 2015 at 17:37 #86182

troy14
Participant

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?

November 7, 2015 at 17:42 #86183

troy14
Participant

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?

November 21, 2015 at 15:56 #88450

Abe
Keymaster

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