Opti theme: social media icons in main menu

  • Unknown's avatar
    labourhistorymelbourne · Member ·

    Hello, I’m wondering if anyone can help me put facebook and twitter icons into the main menu of my site. The Opti theme doesn’t appear to automatically support a css classes addition.Thanks, Julie

    The blog I need help with is: (visible only to logged in users)

  • staff-happychia · Staff ·

    Do you mean you can’t change css despite purchasing Custom Design upgrade?

  • Unknown's avatar
    labourhistorymelbourne · Member ·

    Hi chaitanyamsv,

    When I used a different theme I was able to do this just by adding “facebook” to a link in the menu under the heading “CSS Classes”. But this doesn’t work with the “Opti theme” that I am now using, and unfortunately I’m not sure how to/what to do add to convert the link to an icon in the menu (I do have the CD upgrade).

    Thanks for responding, Julie

  • staff-happychia · Staff ·

    It seems it is not possible, but I might be wrong. How about you post your question in the Opti theme forums?

  • Unknown's avatar
    hallluke · Member ·

    There is no built in way to do this in every theme though it is possible via a work-around using CSS. To target the Facebook link in your navigation menu you could use something like the below:

    #menu-item-794 {
	background-image: url("IMAGE_URL");
}

    You’ll need to upload an icon to your media library and then use the URL in the code above, once you’ve done that let me know if you need help positioning it in your menu.

  • Unknown's avatar
    michaelvandenberg · Member ·

    Hi there,

    Since you are already familiar with the advanced menu properties (CSS classes), I’m going to take it from there. Now first the easy part:

    .facebook {
text-indent: -99999em;
background-image: url('IMAGE-URL');
background-repeat: no-repeat;
background-position: center center;
}

    The menu item title will be moved off screen. Instead an image will be shown. Which won’t be repeated and it will display neatly in the center.

    The hard part will be finding a suitable social media icon.

    But you’ll just have to Google it. Upload the social icon image. Grab the url and paste it in the css code above. That should work I guess.

    Let me know if you need more help.

    Best regards,

    Michael

  • Unknown's avatar
    labourhistorymelbourne · Member ·

    Thanks chaitanyamsv, hallluke, and Michael.

    Michael’s suggestion worked a treat! I downloaded the icons from https://www.iconfinder.com – uploaded to the Media file and copied the url into the relevant part.

    Thanks to all for helping and a special THANK YOU to Michael. Much appreciated. Julie

  • The topic ‘Opti theme: social media icons in main menu’ is closed to new replies.