Cannot align social media icons with Nav Bar


#1

Hello! I’vebeen getting the hang of wordpress, simply by googling my problems and reading one of the many resources, but I’m a bit stumped by a problem I’m currently having.

I’ve added social media icons to my nav bar, and I would like them to align right, with my navigation links aligning left. I managed to align the icons to the left, but they push the navigation bar down. You can see what I’m talking abouthere

I can’t seem to get it to align beside the nav links, it just appears one line below.

This is the code I’m using:

<div align="right"><a href="www.twitter.com"><img title="Twitter" 
src="http://thebeautycollective.co/wp-content/uploads/2016/02/Free-Twitter-Purple-
Rimmed-Social-Media-Icons-1.png" alt="Twitter" width="35" height="35" /></a><a 
href="www.pinterest.com"><img title="Pinterest" src="http://thebeautycollective.co/wp-
content/uploads/2016/02/Free-pinterest-Purple-Rimmed-Social-Media-Icons-1.png" 
alt="Pinterest" width="35" height="35" /></a><a href="><div><a 
href="www.instagram.com"><img title="Instagram" src="http://thebeautycollective.co/wp-
content/uploads/2016/02/Free-Instagram-Purple-Rimmed-Social-Media-Icons-1.png" 
alt="Instagram" width="35" height="35" /></a><a href="www.facebook.com"><img 
title="Facebook" src="http://thebeautycollective.co/wp-content/uploads/2016/02/Free-Facebook-Purple-Rimmed-Social-Media-Icons-1.png" alt="Facebook" width="35" height="35"
 /></a><a href="mailto:admin@thebeautycollective.co"><img title="Email" 
src="http://thebeautycollective.co/wp-content/uploads/2016/02/Free-Email-Purple-Rimmed-
Social-Media-Icons-1.png" alt="Email" width="35" height="35" /></a></div>

I’ve put it in the header.php file in my child theme, next to <!-- #main-navigation -->

I’ve already tried <div align=“top”>, which doesn’t do anything. If anyone could offer a suggestion i’d be super thankful!


#2

Hi,

You can try to add css rule tho those <div align=“right”… like this:
<div align=“right” style=“position: relative;top: -40px;”>

Regards,
Awan


#3

Hello! That worked, however, Now I have this problem:
screenshot of problem

There’s a large gap underneath the lettering, and it seems that the hyperlink is below the actual lettering (does that make sense?). So to go to the blog page, have to hover my mouse right underneath the word “blog”, as opposed to on top of it.

Please let me know how to fix the problem! Thank you :slight_smile:


#4

I see,

Please try this instead:
<div align="right" style="position: relative;top: -40px;float:right;">

and to reduce the gap, use this css code:

nav#main-navigation {
    height: 50px;
}

#5

Yes! That worked :slight_smile: Thank you so much for all your help!


#6

Glad to know if its worked :slight_smile: