[Resolved] Menu social icons

[Elwin Hoover]

Tom,

I want my four social icons to float right like yours on your website. I don’t know how to do this and I am no coder by any means. I’ve gone to font awesome and put in the code to my menu, but I’m not sure what to add to the CSS styling for that menu option to make it float right on the navigation bar. Any help you can offer would be greatly appreciated!

Thank you!

[Elwin Hoover]

hooverlandclearing.com

[Tom]

Hi Elwin,

There’s a couple of steps here:

1. In “Appearance > Menus”, expand the “Screen Options” panel at the top right of the page.
2. Select the checkbox for “CSS Classes”.
3. Now open you menu item, and give it a class we’ll use later – like “your-class-name”.

Now, you can add this CSS:

.your-class-name {
      float: right;
}

That should do it 🙂

[Elwin Hoover]

Hi Tom,

Thanks for the quick reply. I’m confused on the classes and what to put in it. I no nothing about code.

I copied <i class=”fa fa-facebook”></i> and put it in the menu. But I don’t know what exact class to put into the CSS Classes box?

Thank you.

[Elwin Hoover]

I downloaded the simple custom css plugin.

[Elwin Hoover]

I named my CSS class facebook.com and put this in the CSS under the “editor” tab:

.facebook-icon {
float: right;
}

But nothing is happening?

[Elwin Hoover]

I mean I named it facebook-icon

[Elwin Hoover]

Tom, I’ve decided that I want the social icons at the bottom of the page, centered right above my copyright. How can I do that without using all the footers?

[Elwin Hoover]

Just figured it out, Tom. Thanks!

[Ross Robson]

Iv tried that too tom and it doesn’t work, iv named mine facebook-menu and used the css

.facebook-menu {
float: right;
}

but nothing happens and it remains in the same place

[Ross Robson]

Me too lol

[Ross Robson]

Any idea how i can get the nav search icon to be last so its to the right side of all the current icons?

http://www.pontyclundarts.co.uk

[Tom]

You both figured it out? 🙂

At this time no, the code inserts the button as the last item in the menu bar, so it ends up being first item to display as the buttons are using float. You could position each button precisely using position:absolute, but you would need to look that up and then figure out the width of each item. Kind of a pain.

[Tomas]

Hey Tom,

New to generatepress here.
I have a question related to the subject.
I need my social icons to be on the main navigation bar but not right after the pages, I want it to be against the right edge of the screen, with a little padding of course.
And I want the links to open in a new window.
Is this possible?

Thanks,
Tomas

[Tomas]

Already solved the opening in new window problem.

Here is my site:
http://www.simpletravelblog.com

[Author]

Posts