Can I move my social media buttons to the navigation bar using CSS?

  • Author
    Posts
  • #2117922

    I’m vaguely familiar with using CSS relative and absolute positioning to move elements around on a page. What I would like to do is move my social media buttons (currently on the left-hand side of the page) to my navigation bar, positioned to the right of the “blog” link.

    I’m not planning on adding any other widgets to the primary sidebar, and I’ll remove the “Editorial Freelancers Association” white box below the buttons if I can make this work.

    The problem is, when I try to use relative positioning on the “.primary-sidebar .widget” class, the widget (my social media buttons) fall behind the navigation bar, and don’t show up. Is there a workaround for this?

    Sincerely,
    A CSS Beginner

    The blog I need help with is roseeditorial.com.

    #2118081

    This is being discussed in another forum post. See here:

    https://en.forums.wordpress.com/topic/adding-a-twitter-button-to-nav-bar?replies=2

    Let us know if this doesn’t answer your question.

    #2118195

    Hello,

    No, that forum talks about hovering, not positioning my social media buttons on my navigation bar, and is addressing a different theme. Can you answer my question above? Thanks!

    #2118203

    Hi there, menu items in themes here at WordPress.com all have a unique CSS id (menu-item-183 in the example below), which is what you will need to have in order to add the CSS for the social icons.

    1. Upload your social icons to your media library if you have not yet done so. You will need the URL of each of those icon images to insert into the CSS.
    2. Add Custom Links to your menu for each social service you want to put in the menu (we will hide the names with the code below) and then save the menu.
    3. Using the web inspector in your browser, inspect the first social icon menu element. In the li section of it you will see something like
    <li id="menu-item-133"....
    4. Paste in the following CSS and then change the 133 to whatever the number is for the social icon you are working on.
    5. In the background declaration replace URL_OF_IMAGE between the quote marks with the URL of that social media icon from your media library.

    #menu-item-133 a {
        background: url("URL_OF_IMAGE") no-repeat scroll center center rgba(0, 0, 0, 0);
        color: rgba(0, 0, 0, 0);
    }

    Continue to the next social menu item and do the same.

    It is likely that some additional adjustments may be required to get the spacing correct. After you get them all added, you can post back here and we can help with any spacing or positioning issues. Given that your menu horizontal space doesn’t have much space left in it, we will likely have to adjust the spacing between those. If you would like to edit the spacing while you are doing the above, add this CSS and you can adjust the 30px right padding.

    .site-navigation a {
    padding-right: 30px;
    }

    #2118204

    Oh and I forgot the link to our support page on using the web inspector, in case you are not familiar with it.
    http://en.support.wordpress.com/custom-design/how-to-find-your-themes-css/

    #2118206

    That is exactly what I was looking for. Thanks!

    As you predicted, my next question is whether it is possible to align the social media buttons on the right side of the navigation bar (not sure if I can use “float” here), while keeping my page links where they are. I’d also like to preserve the spacing between my page links, but considerably decrease the spacing between the social media buttons so that they sit right beside one another. Is this possible? I’m guessing that I may have to manually set the padding for each menu item, but there may be a better way. Thanks again.

    #2118208

    Yes, you can add a right float to each of the social menu items to move them to the right. I would suggest that we do that with a media query and limit that to the point where the menu goes to the small, minified menu for tablets and phones and so that they align with the other menu items on the small menu. When you get to that point, we can work on that and figure out the best way to do it.

    #2118212

    Using a media query sounds great. At the moment, I floated my social media icons to the right, and as you can see on my page, they moved slightly above my other page links, which increased the height of the navigation bar, and they didn’t move to the right end of the navigation bar.

    Do you have any ideas about how to fix the icons so that they come back down to the same level as my other links, and appear on the right end of the nav bar?

    #2118214

    One note: I’ve decided to remove the “float: left” on the “.primary-navigation” class so that everything is floating right–I’ll keep it that way, because it seems like it will work better with this theme.

    At this point, maybe we can change the padding on the large screen so that the social media buttons are bunched together, separate from the page links, and then work with a media query from there?

    #2118229

    On tightening up the spacing, add a padding right and padding left of 0 to 207, 208 and 209, and then add a padding left of 0 to 210 and see how you like that. Example:

    #menu-item-207 a {
        background: url("//roseeditorial.files.wordpress.com/2014/10/twitter2.png") no-repeat scroll center center rgba(0, 0, 0, 0);
        color: rgba(0, 0, 0, 0);
        padding-right: 0;
        padding-left: 0;
    }

    #2118230

    Nice job on all that, by the way. :)

    #2118234

    Thanks! Yeah, after messing with spacing, etc., I think I’ve nearly come full circle with the CSS settings in this theme… I suppose that is why the settings are set as they are in the first place. :)

    One other cool thing that I discovered was that I should set the width in the class to the width of the social media images, or slightly wider–otherwise, the width stays the same as the replaced text by default, which creates a large space between buttons.

    I have (hopefully) only one more question for you–I wasn’t able to find anything about this in the forums. My text is hyphenated in my primary sidebar text widget. Is there a way to turn this off? I’ve already turned off the hyphenation in WordPress. Thanks again for your generous help.

    #2118235

    On the hyphenation, the text widget isn’t paragraphs, it is a div with breaks in it, so we have to tell the browser not to hyphenate anything in a div like this:

    div {
    	-webkit-hyphens: none;
    	-moz-hyphens: none;
    	-ms-hyphens: none;
    	hyphens: none;
    }

    #2118236

    That works perfectly. Thank you!

    #2118237

    You are welcome.

The topic ‘Can I move my social media buttons to the navigation bar using CSS?’ is closed to new replies.