Archived topic
Social Media icons header-right
10 replies · Started by Mateo on September 7, 2021
Hi. I can't find the way to do this. I just want this:
<div class="socialMediaLinks">
<a href="https://twitter.com" class="fab fa-twitter"></a>
<a href="https://facebook.com" class="fab fa-facebook-f"></a>
<a href="https://pinterest.com" class="fab fa-pinterest"></a>
<a href="https://instagram.com" class="fab fa-instagram"></a>
<a href="https://plus.google.com" class="fab fa-google-plus-g"></a>
</div>a the right of the logo.
Here is my css
.socialMediaLinks {
}
.socialMediaLinks a {
font-size: 30px;
margin: 0 20px 0 0;
color: white;
}
.socialMediaLinks a:hover {
color: #673ab7;
}float:right not working. I don't want to try the Lightweight plugin.
Thanks for the help.
Hi there,
Can you link us to the page you're working on? To inspect what CSS the page currently has.
Also, can you provide a mockup of how you want these icons to be laid out? So we have a clearer idea on what CSS writeup to provide.
You can use the private information text field to provide the site details. :D
Thanks, the details in the private section.
Thanks.
Hi there,
where did you add your HTML ?
As the simplest place to add it is in the Header Widget.
Hi. Elements-> Hook-> generate_after_logo
I would add it to a HTML Widget in the Customizer > Widgets > Header Widget.
That will place it in the position you require it.
We may then need a little CSS to change the Mobile header layout.
Done. Now the problem is when the responsive comes to 1056x770, icons overlaps and I want to move it at the bottom of the logo.
Thanks for the help
I set this to now break the page:
@media (max-width: 1050px) {
.socialMediaLinks {
display: none !important;
}
}Hi Mateo,
Can you try to remove these 2 CSS codes?
https://www.screencast.com/t/1gMg1QppDSB
Let me know :)
It work's, thanks for the help!
You are welcome :)
