Black Friday Sale! Get $20 off GP Premium, $40 off our new Lifetime license, and 45% off license renewals/extensions! Learn more

[Resolved] Menu social icons

Home Forums Support Menu social icons

Viewing 15 posts - 1 through 15 (of 19 total)
  • Author
    Posts
  • #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!

    #41752
    Elwin Hoover

    hooverlandclearing.com

    #41784
    Tom
    Lead Developer
    Lead Developer

    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 🙂

    #43416
    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.

    #43428
    Elwin Hoover

    I downloaded the simple custom css plugin.

    #43430
    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?

    #43431
    Elwin Hoover

    I mean I named it facebook-icon

    #43432
    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?

    #43433
    Elwin Hoover

    Just figured it out, Tom. Thanks!

    #43435
    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

    #43436
    Ross Robson

    Me too lol

    #43437
    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

    #43443
    Tom
    Lead Developer
    Lead Developer

    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.

    #383372
    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

    #383376
    Tomas

    Already solved the opening in new window problem.

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

Viewing 15 posts - 1 through 15 (of 19 total)
  • You must be logged in to reply to this topic.