Can we add this top-bar to my site?

Hi there,

Try following the steps below:

1. go to appearance > elements, create a new block element, set the element type to hook, and set before_header as the hook name, set the location to entire site.

2. click on the 3 dots icon at the top right corner, click code editor, and paste the code below, then click exit code editor.

<!-- wp:generateblocks/element {"uniqueId":"ff8c003b","tagName":"div","styles":{"paddingTop":".5rem","paddingLeft":"2rem","paddingBottom":".5rem","paddingRight":"2rem","@media (max-width:767px)":{"paddingLeft":"1.5rem","paddingRight":"1.5rem","display":"none"},"backgroundColor":"var(\u002d\u002daccent)","a":{"color":"var(\u002d\u002dbase-3)"},"a:hover":{"color":"var(\u002d\u002daccent-3)"}},"css":".gb-element-ff8c003b{background-color:var(\u002d\u002daccent);padding:.5rem 2rem}.gb-element-ff8c003b a{color:var(\u002d\u002dbase-3)}.gb-element-ff8c003b a:hover{color:var(\u002d\u002daccent-3)}@media (max-width:767px){.gb-element-ff8c003b{display:none;padding-left:1.5rem;padding-right:1.5rem}}","metadata":{"name":"Top bar container"}} -->
<div class="gb-element-ff8c003b"><!-- wp:generateblocks/element {"uniqueId":"3c7cce09","tagName":"div","styles":{"maxWidth":"var(\u002d\u002dgb-container-width)","marginLeft":"auto","marginRight":"auto","display":"flex","alignItems":"center","justifyContent":"space-between","@media (max-width:767px)":{"rowGap":"1rem","columnGap":"1px"},"columnGap":"2em","rowGap":"0.4em"},"css":".gb-element-3c7cce09{align-items:center;column-gap:2em;display:flex;justify-content:space-between;margin-left:auto;margin-right:auto;max-width:var(\u002d\u002dgb-container-width);row-gap:0.4em}@media (max-width:767px){.gb-element-3c7cce09{column-gap:1px;row-gap:1rem}}","globalClasses":["gbp-section__inner"],"metadata":{"name":"Inner container max-width"}} -->
<div class="gbp-section__inner gb-element-3c7cce09"><!-- wp:generateblocks/element {"uniqueId":"65fe31ab","tagName":"div","styles":{"display":"flex","columnGap":"1.5em","rowGap":"0.4em","flexWrap":"wrap"},"css":".gb-element-65fe31ab{column-gap:1.5em;display:flex;flex-wrap:wrap;row-gap:0.4em}"} -->
<div class="gb-element-65fe31ab"><!-- wp:generateblocks/text {"uniqueId":"94c4ef35","tagName":"p","styles":{"marginBottom":"0px","display":"inline-flex","alignItems":"center","columnGap":"0.5em",".gb-shape svg":{"fill":"currentColor"},"fontSize":"0.9rem","fontWeight":"500","color":"var(\u002d\u002dbase-3)"},"css":".gb-text-94c4ef35{align-items:center;color:var(\u002d\u002dbase-3);column-gap:0.5em;display:inline-flex;font-size:0.9rem;font-weight:500;margin-bottom:0px}.gb-text-94c4ef35 .gb-shape svg{fill:currentColor}"} -->
<p class="gb-text-94c4ef35"><span class="gb-shape"><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="M493.4 24.6l-104-24c-11.3-2.6-22.9 3.3-27.5 13.9l-48 112c-4.2 9.8-1.4 21.3 6.9 28l60.6 49.6c-36 76.7-98.9 140.5-177.2 177.2l-49.6-60.6c-6.8-8.3-18.2-11.1-28-6.9l-112 48C3.9 366.5-2 378.1.6 389.4l24 104C27.1 504.2 36.7 512 48 512c256.1 0 464-207.5 464-464 0-11.2-7.7-20.9-18.6-23.4z"></path></svg></span><span class="gb-text"><a href="tel:8885555555">(888) 555-5555</a></span></p>
<!-- /wp:generateblocks/text -->

<!-- wp:generateblocks/text {"uniqueId":"b1652788","tagName":"p","styles":{"marginBottom":"0px","display":"inline-flex","alignItems":"center","columnGap":"0.5em",".gb-shape svg":{"fill":"currentColor"},"fontSize":"0.9rem","fontWeight":"500","color":"var(\u002d\u002dbase-3)"},"css":".gb-text-b1652788{align-items:center;color:var(\u002d\u002dbase-3);column-gap:0.5em;display:inline-flex;font-size:0.9rem;font-weight:500;margin-bottom:0px}.gb-text-b1652788 .gb-shape svg{fill:currentColor}"} -->
<p class="gb-text-b1652788"><span class="gb-shape"><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="M464 64H48C21.49 64 0 85.49 0 112v288c0 26.51 21.49 48 48 48h416c26.51 0 48-21.49 48-48V112c0-26.51-21.49-48-48-48zm0 48v40.805c-22.422 18.259-58.168 46.651-134.587 106.49-16.841 13.247-50.201 45.072-73.413 44.701-23.208.375-56.579-31.459-73.413-44.701C106.18 199.465 70.425 171.067 48 152.805V112h416zM48 400V214.398c22.914 18.251 55.409 43.862 104.938 82.646 21.857 17.205 60.134 55.186 103.062 54.955 42.717.231 80.509-37.199 103.053-54.947 49.528-38.783 82.032-64.401 104.947-82.653V400H48z"></path></svg></span><span class="gb-text"><a href="mailto:[email protected]">[email protected]</a></span></p>
<!-- /wp:generateblocks/text --></div>
<!-- /wp:generateblocks/element -->

<!-- wp:generateblocks/element {"uniqueId":"73c8110a","tagName":"div","styles":{"alignItems":"center","display":"flex","columnGap":"1rem","a":{"color":"var(\u002d\u002dbase-3)"},"a:hover":{"color":"var(\u002d\u002daccent-3)"}},"css":".gb-element-73c8110a{align-items:center;column-gap:1rem;display:flex}.gb-element-73c8110a a{color:var(\u002d\u002dbase-3)}.gb-element-73c8110a a:hover{color:var(\u002d\u002daccent-3)}","metadata":{"name":"Social icons"}} -->
<div class="gb-element-73c8110a"><!-- wp:generateblocks/text {"uniqueId":"9d990ff6","tagName":"a","styles":{"display":"inline-flex","alignItems":"center","columnGap":"0.5em",".gb-shape svg":{"width":"0.9em","height":"0.9em","fill":"currentColor","color":"var(\u002d\u002dbase-3)"},"fontSize":"1.15rem","\u0026:is(:hover, :focus) .gb-shape svg":{"color":"var(\u002d\u002dbase)"}},"css":".gb-text-9d990ff6{align-items:center;column-gap:0.5em;display:inline-flex;font-size:1.15rem}.gb-text-9d990ff6:is(:hover,:focus) .gb-shape svg{color:var(\u002d\u002dbase)}.gb-text-9d990ff6 .gb-shape svg{width:0.9em;height:0.9em;fill:currentColor;color:var(\u002d\u002dbase-3)}","htmlAttributes":{"href":"#","aria-label":"Facebook link"},"iconOnly":true} -->
<a class="gb-text-9d990ff6" href="#" aria-label="Facebook link"><span class="gb-shape"><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="M504 256C504 119 393 8 256 8S8 119 8 256c0 123.78 90.69 226.38 209.25 245V327.69h-63V256h63v-54.64c0-62.15 37-96.48 93.67-96.48 27.14 0 55.52 4.84 55.52 4.84v61h-31.28c-30.8 0-40.41 19.12-40.41 38.73V256h68.78l-11 71.69h-57.78V501C413.31 482.38 504 379.78 504 256z"></path></svg></span></a>
<!-- /wp:generateblocks/text -->

