Viewing 10 posts - 1 through 10 (of 10 total)
  • Author
  • #25870


    Here is my website :

    I would like to display social media icons (the Facebook, Twitter and Youtube logos) into my main menu, without having to click on a category title to display them : I want the icons to be displayed right next to my other categories. So, basically, just after “Frises chronologiques” we should see the social media icons, and clicking on them would lead directly to these social pages.

    I’ve tried several plugins but none of them offers this kind of display!



    You can move the position of the default social icons of the theme. Go Shoutbox > Contact & Stuff panel then fill in the social icon options.

    Edit header.php, find this code:

    <ul class="social_bookmarks">
    <?php do_action('avia_add_social_icon','header'); ?>
    <li class='rss'><a href="<?php avia_option('feedburner',get_bloginfo('rss2_url')); ?>"><?php _e('Subscribe to our RSS Feed', 'avia_framework')?></a></li>
    if($twitter = avia_get_option('twitter')) echo "<li class='twitter'><a href='".$twitter."'>".__('Follow us on Twitter', 'avia_framework')."</a></li>";
    if($facebook = avia_get_option('facebook')) echo "<li class='facebook'><a href='".$facebook."'>".__('Join our Facebook Group', 'avia_framework')."</a></li>";


    Cut it then place it below this code:

    <div class='main_menu'>

    <div class='container'>

    Add this on your custom.css or Quick CSS

    .social_bookmarks {
    top: 11px;
    right: 300px;

    Adjust the right position of the .social_bookmarks selector.

    Go to wp-content/themes/shoutbox/images/skin-minimalORskin-dark folder then edit the color of social icons images.




    Thanks a lot, it works!

    There is one problem, though : the social media icons can’t be clicked… yet I’ve followed your instructions step by step.

    I would also like to add a Youtube icon/link. Is it possible? I’ve seen Nick’s solution ( but I think it doesn’t apply in my case and theme.

    Finally, how can I get rid of the “RSS feed” icon?


    Hi Drucci,

    The icons are both clickable when I look at the site now.

    To add a youtube icon, you’ll need to add another list item to the code in your footer and header since you have them both. Where the rss line was (i’m guessing you have removed it) you can add in:

    <li class='rss noLightbox'><a href=""></a></li>

    Then in the theme files you can replace the image that the rss icon would use and it will then be used for the youtube icon. So replace this image with your own youtube icon .




    They are clickable on the footer but not on the main menu (right below the header, next to the search form).

    Thanks for the Youtube help, I’ve managed to put a new logo. Yet the link isn’t clickable on the main menu either, and on the footer it displays a link to “” while I did use your line of code and put my Youtube link… how can I correct this?


    You need to also give your social links a z-index:

    .social_bookmarks {
    top: 11px;
    right: 250px;
    z-index: 900;

    The footer text I don’t know where it came from but my guess is its part of your copyright text or its added in right around there.


    I’ve added the z-index but it doesn’t solve the issue regarding the links : the main menu’s icons are still not clickable and the bottom Youtube one still doesn’t link to the right URL.


    Make sure you’ve refreshed the page 4-5 times to clear any local cache for the icons being select-able. I’m still having no issues there.

    For the footer, make sure that you’ve change the code in the footer so that the rss url is not set as a variable but instead set exactly the same way you did in the header.


    That’s weird because I did refresh the page several times and cleared the cache… it didn’t change a thing but now it works!

    Thanks a lot for your help and patience, everything works now!



    Glad it is all fixed. :)



Viewing 10 posts - 1 through 10 (of 10 total)

The topic ‘Add social media icons into the main menu’ is closed to new replies.