- This topic has 18 replies, 5 voices, and was last updated 6 years ago by
Tomas.
-
AuthorPosts
-
October 25, 2014 at 7:27 pm #41750
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!
October 25, 2014 at 7:33 pm #41752Elwin Hoover
hooverlandclearing.com
October 25, 2014 at 11:43 pm #41784Tom
Lead DeveloperLead DeveloperHi 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 ๐
November 1, 2014 at 2:50 pm #43416Elwin 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.
November 1, 2014 at 3:23 pm #43428Elwin Hoover
I downloaded the simple custom css plugin.
November 1, 2014 at 3:33 pm #43430Elwin 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?
November 1, 2014 at 3:33 pm #43431Elwin Hoover
I mean I named it facebook-icon
November 1, 2014 at 4:35 pm #43432Elwin 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?
November 1, 2014 at 4:46 pm #43433Elwin Hoover
Just figured it out, Tom. Thanks!
November 1, 2014 at 5:00 pm #43435Ross 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
November 1, 2014 at 5:12 pm #43436Ross Robson
Me too lol
November 1, 2014 at 5:43 pm #43437Ross 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?
November 1, 2014 at 6:40 pm #43443Tom
Lead DeveloperLead DeveloperYou 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.
September 11, 2017 at 11:51 am #383372Tomas
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,
TomasSeptember 11, 2017 at 11:56 am #383376Tomas
Already solved the opening in new window problem.
Here is my site:
http://www.simpletravelblog.com -
AuthorPosts
- You must be logged in to reply to this topic.