Adding social media icons to a header image

  • Unknown's avatar
    davidcxwang · Member ·

    Hello. I was wondering: How do you add social media icons to the header image and also have those icons link to their respective pages on a separate tab?

    The blog I need help with is: (visible only to logged in users)

  • Unknown's avatar
    timethief · Member ·

    This thread will be moved to the CSS Forum for you. Please do not create a duplicate.

  • Unknown's avatar
    designsimply · Member ·

    There are a few different ways. One would be to add custom menu items to each and then target them with CSS to add a background image to each one. Another would be to add the custom menu items to a widget and then re-position the widget using CSS. Which one is best will depend on your theme and where you want to position the social media icons exactly.

    Here is an example I started which you can take from here and modify:

    #branding,
#access {
	z-index: 90;
}
#secondary {
	position: relative;
}
#image-3 {
	position: absolute;
	top: -70px;
	right: 320px;
	z-index: 99;
}
#image-3 img {
	max-width: auto;
}

    Note that this method will work for any page with the same layout as the home page where the sidebar is set in the same position on the right.

    The “#image-3” selector matches the image widget you added with with YouTube image in it. To add another image to your header area, you will need to find the selector for other images you add. To do that, right-click on the image in the browser, and look through the HTML that appears until you find the “id” value for the “aside” tag (which was “image-3” in my example but each widget tag will have a separate one). Once you find the “id,” copy the last two rules from the example above, replace “image-3” with the new “id” value and adjust the “right” number to move the image into the position you want it in on the menu:

    #YOUR_IMAGE_WIDGET_ID {
	position: absolute;
	top: -70px;
	right: IMAGE_PLACEMENT_NUMBER;
	z-index: 99;
}
#YOUR_IMAGE_WIDGET_ID-3 img {
	max-width: auto;
}
  • The topic ‘Adding social media icons to a header image’ is closed to new replies.