Are you a GenerateCustomer?

Do you have an active GP Premium or GenerateBlocks Pro license key?

Create a GenerateSupport account for GeneratePress and GenerateBlocks support in one dedicated place.

Create an account
Already have a GenerateSupport account? Login

Just browsing?

Feel free to browse the forums. Support for our free versions is provided on WordPress.org (GeneratePress, GenerateBlocks).

Want to become a premium user? Learn more below.

Sticky social icon (stack vertically)

  • Hi there,

    How to add sticky social icons on a desktop like this? https://generatepress.com/site-library/

  • Hi there,

    whats the name of the Site you want to replicate ?

  • No specific site, actually. Today, I’ve copied elements from different sites from site library and made drafts and I’ll apply them according to my need.

  • I wanted to know which site you saw the Sticky icons on 🙂

  • Tmrland from GP Site Library

  • “I wanted to know which site you saw the Sticky icons on”

    It’s Tmrland from GP Site Library

  • OK,

    1. In Appearance > Elements, add new Block Element – Hook.
    2. set the Hook to after_header
    3. Switch the editor to code view and copy paste this code:

    <!-- wp:generateblocks/container {"uniqueId":"853f594e","outerContainer":"contained","containerWidth":50,"minHeightUnit":"vh","isDynamic":true,"blockVersion":3,"display":"flex","flexDirection":"column","position":"relative","zindex":99,"sizing":{"height":"","maxWidth":""},"className":"sticky-social-icons hide-on-mobile shadow-container"} -->
    <!-- wp:generateblocks/button {"uniqueId":"ec09cc4d","hasUrl":true,"ariaLabel":"facebook","blockVersion":3,"display":"inline-flex","alignItems":"center","justifyContent":"center","sizing":{"maxWidth":"50px"},"alignment":"center","paddingTop":"15","paddingRight":"15","paddingBottom":"15","paddingLeft":"15","borderSizeBottom":"1","borderRadiusTopRight":"10","backgroundColor":"var(\u002d\u002daccent-2)","backgroundColorHover":"var(\u002d\u002daccent-4)","textColor":"var(\u002d\u002dbase-3)","textColorHover":"var(\u002d\u002daccent)","borderColor":"var(\u002d\u002dbase-3)","hasIcon":true,"removeText":true} -->
    <a class="gb-button gb-button-ec09cc4d" href="#" aria-label="facebook"><span class="gb-icon"><svg aria-hidden="true" role="img" height="1em" width="1em" viewBox="0 0 320 512" xmlns="http://www.w3.org/2000/svg"><path fill="currentColor" d="M279.14 288l14.22-92.66h-88.91v-60.13c0-25.35 12.42-50.06 52.24-50.06h40.42V6.26S260.43 0 225.36 0c-73.22 0-121.08 44.38-121.08 124.72v70.62H22.89V288h81.39v224h100.17V288z"></path></svg></span></a>
    <!-- /wp:generateblocks/button -->
    
    <!-- wp:generateblocks/button {"uniqueId":"410e850c","hasUrl":true,"ariaLabel":"twitter","blockVersion":3,"display":"inline-flex","alignItems":"center","justifyContent":"center","sizing":{"maxWidth":"50px"},"alignment":"center","paddingTop":"15","paddingRight":"15","paddingBottom":"15","paddingLeft":"15","borderSizeBottom":"1","backgroundColor":"var(\u002d\u002daccent-2)","backgroundColorHover":"var(\u002d\u002daccent-4)","textColor":"var(\u002d\u002dbase-3)","textColorHover":"var(\u002d\u002daccent)","borderColor":"var(\u002d\u002dbase-3)","hasIcon":true,"removeText":true} -->
    <a class="gb-button gb-button-410e850c" href="#" aria-label="twitter"><span class="gb-icon"><svg aria-hidden="true" role="img" height="1em" width="1em" viewBox="0 0 512 512" xmlns="http://www.w3.org/2000/svg"><path fill="currentColor" d="M459.37 151.716c.325 4.548.325 9.097.325 13.645 0 138.72-105.583 298.558-298.558 298.558-59.452 0-114.68-17.219-161.137-47.106 8.447.974 16.568 1.299 25.34 1.299 49.055 0 94.213-16.568 130.274-44.832-46.132-.975-84.792-31.188-98.112-72.772 6.498.974 12.995 1.624 19.818 1.624 9.421 0 18.843-1.3 27.614-3.573-48.081-9.747-84.143-51.98-84.143-102.985v-1.299c13.969 7.797 30.214 12.67 47.431 13.319-28.264-18.843-46.781-51.005-46.781-87.391 0-19.492 5.197-37.36 14.294-52.954 51.655 63.675 129.3 105.258 216.365 109.807-1.624-7.797-2.599-15.918-2.599-24.04 0-57.828 46.782-104.934 104.934-104.934 30.213 0 57.502 12.67 76.67 33.137 23.715-4.548 46.456-13.32 66.599-25.34-7.798 24.366-24.366 44.833-46.132 57.827 21.117-2.273 41.584-8.122 60.426-16.243-14.292 20.791-32.161 39.308-52.628 54.253z"></path></svg></span></a>
    <!-- /wp:generateblocks/button -->
    
    <!-- wp:generateblocks/button {"uniqueId":"6c7bb108","hasUrl":true,"ariaLabel":"youtube","blockVersion":3,"display":"inline-flex","alignItems":"center","justifyContent":"center","sizing":{"maxWidth":"50px"},"alignment":"center","paddingTop":"15","paddingRight":"15","paddingBottom":"15","paddingLeft":"15","borderSizeBottom":"1","backgroundColor":"var(\u002d\u002daccent-2)","backgroundColorHover":"var(\u002d\u002daccent-4)","textColor":"var(\u002d\u002dbase-3)","textColorHover":"var(\u002d\u002daccent)","borderColor":"var(\u002d\u002dbase-3)","hasIcon":true,"removeText":true} -->
    <a class="gb-button gb-button-6c7bb108" href="#" aria-label="youtube"><span class="gb-icon"><svg aria-hidden="true" role="img" height="1em" width="1em" viewBox="0 0 576 512" xmlns="http://www.w3.org/2000/svg"><path fill="currentColor" d="M549.655 124.083c-6.281-23.65-24.787-42.276-48.284-48.597C458.781 64 288 64 288 64S117.22 64 74.629 75.486c-23.497 6.322-42.003 24.947-48.284 48.597-11.412 42.867-11.412 132.305-11.412 132.305s0 89.438 11.412 132.305c6.281 23.65 24.787 41.5 48.284 47.821C117.22 448 288 448 288 448s170.78 0 213.371-11.486c23.497-6.321 42.003-24.171 48.284-47.821 11.412-42.867 11.412-132.305 11.412-132.305s0-89.438-11.412-132.305zm-317.51 213.508V175.185l142.739 81.205-142.739 81.201z"></path></svg></span></a>
    <!-- /wp:generateblocks/button -->
    
    <!-- wp:generateblocks/button {"uniqueId":"cb56544b","hasUrl":true,"ariaLabel":"linkedin","blockVersion":3,"display":"inline-flex","alignItems":"center","justifyContent":"center","sizing":{"maxWidth":"50px"},"alignment":"center","paddingTop":"15","paddingRight":"15","paddingBottom":"15","paddingLeft":"15","borderRadiusBottomRight":"10","backgroundColor":"var(\u002d\u002daccent-2)","backgroundColorHover":"var(\u002d\u002daccent-4)","textColor":"var(\u002d\u002dbase-3)","textColorHover":"var(\u002d\u002daccent)","borderColor":"var(\u002d\u002dbase-3)","hasIcon":true,"removeText":true} -->
    <a class="gb-button gb-button-cb56544b" href="#" aria-label="linkedin"><span class="gb-icon"><svg aria-hidden="true" role="img" height="1em" width="1em" viewBox="0 0 448 512" xmlns="http://www.w3.org/2000/svg"><path fill="currentColor" d="M100.28 448H7.4V148.9h92.88zM53.79 108.1C24.09 108.1 0 83.5 0 53.8a53.79 53.79 0 0 1 107.58 0c0 29.7-24.1 54.3-53.79 54.3zM447.9 448h-92.68V302.4c0-34.7-.7-79.2-48.29-79.2-48.29 0-55.69 37.7-55.69 76.7V448h-92.78V148.9h89.08v40.8h1.3c12.4-23.5 42.69-48.3 87.88-48.3 94 0 111.28 61.9 111.28 142.3V448z"></path></svg></span></a>
    <!-- /wp:generateblocks/button -->
    <!-- /wp:generateblocks/container -->

    3.1 Switch back to visual editor to see the blocks.
    NOTE: The outer container block has several Advanced > Additional CSS Classes which must remain attached.

    4. Set the Display Rules to the Entire Site ( or where you want them ) and Publish the element.

    5. Add this CSS to your site:

    .sticky-social-icons {
         position: fixed;
         left:0;
         top: 30%;
    }
Viewing 7 posts - 1 through 7 (of 7 total)
  • You must be logged in to reply to this topic.