Adding social media icons to the right of header – Oxygen Theme

  • Unknown's avatar
    electriccaro · Member ·

    Hello, I just bought the Custom Design upgrade. I’ve been reading several posts about using it to add social media icons to the header, but nothing seems to work.

    I would like to add the icons to the top right corner of my page/header.

    The last method I used was “relative positioning” by adding a text widget with the code for my icons & adding codes I found to the CSS portion. I tried just about every “widget area” on the theme but no luck.

    Can someone guide me through this please? I’m using the Oxygen Theme. Thank you!
    http://electriccaro.com

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

  • Unknown's avatar
    supportmyoffice · Member ·

    Themes place widgets in specific places. you can’t change that. If your theme doesn’t have a widget block in the header, you won’t be able to place a widget there. You might want to contact the theme’s developer and ask them if they have any options for you.

    Here’s a link to the developers site: http://alienwp.com/

  • kathrynwp · Staff ·

    Hi electriccaro – I used a browser inspector to find the social media icons’ unique ID: text-12

    You can try manipulating its position with CSS positioning like this:

    #text-12 {
 /* your positioning here */
}

    Let me know if you need further help.

  • Unknown's avatar
    electriccaro · Member ·

    THANK YOU @kathrynwp!

    I was able to move it using the code below. You’re awesome!

    #text-12 {
	position: absolute;
	left: 800px;
	top: 70px;
	z-index: 2;
}
  • kathrynwp · Staff ·

    Looks good, thanks for sharing the code in case it helps others!

    Might also want to wrap that CSS in a media query, so it doesn’t disappear off the right size of the screen at smaller resolutions.

    So something like:

    @media screen and (max-width: 940px) {
	#text-12 {
		position: absolute;
		left: 800px;
		top: 70px;
		z-index: 2;
	}
}
  • Unknown's avatar
    electriccaro · Member ·

    I was concerned about the same thing!
    I tried adding the additional @media screen code but is places all the social media buttons to its original place. :(

  • kathrynwp · Staff ·

    Sorry, I made a typo! Could you change:

    max-width: 940px

    to 

    min-width: 940px
  • Unknown's avatar
    electriccaro · Member ·

    It works perfectly now! Thank you so much! :D

  • kathrynwp · Staff ·

    Wonderful, you’re very welcome!

  • kathrynwp · Staff ·

    I actually noticed that I can’t consistently click on the social-media icons. My colleague Sheri (designsimply) helped me figure out why – the navigation bar is covering them up!

    You can visualize it by temporarily putting this in your custom CSS:

    .main-navigation {
    background: yellow;
}

    You can fix it by adding this permanently, to shorten the length of the navigation bar:

    .main-navigation {
    max-width: 760px;
}
  • The topic ‘Adding social media icons to the right of header – Oxygen Theme’ is closed to new replies.