Tagged: ,

Viewing 9 posts - 1 through 9 (of 9 total)
  • Author
    Posts
  • October 31, 2013 at 8:23 pm #183098
    petersandin

    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!!

    November 1, 2013 at 4:28 am #183266
    Ismael

    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

    November 1, 2013 at 10:04 am #183296
    petersandin

    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

    November 1, 2013 at 10:57 am #183310
    Dude

    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(https://www.petersandinfoto.se/wp-content/uploads/2013/11/facebook32.png) no-repeat 0 27px;
text-indent: 9999px;
}

    Regards,
    Peter

    November 1, 2013 at 12:53 pm #183341
    petersandin

    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

    November 1, 2013 at 2:02 pm #183357
    Yigit

    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 11 years ago by Yigit.
    November 1, 2013 at 2:51 pm #183384
    petersandin

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

    November 1, 2013 at 7:26 pm #183467
    Yigit

    Hi!

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

    Best regards,
    Yigit

    November 2, 2013 at 10:15 am #183668
    petersandin

    Works now. Thanks a lot Yigit!!!

  • Author
    Posts
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.