Need help? Check out our Support site, then


Adding social media buttons to menu bar in suits theme

  1. lonelycrowdmedia
    Member

    How do I add social media buttons to my menu bar in the suits theme? I want to add buttons on my menu bar that link straight to my social media sites. Is this possible?

    The blog I need help with is lonelycrowdmedia.com.

    The blog I need help with is lonelycrowdmedia.com.

  2. Yes, this can be done. I see from looking at Appearance > Menus in your dashboard you are already using a custom menu. What you would do is to add Custom Menu Links to your menu. You then upload your icons to the media library, get the URLs of those icons and then we put them into a background declaration in the CSS for the specific menu items and do a little magic to make the text label disappear and get the spacing and such correct.

    If you wish to do this, create the links in the custom menu and upload your images to the media library and we can help you with that. It would be helpful if you also posted the links to those menu items here in this thread.

  3. lonelycrowdmedia
    Member

    Thanks for the quick reply!

    I have now added the custom menu links as you said, the links to the images are below:

    Instagram: http://thislonelycrowd.files.wordpress.com/2013/11/instagram-icon.jpg

    Twitter:
    http://thislonelycrowd.files.wordpress.com/2013/11/black-ellipse_twitter.png

    Email:
    http://thislonelycrowd.files.wordpress.com/2013/11/email-icon1.png

    Not sure if I need to edit the size or file types of these images so it fits properly? Let me know the next steps!

    Thanks again for your help!

  4. Ok, the top menu bar is only about 34px in height, so I've used the background-size: contain to automatically resize the images for the height of the menu bar. Also, I've limited this to only working at 869px and above in width. This is because at that point, the minimized menu system comes into play (for smaller device screens) and things go awry on the minimized menu. At 868px and lower in the minimized menu, they revert to text links.

    Give the following a try and see what you think.

    @media screen and (min-width: 869px) {
        #menu-item-510 a {
        background-image: url("http://thislonelycrowd.files.wordpress.com/2013/11/instagram-icon.jpg");
        background-size: contain;
        background-repeat: no-repeat;
        background-position: center center;
        letter-spacing: -6px;
        color: rgba(0, 0, 0, 0);
            width: 80px;
    }
    #menu-item-511 a {
        background-image: url("http://thislonelycrowd.files.wordpress.com/2013/11/black-ellipse_twitter.png");
        background-size: contain;
        background-repeat: no-repeat;
        background-position: center center;
        letter-spacing: -6px;
        color: rgba(0, 0, 0, 0);
            width: 70px;
    }
    #menu-item-512 a {
        background-image: url("http://thislonelycrowd.files.wordpress.com/2013/11/email-icon1.png");
        background-size: contain;
        background-repeat: no-repeat;
        background-position: center center;
        letter-spacing: -6px;
        color: rgba(0, 0, 0, 0);
            width: 70px;
    }
    }
  5. lonelycrowdmedia
    Member

    Perfect, that worked great! Thank you!

    Is there a way that I can now centre everything on my menu bar?

    Thanks!

  6. Certainly, include the following two rules before the last ending curly bracket in the code I gave you above.

    .main-navigation {
        text-align: center;
    }
    
    .main-navigation ul {
        display: inline-block;
    }
  7. lonelycrowdmedia
    Member

    Excellent! Just one more thing - can I make the menu text black? I couldn't find an option in the custom colour section.

    Thanks!

  8. Hi, the menu item is already sorta-kinda black (#515151), but if you want to make it pitch black:

    .nav-menu .current_page_item > a, .nav-menu .current_page_ancestor > a, .nav-menu .current-menu-item > a, .nav-menu .current-menu-ancestor > a {
        color: #000000;
    }
  9. lonelycrowdmedia
    Member

    Cool Thanks! Sorry, but where exactly would I paste this code? I did it at the end of my last stream but it didn't work?

  10. Absolutely. The first rule below is the "current menu item" color (the page you are on). Sometimes it is best to set that to a slightly different color to help the visitor know were they are, but it is not entirely necessary (I've got black in it now). The second would be all other menu items (not current page).

    .nav-menu .current_page_item > a, .nav-menu .current_page_ancestor > a, .nav-menu .current-menu-item > a, .nav-menu .current-menu-ancestor > a {
        color: #000000;
    }
    .nav-menu li a {
        color: #000000;
    }
  11. lonelycrowdmedia
    Member

    Thanks so much for all the help!

    You were so speedy to reply!

    Very happy now!

    Have a great day! :)

  12. You have a great day also and you are welcome.

Topic Closed

This topic has been closed to new replies.

About this Topic

Tags