Need help? Check out our Support site, then


Hemingway Rewritten CSS Add social network icons to menu bar

  1. This is something I was able to do in my old Twenty Eleven theme, but I think the menu ID numbers may be different for Hemingway Rewritten as the CSS code doesn't seem to work since I switched.

    I would like to add logo/links to my menu bar for facebook, twitter and pinterest. Here are the codes I previously used:

    #menu-item-5191 a {
    background-image: url('my facebook image URL');
    background-repeat: no-repeat;
    background-size: 25px;
    background-position: 15px 50%;
    padding-left: 50px;
    }

    #menu-item-5194 a {
    background-image: url('my twitter image URL');
    background-size: 30px;
    background-repeat: no-repeat;
    background-position: 15px 50%;
    padding-left: 50px;
    }

    Thanks for any help!

    The blog I need help with is isabelashdown.com.

  2. thesacredpath
    Staff

    Hi there, CSS is generally theme specific, so the CSS selector is most likely going to be different, but the menu item number should be the same. I don't see the menu items for facebook and twitter in your menu right now, but you can add them in and then view the source code to verify the menu item numbers. For Hemingway Rewritten, the menu item selectors will look something like these

    .page-item-5191 a
    .page-item-5194 a
  3. Hi thesacredpath - I'm not too hot at all this yet ... forgive my ignorance! So I understand the previous code (carried over from twenty eleven) won't work as the CSS needs to be different for this theme. Do I need to paste the selectors you showed into my CSS first, then do something else? Thanks for your help :)

  4. thesacredpath
    Staff

    @isabelashdown, if you go ahead and add your Facebook and Twitter menu items into your custom menu and then post back here, I can help you sort out exactly what you will need. I'll also explain exactly how I went about getting that information.

    And you are not ignorant, we are all beginners at one point. :)

  5. Ah, thank you. Right, I've now reinstated my original custom menu which places the two icons onto the menu bar (hooray). I would also like to add a Pinterest icon - but can't work out how to add an extra custom item to the custom menu!

    I think I could do with increasing the font of the menu items a little generally - if I have the space.

    Thanks thesacredpath :)

  6. And don't ask me how ... but my facebook menu item seems to have now vanished! I must have done something daft ...

  7. thesacredpath
    Staff

    To add a menu item for Pinterest, create a Custom Link (Link) in your custom menu. You can do the same to add in the missing menu item for facebook.

    I'm also not sure what I was looking at. Forget the selectors I had given above. Hemingway Rewritten uses the same selectors you originally used.

    The facebook menu item may end up with a different CSS ID. You can find that by viewing the source code and then looking for the menu items and find the one with the facebook and Pinterest links and then use the code you have for the facebook (with the new menu item ID number) and then copy and modify the rule for use with Pinterest.

  8. Great! I'd like to increase the font size of the menu bar items as they look a bit tiny - I tried to work it out myself using the source codes, but couldn't manage it. Any advice?

    I'll also need to find some better images for those social network icons, but at least I've got them in place for the time being - and know how to do it now!

    Thanks, Isabel

  9. thesacredpath
    Staff

    Isabel, to increase the font size on the menu items, add the following CSS and edit the size as desired.

    .wf-active .main-navigation a {
        font-size: 12px;
    }

    There are a lot of social icons out there for free download, so I'm sure you will find exactly what you are looking for.

  10. Sorted - thanks! One weird glitch - I also added:

    text-transform: capitalize;

    to change all menu text from capitals - and everything has worked, with the exception of SUMMER OF '76, which sits below the menu item called Books, and has remained in CAPS.

    Any ideas?

  11. Open your custom menu and edit that menu item. In the menu item label, you have all caps.

  12. Brilliant - many thanks!

  13. You are welcome.

Topic Closed

This topic has been closed to new replies.

About this Topic