<!-- wp:generateblocks/text {"uniqueId":"8ba18947","tagName":"a","styles":{"display":"inline-flex","alignItems":"center","columnGap":"0.5em",".gb-shape svg":{"width":"0.9em","height":"0.9em","fill":"currentColor","color":"var(\u002d\u002dbase-3)"},"fontSize":"1.15rem","\u0026:is(:hover, :focus) .gb-shape svg":{"color":"var(\u002d\u002dbase)"}},"css":".gb-text-8ba18947{align-items:center;column-gap:0.5em;display:inline-flex;font-size:1.15rem}.gb-text-8ba18947:is(:hover,:focus) .gb-shape svg{color:var(\u002d\u002dbase)}.gb-text-8ba18947 .gb-shape svg{width:0.9em;height:0.9em;fill:currentColor;color:var(\u002d\u002dbase-3)}","htmlAttributes":{"href":"#","aria-label":"Instagram link"},"iconOnly":true} -->
<a class="gb-text-8ba18947" href="#" aria-label="Instagram link"><span class="gb-shape"><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="M224.1 141c-63.6 0-114.9 51.3-114.9 114.9s51.3 114.9 114.9 114.9S339 319.5 339 255.9 287.7 141 224.1 141zm0 189.6c-41.1 0-74.7-33.5-74.7-74.7s33.5-74.7 74.7-74.7 74.7 33.5 74.7 74.7-33.6 74.7-74.7 74.7zm146.4-194.3c0 14.9-12 26.8-26.8 26.8-14.9 0-26.8-12-26.8-26.8s12-26.8 26.8-26.8 26.8 12 26.8 26.8zm76.1 27.2c-1.7-35.9-9.9-67.7-36.2-93.9-26.2-26.2-58-34.4-93.9-36.2-37-2.1-147.9-2.1-184.9 0-35.8 1.7-67.6 9.9-93.9 36.1s-34.4 58-36.2 93.9c-2.1 37-2.1 147.9 0 184.9 1.7 35.9 9.9 67.7 36.2 93.9s58 34.4 93.9 36.2c37 2.1 147.9 2.1 184.9 0 35.9-1.7 67.7-9.9 93.9-36.2 26.2-26.2 34.4-58 36.2-93.9 2.1-37 2.1-147.8 0-184.8zM398.8 388c-7.8 19.6-22.9 34.7-42.6 42.6-29.5 11.7-99.5 9-132.1 9s-102.7 2.6-132.1-9c-19.6-7.8-34.7-22.9-42.6-42.6-11.7-29.5-9-99.5-9-132.1s-2.6-102.7 9-132.1c7.8-19.6 22.9-34.7 42.6-42.6 29.5-11.7 99.5-9 132.1-9s102.7-2.6 132.1 9c19.6 7.8 34.7 22.9 42.6 42.6 11.7 29.5 9 99.5 9 132.1s2.7 102.7-9 132.1z"></path></svg></span></a>
<!-- /wp:generateblocks/text -->

<!-- wp:generateblocks/text {"uniqueId":"668f47ca","tagName":"a","styles":{"display":"inline-flex","alignItems":"center","columnGap":"0.5em",".gb-shape svg":{"width":"0.9em","height":"0.9em","fill":"currentColor","color":"var(\u002d\u002dbase-3)"},"fontSize":"1.15rem","\u0026:is(:hover, :focus) .gb-shape svg":{"color":"var(\u002d\u002dbase)"}},"css":".gb-text-668f47ca{align-items:center;column-gap:0.5em;display:inline-flex;font-size:1.15rem}.gb-text-668f47ca:is(:hover,:focus) .gb-shape svg{color:var(\u002d\u002dbase)}.gb-text-668f47ca .gb-shape svg{width:0.9em;height:0.9em;fill:currentColor;color:var(\u002d\u002dbase-3)}","htmlAttributes":{"href":"#","aria-label":"LinkedIn link"},"iconOnly":true} -->
<a class="gb-text-668f47ca" href="#" aria-label="LinkedIn link"><span class="gb-shape"><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/text -->

<!-- wp:generateblocks/text {"uniqueId":"69836af5","tagName":"a","styles":{"display":"inline-flex","alignItems":"center","columnGap":"0.5em",".gb-shape svg":{"width":"0.9em","height":"0.9em","fill":"currentColor","color":"var(\u002d\u002dbase-3)"},"fontSize":"1.15rem","\u0026:is(:hover, :focus) .gb-shape svg":{"color":"var(\u002d\u002dbase)"}},"css":".gb-text-69836af5{align-items:center;column-gap:0.5em;display:inline-flex;font-size:1.15rem}.gb-text-69836af5:is(:hover,:focus) .gb-shape svg{color:var(\u002d\u002dbase)}.gb-text-69836af5 .gb-shape svg{width:0.9em;height:0.9em;fill:currentColor;color:var(\u002d\u002dbase-3)}","htmlAttributes":{"href":"#","aria-label":"X link"},"iconOnly":true} -->
<a class="gb-text-69836af5" href="#" aria-label="X link"><span class="gb-shape"><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="M389.2 48h70.6L305.6 224.2 487 464H345L233.7 318.6 106.5 464H35.8L200.7 275.5 26.8 48H172.4L272.9 180.9 389.2 48zM364.4 421.8h39.1L151.1 88h-42L364.4 421.8z"></path></svg></span></a>
<!-- /wp:generateblocks/text --></div>
<!-- /wp:generateblocks/element --></div>
<!-- /wp:generateblocks/element --></div>
<!-- /wp:generateblocks/element -->

Let me know if this helps!

You are welcome   🙂