Posted 1 year ago #
My site is at: chrisdesrochers.com
I need help aligning the social media buttons on the top nav bar. I want them to be on the bar, about 2-3 pixels spaced, right aligned.
I've tried many times to mess with the CSS but I can't seem to get them to go where I want.
I would appreciate any help.
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.
Posted 1 year ago #
esmi: Could you give me an example of this?
Posted 1 year ago #
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
Posted 1 year ago #
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! :)
Posted 1 year ago #
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
Posted 1 year ago #
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.
Posted 1 year ago #
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
This topic has been closed to new replies.
