Aligning Social Media icons

Hi there,

I followed some advice given a few days ago to another user to get these social media icons in my menu, but the CSS code that was given to align them with the menu items won’t work on my website.

I’ve pasted an image of the menu, I would just like to move the social media icons down a tiny bit!

Thanks!

Hi @ismithwords,

I hope you are well today and thank you for your question.

I visited your site but didn’t see any social icons in the header of it as shown in the attached screenshot.

Have you removed it?

If yes then could you please add it again so that i can help you to align them?

Kind Regards,
Movin

Hi @Movin

Thank you so much for replying! I actually just settled with having the social media icons at the bottom of the page so I could launch the blog but I would love to have them at the top where they are seen more easily.

I have moved them back there now so you can see what I’m talking about. I got them there via the custom widget area plugin, and then the widget in menus plugin.

Thanks for your help!

Laura. :slight_smile:

Hi @Movin

Thank you so much for your reply! I actually settled with having them at the bottom just so I could launch the blog, but I would much prefer to have them at the top, so would really appreciate your help in aligning them.

I’ve changed it back now so you can see where they are. I put them there via the custom widget area plugin, and then the shortcode in menus plugin.

Thanks!

Laura :slight_smile:

Hi Laura,

You can try aligning them by adding the following CSS code in the Custom CSS option of your theme on the below path.

Admin Area -> Appearance -> Customize -> Activello Options -> Other -> Custom CSS

#masthead .widget_wpcom_social_media_icons_widget li {
    margin-bottom: 0;
    padding-bottom: 0;
    border: 0;
}
#masthead .widget_wpcom_social_media_icons_widget {
    margin-top: 27px;
}

Best Regards,
Movin

Hi @Movin

You absolute hero that completely worked thank you very much!

I was searching for the answer for such a long time, I guess it took a true pro like you to find it!

I have just another question if you don’t mind…

I would like to now have the email subscription box next to these social icons, just to fill in the gap at the top and have it there rather than at the very bottom of the page. However, when I add it to the custom widget area in the menu it places it rather messily underneath as you can see in the photo I’ve attached. Is there any way of making this smaller so it does sit in line with everything else on that top line?

Thank you!

Laura.

You are most welcome here :slight_smile:

I would like to now have the email subscription box next to these social icons, just to fill in the gap at the top and have it there rather than at the very bottom of the page. However, when I add it to the custom widget area in the menu it places it rather messily underneath as you can see in the photo I’ve attached. Is there any way of making this smaller so it does sit in line with everything else on that top line?

Yes we can make it smaller to fit there but you have to add it gain on your site so that i can test it and provide you the solution.

@Movin, sorry, I should’ve known to do that first! I’ve put it in there now so you can see.

Thanks!

Laura.

You can try achieving this by using the below CSS code.

#masthead .widget_wpcom_social_media_icons_widget,
#masthead .jetpack_subscription_widget,
#masthead .jetpack_subscription_widget #subscribe-submit,
#masthead .jetpack_subscription_widget #subscribe-email {
    float: left;
}
#masthead .jetpack_subscription_widget #subscribe-email {
    max-width: 140px;
}
#masthead .jetpack_subscription_widget #subscribe-submit input {
    padding: 0 10px;
    line-height: 28px;
}

@Movin

Fantastic, that worked, thanks!

Sorry to be a pain but is there something I can put in to align the signup form to the right hand side of the page, just so it doesnt look quite as bunched up and there is more space between the items?

Thanks!

Sorry to be a pain but is there something I can put in to align the signup form to the right hand side of the page, just so it doesnt look quite as bunched up and there is more space between the items?

You can try achieving this by using the following CSS code.

.widget.jetpack_subscription_widget {
    margin-left: 85px;
}