Tagged: ,

Viewing 9 posts - 1 through 9 (of 9 total)
  • Author
    Posts
  • #183098

    Hi,
    I’d like to add the social icon for facebook to my main menu on my website so that it appears right in between the last item in the menu and the search icon (Im using the small fixed header). Is this possible?

    http://www.petersandinfoto.se/peter-sandin-foto/

    Thanks guys!!

    #183266

    Hey petersandin!

    You can create facebook menu item on Appearance > Menus. Go to Links and add the URL and then label it Facebook, add the menu. Click Screen Options on the top right corner then enable CSS Classes. Edit the Facebook menu item then add the css class “facebook”. You can now style the facebook menu item using this selector.

    #top .main_menu .menu li.facebook {
    display: block;
    width: 32px;
    height: 32px;
    background: red;
    text-indent: 9999px;
    }

    Change the background property to background: url(‘FACEBOOK ICON URL HERE’);

    Regards,
    Ismael

    #183296

    Thanks it’s almost working. For some reason the icon is ending up too high and not in line with the rest of the menu, any ideas why? Also the “hover effect” which is the red underline is appearing right under the icon and not like for the other menu items. Is there a fix?

    http://www.petersandinfoto.se/peter-sandin-foto/

    Cheers,
    Peter

    • This reply was modified 5 months, 3 weeks ago by  petersandin.
    #183310

    Hi!

    Please use following code (instead of Ismaels code) to fix the issues

    
    #top .main_menu .menu li.facebook {
    display: block;
    width: 32px;
    background: url(http://www.petersandinfoto.se/wp-content/uploads/2013/11/facebook32.png) no-repeat 0 27px;
    text-indent: 9999px;
    }
    

    Regards,
    Peter

    #183341

    Done and almost perfect except that the facebook icon moves when I scroll down the page. Can I add something so it stays in line with the menu when I scroll?

    http://www.petersandinfoto.se/peter-sandin-foto/

    Cheers,
    Peter

    #183357

    Hey!

    Please add following code to Quick CSS as well

    .header-scrolled .menu li.facebook { top: -21px; height: 60px; }

    Cheers!
    Yigit

    • This reply was modified 5 months, 3 weeks ago by  Yigit.
    #183384

    Sorry Yigit, added it to the Quick CSS but that didn’t seem to change anything. Any ideas why?

    #183467

    Hi!

    I have edited the code in my previous code. Please try it now

    Best regards,
    Yigit

    #183668

    Works now. Thanks a lot Yigit!!!

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

The topic ‘Adding facebook social icon and link to main menu’ is closed to new replies.