Move position of Social media icons

[Naomi Klein]

How do I move the social media and rss icons above the strap line? My site is here: http://www.felixfund.org.uk. I want them to sit ranged right above the line “Supporting bomb disposal experts”

[Bill Robbins]

Naomi,

You can move those to just above your tagline. Just paste this right at the bottom of your style.css file and that should take care of it for you:

#nav-right {
	position: absolute;
	float: none;
	display: block;
	padding-top: 0;
	margin-right: 0;
	top: -102px;
	right: 0;
}

If you need to adjust the height, just change the top value above. It’s set to a negative to move it that far above the navigation bar.

Let me know if you have any trouble or questions,
Bill

[Robin Wagner]

Hi Bill,
I just installed the foundation theme and would like the social media icons to be on the far right of the nav bar like in the demo.
Right now, they are just lining up next to the other nav buttons.
how do i change this?
Thanks

[Bill Robbins]

Robin,

Thank you for your business first of all. The new version of Foundation that was just released uses a WordPress menu to add in the social icons. We did that to give users the maximum flexibility.

There is a section in the theme instructions under navigation menus that walks through how to add each icon.

If you have any trouble, let me know.

Thanks again,
Bill

[Aaron DeVandry]

Hi Bill. Thank you SOOO much for this update. I’ve been waiting eagerly for it, and it doesn’t disappoint.

I followed your directions in the instructions for adding the social icons to the nav bar, but I have the same question as Robin does above. How do we get them to align to the right side of the nav bar like in your demo?

If I add them to the nav bar in the WordPress menu options, the icons are just added to the right of the last menu option (“Contact”), left aligned.

Aaron
northridgewest.org

[Bill Robbins]

Aaron,

Sorry for the confusion and I’m glad you fond the new version.

To set up the navigation like the demo, turn off the search option in the theme options page. Then make a menu for social icons. Add that menu to the “secondary” navigation menu. That will cause them to be aligned to the right of the navigation bar like the demo.

If you have any trouble, let me know.

Take care,
Bill

[Aaron DeVandry]

Perfect! That worked like a charm. Thanks again.

[PL2VETS]

Hi Bill

I too would like to have the original social icons above the tag line and not in the menu bar.

I pasted the code you mentioned here for Naomi in the CSS but it still did not move the twitter icon above the tag line. If I remove the icon from the main menu bar, will it then show up above the tag line? It just seems to look better above the tag. Is there any other steps that need to be taken?

Thanks for your suggestions they are very helpful.

Jeff

[Bill Robbins]

Jeff,

Great question. You can still move the icons over the navigation bar in the new version. Instead of the snippet above, give this a try:

#navigation {
	position: relative;
}

#nav-right {
	position: relative;
	top: -40px;
}

#nav-right li {
	border: none;
}

You can change the position vertically with the top: -40px. If you make it smaller it will move the icons higher.

If you have any trouble, let me know,
Bill

[PL2VETS]

Hi Bill

I have also pasted the above code and changed the vertical limits to -30 and still no icon shows up above the tag line. Could it be I need to upload an icon for this to work? I removed the standard white twitter icon from the main menu thinking that was causing interference, but still nothing. My twitter code is also pasted into the social media menu and a css class added as well.

Am I missing something yet?

Jeff

[Bill Robbins]

Jeff,

Do you have the social media icons in the “secondary” menu location that’s on the right hand side of the navigation bar? The code will only affect that menu.

Just let me know,
Bill

[PL2VETS]

Bill

Yup all three social media icons are in secondary menu called social. I am trying to get the social icons above the tag line in the open space and not showing in the main menu bar.

I’ve changed the vertical limits like you suggested above to a -30 and still nothing. Could it be a setting?

Jeff

[Bill Robbins]

Jeff,

That’s really strange. We I enter that on my site, it moves the icons up like this:

http://d.pr/i/ZD0j

[Author]

Posts