[Support request] Add social icons

[Douglas]

Two similar questions.

Am looking to add social icons to my staging site on the top black bar over to the right corner of the container.

Am also looking to add a wishlist icon that will link to an internal page on the website. I would like this to be alongside the search and cart icons.

Can someone help

[Leo]

Hi there,

Social icons:
https://wordpress.org/plugins/lightweight-social-icons/

Menu icons:
https://docs.generatepress.com/article/adding-icons-to-menu-items/

Let me know if this helps 🙂

[Douglas]

That’s not the problem.
I have the icons. There’s no widget or menu area there.

[Leo]

It’s tough for me to guess where “top black bar over to the right corner of the container.” is without seeing it.

Any chance you can link me to the site in question?

[Douglas]

My bad I thought I did. http://bke.1a0.myftpupload.com

[Leo]

The top black bar is the top bar widget area:
https://docs.generatepress.com/article/top-bar-widget-area/

[Douglas]

Is there a way we can stop the bar’s height from changing based on the the text and social icons?
Because now it’s blowing up because the icons and causing uneven formatting.
It would be easier to just set the size of the bar at a certain px

[Leo]

Can you add the icons in so I can see the issue?

Setting a fixed height generally isn’t the best solution.

[Douglas]

I have the Twitter up there, but no matter what size I make it, it messes up the whole entire top bar. Also, the alignment is not working. I have it set to right.

[David]

Hi there,

set your LSI icon font to the size you want it, then add this CSS:

.inside-top-bar {
    display: flex;
    justify-content: center;
    align-items: center;
}

.inside-top-bar .widget.widget_text {
    margin-left: auto;
    margin-right: auto;
    transform: translateX(30px);
}

This line transform: translateX(30px); offsets the width of the LSI icon to keep the text centred to the screen. So the 30px will need to be adjusted to suit the width of the LSI.

[Douglas]

I cannot seem to get it right.

I want the wording to be center and social icons to be align right.
The top bar size still keeps adjusting; I need it at a set height.
I want the icons white not grey with less padding.

[Tom]

It looks like you changed up the icons a bit, but if you want to force them to the far right, remove the code David mentioned above and try this:

@media (min-width: 769px) {
    .top-bar .enhanced-text-widget {
        position: absolute;
        right: 0;
        top: 0;
    }
}

.top-bar .social-icons-lists li.social-icons-list-item {
    line-height: 40px;
    margin: 0;
    padding: 0 !important;
}

[Douglas]

Ok so that fixed part of it. The text is in the right place, it’s just the icons. How could we move them into the vertical center of top.bar and the horizontal right of the container above the search icon.

[Tom]

I just adjusted the CSS above: https://generatepress.com/forums/topic/add-social-icons/#post-944947

Can you give it another shot?

[Douglas]

Nice! Almost perfect.
I just want to move the icons to above the search icon in the right corner of the container and change the show color to white if possible.

Thx!

[Author]

Posts