Move Social Icons to Right Side in Header Bar

When I checked the box to remove the search box the social icons moved to the right by default.

How do you have your social icons set up? Are you using a custom menu or just added them under the customize > general > social profiles section?

Hi Erik,

As I was responding to your reply I just figured something out. When I’m in Customize my screen gets smaller and it pushes the social icons to the left (default setting I guess). I didn’t initially realize this. When I checked a full screen they are indeed on the right (yay!) However, now I’d like to know if I can force them to be on the right until the screen size goes down to tablet size. My current settings are:

Customize>Layout>Header>Header Bar Layout: Default. I have the “Show social icons” box checked.

Here’s my site, it’s a work in progress: https://mysisterlovesmovies.com

In your Child Theme or CSS Editor Plugin try this code:

.header-social-links {
    float: right;
}

If your theme has a custom CSS Editor in it, you can also paste the code in there.

We’re getting closer. It works when I’m in Customize and the screen is smaller, but not when I’m out of customize and I”m shrinking my screen (before tablet size). You can try it out. I made the change in my Make-Child style.css file.

By the way, I appreciate your quick replies. Thank you. =)

Ha, it just worked. I had refreshed my screen, but I guess it didn’t take the first time.

Now I’d like to make sure the icons still go to the center (like it did) when the screen is in tablet and phone/mobile size. Would that be a CSS media query with @media at the beginning?

OK, I’m a little confused lol

So on computer you want them to the right?

On a tablet or phone you want them centered?

You’re a gem for sticking with me on this.

Yes, you’ve got that correct. On a full screen right side, tablet/phone centered.

OK,

Remove the code I gave above and try this one.

.header-social-links {
    text-align: center;
}

Hmm, that made it go to the center on all the sizes.

I just tested it on a test page and it worked for me.

I also just tried on my own phone and it shows up centered on there also from your site.

I guess I’m stumped at this point sorry.

I refreshed several times and it still didn’t take for me. I think I’ll just stick with the first bit of code and have it on the right on all sizes.

Really appreciate your help. Have a great day. =)

OK, Sorry

Please mark as resolved.

Thanks

Will do.