[Support request] Add social icons

Home Forums Support [Support request] Add social icons

Home Forums Support Add social icons

Viewing 15 posts - 1 through 15 (of 26 total)
  • Author
    Posts
  • #932835
    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

    #932841
    Leo
    Staff
    Customer Support
    #932848
    Douglas

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

    #932849
    Leo
    Staff
    Customer Support

    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?

    #932853
    Douglas

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

    #932855
    Leo
    Staff
    Customer Support

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

    #932864
    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

    #932884
    Leo
    Staff
    Customer Support

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

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

    #935354
    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.

    #935623
    David
    Staff
    Customer Support

    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.

    #944829
    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.

    #944947
    Tom
    Lead Developer
    Lead Developer

    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;
    }
    #945518
    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.

    #945643
    Tom
    Lead Developer
    Lead Developer

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

    Can you give it another shot?

    #946681
    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!

Viewing 15 posts - 1 through 15 (of 26 total)
  • You must be logged in to reply to this topic.