It would help if you added a unique class or id to the list or its enclosing <div>. Otherwise, any attempt to style it will impact your nav menu.
esmi: Could you give me an example of this?
You need like a menu bar style like this inside your “navbar” class:
Header.php
<div class=”navbar”>
<div class="social">
<div class="social_inner"><a href="http://www.twitter.com/digiraindrops"/>
<img src="<?php bloginfo('template_directory'); ?>/images/twitter.jpg" alt="Follow Us" /></a></div>
</div>
<div class="social_inner"><a href="http://www.facebook.com/digitalraindrops/">
<img src="<?php bloginfo('template_directory'); ?>/images/facebook.jpg" alt="Facebook" /></a></div>
</div>
</div>
And a style.css entry like:
/* Start Social Links */
.social {
position:relative;
float:right;
width: 400px;
margin-right:10px;
height:32px;
}
.social_inner {
float:right;
margin: 0;
padding:0;
}
Adjusting the margins to suit!
WordPress Version 3 has made it ‘cool and easier’
Better still would be to write the code in a file called social-horizontal.php add this to the themes folder then in header.php below:
<div class="navbar">
Add:
<?php /* Add in our Horizontal Social Media */ ?>
<?php get_template_part( 'social', 'horizontal' ); ?>
Anyone reading this topic and would like a more dynamic solution, have a look here as well!
HTH
David
adeptris: I did it. Check out my site: chrisdesrochers.com.
The only issue is that the icons are showing up behind my navigation bar. Help! 🙂
It looks like you have them inside the ‘navbar-holder’ and not the ‘navbar’ class.
If you cannot fix it, paste the header.php code to http://wordpress.pastebin.com
And paste the link back here, you might need to adjust the css a bit if moving the call does not work out.
P.S.
Did you use the file or add the code to the header?
Cheers
David
adeptris: Thank you! This has helped me so much. I appreciate all the help.
I put the links right into the header.php file for now with HTML comments to make it clear where everything is. I may go with the separate file option in the future if the code becomes unmanageable.
Again, thanks for the help.
No Problem,
Looks better now, you could lose the social margin-right: reduce the width: 220px; so it does not impact as you add more pages, and on the inners add margin: auto 0; for the styles, that should center them horizontally.
Mark this topic resolved please.
David
