Add Social Icons to Header

SocialVision

Hello BeTheme, I'm using the Stack Left header on my website. Is it possible to add social icons in the space on the right side of the header so that they are in line with the logo? Thank you. 

Bryan

Hi,

Have you got the action bar enabled?

Go to theme options>menu&action bar>action bar

You have to have it enabled to display the icons.

thanks

Learn more: Video Tutorials | How To | FAQ Vote on what comes next

Phasenine

How do you make the action bar transparent while keeping the social icons?

Bryan

Only with custom css, you would dhave to send us a link to your page and what do you want to do.

Learn more: Video Tutorials | How To | FAQ Vote on what comes next

Phasenine

Also the social media links are going to the studiophase9.com/2017/facebook.com/studiophase9, instead of the Facebook.com/studiophase9, double checked the inputed info and it looks correct.

SocialVision

Thanks, Muffin Support. Is there a way to have the social icons in line with the logo? Maybe in lieu of the "Banner" from the Magazine Header layout? 

SocialVision

I see that I can use the list <li> and icon <i> tags like in my footer widget but it's putting them on separate lines in a straight vertical line. Would you happen to have a solution?  

<div style="text-align: center;">

<p class="contact_icons"> <a href="https://www.facebook.com/#/" target="_blank"><i class="icon-facebook"></i></a> <a href="https://www.youtube.com/#" target="_blank"><i class="icon-youtube"></i></a> <a href="https://twitter.com/#" target="_blank"><i class="icon-twitter"></i></a> <a href="https://www.linkedin.com/#" target="_blank"><i class="icon-linkedin"></i></a></p>

</div>

Bryan

@Phasenine Have you entered the full path with http://...

For the transparency use this css

.header-stack #Action_bar {
    background-color: transparent !important;
}

thanks

@SocialVision This is not possible (icons with logo) 

You have to place the elements in <li></li> to have them in one line and send the link to your page so we can have a look.

Learn more: Video Tutorials | How To | FAQ Vote on what comes next

Phasenine

Yes using http://... still not working

Phasenine

Nevemind it works now, thanks!

SocialVision

@MuffinSupport Here's the link. Thank you for looking at it.  

Bryan

You had them display block, you must display inline or inline-block to have them next to each other

.header-magazine #Top_bar .banner_wrapper a {
    display: inline-block !important;
}

Learn more: Video Tutorials | How To | FAQ Vote on what comes next

SocialVision

Perfect!! Thanks so much!