Social Media Icon Links In Footer

Support Area Forums Moonrise Social Media Icon Links In Footer

Viewing 11 posts - 1 through 11 (of 11 total)
URL to the page in question: http://client.dev.recipesocial.net/
  • Author
    Posts
  • #28087
    RecipeSocial
    Participant

    Hi Bill,

    I see on the demo Moonrise demo theme you have some social media icons in the footer. Where can I add the links to make them appear? Or have they been coded especially? If so, is it possible to have them featured in the header section on the right hand side instead?

    Thanks,
    Christian.

    #28123
    Bill Robbins
    Moderator

    Hello Christian,

    The social icons in the footer are set up with a navigation menu. If you’ll look in the theme instructions at https://support.organizedthemes.com/moonrise/ you’ll find out how to set those up in the navigation menu section.

    You could add social icons to your header navigation menu via a plugin like Menu Social Icons (https://wordpress.org/plugins/menu-social-icons/).

    Take care,
    Bill

    #28140
    RecipeSocial
    Participant

    Hi Bill,

    I did take a quick look in the theme instructions, but could find any info. regarding social icons. I obviously wasn’t looking hard enough!

    Thanks for the plugin link, i’m going to give it a go.

    Cheers,
    Christian.

    #28141
    RecipeSocial
    Participant

    Hi Bill,

    I’ve got the plugin working, looks good. I just need to watch their YouTube video again to see how to customise the colours. Maybe I need to upgrade the plugin to allow for this tweak?

    The next challenge is working out how to get the icons to display in the top right of the header, any help would be much appreciated.

    Meanwhile, i’d also like to keep the recruitment link in the footer if possible?

    Thanks,
    Christian.

    #28149
    Bill Robbins
    Moderator

    You can have separate links between the header and footer by creating unique navigation menus for each. That way you can have the recruitment link in the bottom, but not the top.

    Once you have your social icons in the header menu, you can most likely absolutely position them with CSS. Each menu item has a unique id that we can use to style it independently of the others. That’s probably the best way to move any icons from the header navigation spot to the top right corner.

    #28165
    RecipeSocial
    Participant

    Hi Bill,

    Okay, thanks for the info. I wish I knew how to code CSS!

    Maybe there’s a plugin for this?

    Thanks,
    Christian.

    #28168
    Bill Robbins
    Moderator

    I can show you how to position them, but they’ll have to be on the site in the header first. I use a tool that lets me manipulate the CSS of a live site which is really helpful for support. But the underlying code has to be present for that to work. If you’ll add them to the header, I can show you how to position them.


    Thankfully CSS is pretty easy to learn. Since it’s all in English (it’s not a programming language) the items typically describe what they are. You can learn the basics of it in an afternoon.

    This is a pretty good book for learning CSS (http://handcraftedcss.com). There are lots of online tools as well at places like http://teamtreehouse.com or http://www.lynda.com/default.aspx

    Bill

    #28184
    RecipeSocial
    Participant

    Okay, i’ve just added the social links to the header menu.

    Thanks for the links, i’ll take a look 🙂

    When you’re ready, let me know what i need to do next re. icons.

    Thanks,
    Christian.

    #28187
    Bill Robbins
    Moderator

    Here’s how to place the icons in the top right corner:

    1. Go to your theme options page and choose the Advanced tab.
    2. Scroll down to the Custom CSS box and add this:
      
      #header {
      	position: relative;
      }
      
      #header-content li.facebook {
      	position: absolute;
      	top: 5px;
      	right: 10px;
      }
      
      #header-content li.instagram {
      	position: absolute;
      	top: 5px;
      	right: 40px;
      }
      
      #header-content li.twitter {
      	position: absolute;
      	top: 5px;
      	right: 86px;
      }
      
    3. Update your settings.

    Take care,
    Bill

    #28189
    RecipeSocial
    Participant

    Brilliant! Thank You.

    They look great up there!

    Christian.

    #28192
    Bill Robbins
    Moderator

    Fantastic 🙂

Viewing 11 posts - 1 through 11 (of 11 total)
  • The topic ‘Social Media Icon Links In Footer’ is closed to new replies.