Adding Social Links Buttons in the Header

Home Forums Automattic Elemin Adding Social Links Buttons in the Header

Viewing 11 posts - 1 through 11 (of 11 total)
  • Author
    Posts
  • #111899 Resolve

    javyell
    Member

    I recently purchased Elemin (and am a novice blogger), and I want to add social links buttons to the header (on the very top right of the page, opposite the search bar) to allow people who come to jump to my twitter, linkedin, etc…. How do I do this?

    Thanks!

    The blog I need help with is jeremyyellen.com
    #152929

    Kathryn P.
    Happiness Engineer

    Hi there, while Elemin doesn’t have a sidebar in the header area where you can add things like social-media icons, but you can try a couple of things instead:

    1) Follow our guide to adding social-media links in one of your exising sidebar areas:

    http://en.support.wordpress.com/add-social-media-buttons-to-your-sidebar-or-footer/

    or:

    2) Try adding your social-media links as custom menu items:

    http://en.forums.wordpress.com/topic/adding-social-media-buttons-to-header-or-menu-bar

    What Richard (thesacredpath) explains in that thread also applies to Elemin:

    Since you are using a responsive width theme that adjusts its width to the browser window width or screen width it is being viewed on, I would suggest putting them into the menu instead of trying to put them in the header area. On responsive width themes, putting them into the header area is problematic.

    Let me know if you need further help with it.

    #152934

    javyell
    Member

    Thanks. I would like to do number (2), and add my social media icons (twitter and linkedin) as custom menu items. But since I’m still a novice, every instruction after “Create a Custom Menu” reads like Greek to me.

    How do I use the code to create the necessary CSS rules? I’d appreciate your walking me through this step by step.

    #152935

    Kathryn P.
    Happiness Engineer

    The first thing to do is to set up a Custom Menu, which will replace your current default menu. Let’s start with that. :-)

    Head under Appearance > Menus:

    https://jeremyyellen.wordpress.com/wp-admin/nav-menus.php

    We have a full step-by-step guide with screenshots and a video, showing how to create a custom menu:

    http://en.support.wordpress.com/menus/

    For your social media links at the end of the menu, use custom links as described here:

    http://en.support.wordpress.com/menus/#adding-custom-links

    For example, your Twitter custom link would be something like https://twitter.com/yourusername – where yourusername is your Twitter username.

    After that’s all set up, let me know and we can walk through the next steps.

    #152936

    javyell
    Member

    Thanks again. I’ve added twitter and linkedin custom links to the menu. But I would much prefer to have the twitter and linkedin icons instead of text. How do I change this.

    By the way, thanks so much for your help!

    #152946

    Kathryn P.
    Happiness Engineer

    You’re very welcome. :-)

    Try something like this to add icons to the left of each link:

    @media only screen and (min-width: 380px) {
    #menu-item-154 a {
    background-image: url("http://i.cloudup.com/8FFqb7sbZb.png");
    background-position: 0 50%;
    background-repeat: no-repeat;
    background-size: 30px auto;
    width: 90px;
    }
    #menu-item-154 {
    padding-left: 15px;
    }
    #menu-item-155 a {
    background-image: url("http://i.cloudup.com/nSukG6aRB2.png");
    background-position: 0 50%;
    background-repeat: no-repeat;
    background-size: 30px auto;
    width: 90px;
    }
    #menu-item-155 {
    padding-left: 15px;
    }
    }

    It’ll look something like this:

    Customize Elemin WordPress

    Be sure to upload the images to your own media library instead of using the Cloudp links I’ve given you here.

    I got the LinkedIn logo here:

    http://press.linkedin.com/Media-Resources/206/LinkedIn-in-logo-2-color-reverse-png

    I used a browser inspector to find the menu ID number for each menu item. (The CSS you’ve added from the other post won’t work because your menu ID numbers are different from that other site.) As Shaun explained in the original post,

    The code adds a background image to the menu item, and then adds some padding to the left to make room for the image.

    #152947

    Kathryn P.
    Happiness Engineer

    The extra code (called a media query) wrapping the entire thing makes sure it’s only applied at anything above a small phone width, to avoid overlapping problems.

    Here are some resources for learning how to target your site’s CSS, which will help you make certain design and layout changes:

    https://dailypost.wordpress.com/2013/07/25/css-selectors/

    http://dailypost.wordpress.com/2013/06/21/css-intro/

    http://dailypost.wordpress.com/2013/08/29/css-matched-rule-pane/

    http://en.support.wordpress.com/custom-design/how-to-find-your-themes-css/

    If CSS is new to you, here are some resources for learning more about it:

    You can learn more about using media queries that target certain screen sizes here:

    http://en.support.wordpress.com/custom-design/custom-css-media-queries/

    http://css-tricks.com/snippets/css/media-queries-for-standard-devices/

    http://webdesignerwall.com/tutorials/responsive-design-with-css3-media-queries

    #152957

    javyell
    Member

    Great, thanks! I’ll check out these tutorials and guides. It seems like I’m going to have to become reasonably proficient to do what I want with the site.

    One more question to clean up the menu bar. If possible, I would like only to have the social media icons, with no followup text. Is there any way to set this up with the icons alone (without the text)?

    You’ve been really helpful. Thanks so much.

    #152960

    Kathryn P.
    Happiness Engineer

    The menu system doesn’t allow blank menu Navigation Labels, but you could try something like this:

    1) Set up your Menu item with a single letter for the Navigation Label, but the full wording as the Title Attribute, like this:

    Menus kp test site WordPress

    2) Set the text colour to white by adding this extra line to the current code, anywhere within the curly brackets in this declaration: #menu-item-154 a

    color: #fff !important;

    You may also need to tweak some of the padding and other size elements.

    Keep in mind that at smaller screen sizes, which you can approximate using the resizer tool in the Customizer preview pane – https://cloudup.com/cvaHi9bPpzQ – the letter “T” will still appear.

    #152971

    javyell
    Member

    Great! This is exactly what I wanted. Thank you so much. Incidentally, there is no need to set up the menu item with a single letter for teh Navigation label.

    Thank you so much! You can go ahead and close this out…

    #153104

    Kathryn P.
    Happiness Engineer

    Great! This is exactly what I wanted. Thank you so much.

    Excellent! You’re very welcome.

    Incidentally, there is no need to set up the menu item with a single letter for teh Navigation label.

    If you ever add another custom link to the right of Twitter – as I though you were going to do with LinkedIn – it would be obvious why I suggested reducing the length of the word. :-) It’s to avoid leaving the “invisible” word still taking up space in the menu.

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

The topic ‘Adding Social Links Buttons in the Header’ is closed to new replies.