[manual] Build a custom header in Harmony

brazzerstop

Hi everybody,

I'm want show you how to create a custom header with small modification in Harmony theme, like social icons, links, dropdown menu.

Step 1

Edit - https://github.com/NodeBB/nodebb-theme-harmony/blob/main/library.js#L95

Paste this code in library.js after Sidebar Footer code block.

{
name: 'Brand Header',
template: 'global',
location: 'custom-mainheader',
},

Step 2

Edit - https://github.com/NodeBB/nodebb-theme-harmony/blob/main/templates/partials/header/brand.tpl#L16

Paste this code in brand.tpl after div component "brand/wrapper"

{{{ if widgets.custom-mainheader.length }}}
<div data-widget-area="custom-mainheader" class="ms-auto gap-3 p-2 align-self-center">
	{{{each widgets.custom-mainheader}}}
	{{widgets.custom-mainheader.html}}
	{{{end}}}
</div>
{{{ end }}}

Step 3

Rebuild. Now you can add custom html in main header via global widget settings, open /admin/extend/widgets and found Brand Header global/custom-mainheader.

This is example like on screenshots:

<a class="btn btn-outline-primary text-xs position-relative fw-semibold pull-right" href="#" role="button">
<i class="fa-brands fa-twitter fa-lg"></i></a>

<a class="btn btn-outline-primary text-xs position-relative fw-semibold pull-right me-2" href="#" role="button">
<i class="fa-brands fa-github fa-lg"></i></a>
		
<a class="btn btn-outline-primary text-xs position-relative fw-semibold pull-right me-2" href="#" role="button">
<i class="fa-brands fa-discord"></i></a>

<a class="dropdown">
<a class="btn btn-sm btn-primary dropdown-toggle me-2" href="#" role="button" id="dropdownMenuLink" data-bs-toggle="dropdown" aria-expanded="false">Menu</a>

<ul class="dropdown-menu text-xs" aria-labelledby="dropdownMenuLink" style="">
    <li><a class="dropdown-item" href="#">Link 1</a></li>
    <li><a class="dropdown-item" href="#">Link 2</a></li>
    <li><a class="dropdown-item" href="#">Link 3</a></li>
</ul>
</a>

phenomlab

@brazzerstop great, but only issue I can see is that the code provided would be overwritten with subsequent theme updates?

My preferred approach here would be to add the widget code using jQuery or plain JS as an injected div.

<baris>

This looks like a good idea, maybe we can add that widget area into harmony itself, then it won't get overwritten in theme updates.

<baris>

@brazzerstop added into harmony, thanks for the idea
https://github.com/NodeBB/nodebb-theme-harmony/commit/b2879c45cd86c71703b790c727e340edb65de1ea

<baris>

Moved our social links to the new widget header, to match the various other buttons in harmony add btn-ghost to the link. Example :

<a class="btn-ghost p-2" href="https://mysite.com">
  <i style="color: #333;" class="fa fa-2x fa-github-square"></i>
</a>

brazzerstop

@baris said in [manual] Build a custom header in Harmony:

Moved our social links to the new widget header

This is svg icons for one style

Instagram

<svg width="28" height="28" viewBox="0 0 28 28" fill="none" xmlns="http://www.w3.org/2000/svg">
<rect width="28" height="28" rx="3" fill="url(#paint0_radial_72_68)"/>
<rect width="28" height="28" rx="3" fill="url(#paint1_radial_72_68)"/>
<path d="M13.9997 3.81848C11.2346 3.81848 10.8876 3.83057 9.80157 3.87999C8.71766 3.92963 7.9778 4.10123 7.33043 4.35301C6.66078 4.61306 6.09274 4.96093 5.52682 5.52707C4.96047 6.09299 4.6126 6.66103 4.3517 7.33047C4.09928 7.97805 3.92747 8.71812 3.87868 9.8016C3.83011 10.8876 3.81738 11.2349 3.81738 14C3.81738 16.7651 3.82969 17.1111 3.8789 18.1971C3.92874 19.281 4.10034 20.0209 4.35191 20.6682C4.61218 21.3379 4.96005 21.9059 5.52618 22.4719C6.09189 23.0382 6.65993 23.3869 7.32916 23.647C7.97695 23.8988 8.71702 24.0704 9.80072 24.12C10.8867 24.1694 11.2336 24.1815 13.9985 24.1815C16.7638 24.1815 17.1098 24.1694 18.1958 24.12C19.2797 24.0704 20.0204 23.8988 20.6682 23.647C21.3376 23.3869 21.9048 23.0382 22.4705 22.4719C23.0369 21.9059 23.3848 21.3379 23.6457 20.6685C23.896 20.0209 24.0678 19.2808 24.1187 18.1973C24.1675 17.1113 24.1802 16.7651 24.1802 14C24.1802 11.2349 24.1675 10.8878 24.1187 9.80182C24.0678 8.71791 23.896 7.97805 23.6457 7.33068C23.3848 6.66103 23.0369 6.09299 22.4705 5.52707C21.9042 4.96072 21.3379 4.61285 20.6676 4.35301C20.0185 4.10123 19.2782 3.92963 18.1943 3.87999C17.1083 3.83057 16.7625 3.81848 13.9966 3.81848H13.9997ZM13.0864 5.652C13.0864 5.6527 13.0869 5.65327 13.0876 5.65327C13.3584 5.65285 13.6605 5.65327 13.9997 5.65327C16.7182 5.65327 17.0404 5.66303 18.1139 5.71182C19.1066 5.75721 19.6454 5.92308 20.0043 6.06244C20.4794 6.24698 20.8182 6.46758 21.1743 6.82394C21.5307 7.18029 21.7513 7.51967 21.9362 7.99481C22.0756 8.35328 22.2417 8.89206 22.2869 9.88475C22.3356 10.9581 22.3462 11.2805 22.3462 13.9977C22.3462 16.7148 22.3356 17.0373 22.2869 18.1106C22.2415 19.1033 22.0756 19.642 21.9362 20.0005C21.7517 20.4756 21.5307 20.814 21.1743 21.1701C20.818 21.5265 20.4796 21.7471 20.0043 21.9316C19.6458 22.0716 19.1066 22.237 18.1139 22.2824C17.0406 22.3312 16.7182 22.3418 13.9997 22.3418C11.2811 22.3418 10.9589 22.3312 9.88556 22.2824C8.89287 22.2366 8.35409 22.0707 7.99498 21.9314C7.51985 21.7468 7.18046 21.5262 6.82411 21.1699C6.46776 20.8135 6.24716 20.475 6.06219 19.9997C5.92283 19.6412 5.75675 19.1024 5.71157 18.1097C5.66278 17.0364 5.65302 16.714 5.65302 13.9951C5.65302 11.2762 5.66278 10.9555 5.71157 9.88221C5.75696 8.88951 5.92283 8.35074 6.06219 7.99184C6.24673 7.5167 6.46776 7.17732 6.82411 6.82097C7.18046 6.46461 7.51985 6.24401 7.99498 6.05905C8.35388 5.91905 8.89287 5.7536 9.88556 5.708C10.8246 5.66559 11.1886 5.65286 13.0851 5.65073C13.0858 5.65073 13.0864 5.6513 13.0864 5.652V5.652ZM19.4345 7.34362C19.4345 7.34373 19.4345 7.34383 19.4343 7.34383C18.7599 7.34394 18.2128 7.89052 18.2128 8.56519C18.2128 9.23971 18.76 9.78697 19.4345 9.78697C20.1091 9.78697 20.6563 9.23971 20.6563 8.56519C20.6563 7.89073 20.1092 7.34352 19.4348 7.34341C19.4346 7.34341 19.4345 7.3435 19.4345 7.34362V7.34362ZM13.9997 8.77136C11.1122 8.77136 8.77111 11.1125 8.77111 14C8.77111 16.8875 11.1122 19.2276 13.9997 19.2276C16.8873 19.2276 19.2275 16.8875 19.2275 14C19.2275 11.1125 16.8873 8.77136 13.9997 8.77136ZM13.9997 10.6062C15.874 10.6062 17.3936 12.1255 17.3936 14C17.3936 15.8742 15.874 17.3938 13.9997 17.3938C12.1253 17.3938 10.6059 15.8742 10.6059 14C10.6059 12.1255 12.1253 10.6062 13.9997 10.6062Z" fill="white"/>
<defs>
<radialGradient id="paint0_radial_72_68" cx="0" cy="0" r="1" gradientUnits="userSpaceOnUse" gradientTransform="translate(7.43754 30.1566) rotate(-90) scale(27.7501 25.8097)">
<stop stop-color="#FFDD55"/>
<stop offset="0.1" stop-color="#FFDD55"/>
<stop offset="0.5" stop-color="#FF543E"/>
<stop offset="1" stop-color="#C837AB"/>
</radialGradient>
<radialGradient id="paint1_radial_72_68" cx="0" cy="0" r="1" gradientUnits="userSpaceOnUse" gradientTransform="translate(-4.69015 2.01707) rotate(78.6806) scale(12.4044 51.1314)">
<stop stop-color="#3771C8"/>
<stop offset="0.128" stop-color="#3771C8"/>
<stop offset="1" stop-color="#6600FF" stop-opacity="0"/>
</radialGradient>
</defs>
</svg>

Discord

<svg width="28" height="28" viewBox="0 0 28 28" fill="none" xmlns="http://www.w3.org/2000/svg">
<rect width="28" height="28" rx="3" fill="#5865F2"/>
<path d="M20.9735 7.76376C19.6755 7.19425 18.2836 6.77465 16.8282 6.53433C16.8017 6.5297 16.7752 6.54129 16.7616 6.56447V6.56447C16.4203 7.14498 15.7857 7.50514 15.1141 7.45524C14.3137 7.39576 13.5165 7.39523 12.7245 7.45366C12.0522 7.50325 11.4082 7.14489 11.0654 6.56447V6.56447C11.0518 6.54206 11.0253 6.53047 10.9988 6.53433C9.54423 6.77388 8.1523 7.19348 6.85348 7.76376C6.84224 7.7684 6.8326 7.77613 6.8262 7.78617C4.18601 11.5579 3.46275 15.237 3.81756 18.8704C3.81916 18.8881 3.8296 18.9052 3.84405 18.916C5.58597 20.1392 7.27332 20.8818 8.92934 21.374C8.95584 21.3818 8.98393 21.3725 9.00079 21.3516C9.39252 20.8401 9.74172 20.3007 10.0411 19.7335C10.0588 19.7003 10.0419 19.6609 10.0058 19.6477C9.45193 19.4468 8.92452 19.2019 8.4172 18.9237C8.37707 18.9013 8.37385 18.8464 8.41077 18.8201C8.51753 18.7436 8.62432 18.664 8.72626 18.5837C8.7447 18.569 8.7704 18.5659 8.79209 18.5752C12.125 20.0303 15.7333 20.0303 19.0269 18.5752C19.0486 18.5651 19.0743 18.5682 19.0935 18.5829C19.1955 18.6633 19.3022 18.7436 19.4098 18.8201C19.4467 18.8464 19.4443 18.9013 19.4042 18.9237C18.8969 19.2073 18.3694 19.4468 17.8148 19.647C17.7787 19.6601 17.7626 19.7003 17.7803 19.7335C18.0861 20.2999 18.4353 20.8393 18.8198 21.3509C18.8358 21.3725 18.8647 21.3818 18.8912 21.374C20.5553 20.8818 22.2426 20.1392 23.9845 18.916C23.9998 18.9052 24.0094 18.8889 24.011 18.8711C24.4357 14.6705 23.2998 11.0216 21 7.78694C20.9944 7.77613 20.9848 7.7684 20.9735 7.76376ZM10.5388 16.658C9.5354 16.658 8.70859 15.7771 8.70859 14.6952C8.70859 13.6134 9.51936 12.7325 10.5388 12.7325C11.5663 12.7325 12.3851 13.6211 12.369 14.6952C12.369 15.7771 11.5583 16.658 10.5388 16.658ZM17.3058 16.658C16.3024 16.658 15.4756 15.7771 15.4756 14.6952C15.4756 13.6134 16.2864 12.7325 17.3058 12.7325C18.3333 12.7325 19.1521 13.6211 19.1361 14.6952C19.1361 15.7771 18.3333 16.658 17.3058 16.658Z" fill="white"/>
</svg>

DownPW

I like button menu
Test that ASAP

DownPW

@baris
I don't see any brand widget header on the list ?
Harmony is up to date

EDIT:

oh shame

it's just custom HTML widget here :

![Salame Stickyfumblings GIF]

DownPW

Possible to align the menu button and new SVG icons ?

phenomlab

@DownPW Yes, but you'll need to use the below (example) code to do that

<div data-widget-area="brand-header" class="ms-auto gap-3 p-2 align-self-center">
	<div class="text-center d-none d-md-flex gap-1">   
    <a class="btn-ghost p-2" href="https://github.com/phenomlab" rel="noreferrer noopener"><i style="color: #333;background: #ffffff" class="fa fa-2x fa-github-square"></i></a>
    <a class="btn-ghost p-2" href="https://linkedin.com/in/phenomlab" rel="noreferrer noopener"><i style="color: #0077B5;background: #ffffff" class="fa fa-2x fa-brands fa-linkedin-square"></i></a>
    <a class="btn-ghost p-2" href="https://twitter.com/phenomlab" rel="noreferrer noopener"><i style="color: #1DA1F2;background: #ffffff" class="fa fa-2x fa-twitter-square"></i></a>
    <a class="btn-ghost p-2" href="https://www.facebook.com/sudonixtech" rel="noreferrer noopener"><i style="color: #4268B2;background: #ffffff" class="fa fa-2x fa-facebook-square"></i></a>
    <a class="btn-ghost p-2" href="https://www.youtube.com/@sudonixtech" rel="noreferrer noopener"><i style="color: #DD2626;background: #ffffff" class="fa fa-2x fa-brands fa-square-youtube"></i></a>
        </div>	
	</div>

Obviously, remove the inline styles and URL's to social networks etc - this is me experimenting with code

DownPW

yep @phenomlab but I will to align Blue Button Menu with social icons

phenomlab

@DownPW I have working code for that also....

DownPW

I take it @phenomlab

phenomlab

@DownPW pm me on Sudonix.

brazzerstop

@DownPW Try this

<div class="text-center d-none d-lg-flex gap-1">

<div class="btn-group p-2" role="group">
<button id="BtnGroupDropdown" type="button" class="btn btn-sm btn-primary dropdown-toggle pe-3 ps-3 border-0" data-bs-toggle="dropdown" aria-expanded="false">Menu</button>

<ul class="dropdown-menu">
  <li><a class="dropdown-item" href="#">Link 1</a></li>
  <li><a class="dropdown-item" href="#">Link 2</a></li>
  <li><a class="dropdown-item" href="#">Link 3</a></li>
</ul>
</div>

<a class="btn-ghost p-2" href="#" rel="noreferrer noopener"><i style="color: #333;" class="fa fa-2x fa-github-square"></i></a>

<a class="btn-ghost p-2" href="#" rel="noreferrer noopener"><i style="color: #1DA1F2;" class="fa fa-2x fa-twitter-square"></i></a>

<a class="btn-ghost p-2" href="#" rel="noreferrer noopener"><i style="color: #4267B2;" class="fa fa-2x fa-facebook-square"></i></a>

<a class="btn-ghost p-2" href="#" rel="noreferrer noopener">
<svg width="28" height="28" viewBox="0 0 28 28" fill="none" xmlns="http://www.w3.org/2000/svg">
        <rect width="28" height="28" rx="3" fill="url(#paint0_radial_72_68)"></rect>
        <rect width="28" height="28" rx="3" fill="url(#paint1_radial_72_68)"></rect>
        <path d="M13.9997 3.81848C11.2346 3.81848 10.8876 3.83057 9.80157 3.87999C8.71766 3.92963 7.9778 4.10123 7.33043 4.35301C6.66078 4.61306 6.09274 4.96093 5.52682 5.52707C4.96047 6.09299 4.6126 6.66103 4.3517 7.33047C4.09928 7.97805 3.92747 8.71812 3.87868 9.8016C3.83011 10.8876 3.81738 11.2349 3.81738 14C3.81738 16.7651 3.82969 17.1111 3.8789 18.1971C3.92874 19.281 4.10034 20.0209 4.35191 20.6682C4.61218 21.3379 4.96005 21.9059 5.52618 22.4719C6.09189 23.0382 6.65993 23.3869 7.32916 23.647C7.97695 23.8988 8.71702 24.0704 9.80072 24.12C10.8867 24.1694 11.2336 24.1815 13.9985 24.1815C16.7638 24.1815 17.1098 24.1694 18.1958 24.12C19.2797 24.0704 20.0204 23.8988 20.6682 23.647C21.3376 23.3869 21.9048 23.0382 22.4705 22.4719C23.0369 21.9059 23.3848 21.3379 23.6457 20.6685C23.896 20.0209 24.0678 19.2808 24.1187 18.1973C24.1675 17.1113 24.1802 16.7651 24.1802 14C24.1802 11.2349 24.1675 10.8878 24.1187 9.80182C24.0678 8.71791 23.896 7.97805 23.6457 7.33068C23.3848 6.66103 23.0369 6.09299 22.4705 5.52707C21.9042 4.96072 21.3379 4.61285 20.6676 4.35301C20.0185 4.10123 19.2782 3.92963 18.1943 3.87999C17.1083 3.83057 16.7625 3.81848 13.9966 3.81848H13.9997ZM13.0864 5.652C13.0864 5.6527 13.0869 5.65327 13.0876 5.65327C13.3584 5.65285 13.6605 5.65327 13.9997 5.65327C16.7182 5.65327 17.0404 5.66303 18.1139 5.71182C19.1066 5.75721 19.6454 5.92308 20.0043 6.06244C20.4794 6.24698 20.8182 6.46758 21.1743 6.82394C21.5307 7.18029 21.7513 7.51967 21.9362 7.99481C22.0756 8.35328 22.2417 8.89206 22.2869 9.88475C22.3356 10.9581 22.3462 11.2805 22.3462 13.9977C22.3462 16.7148 22.3356 17.0373 22.2869 18.1106C22.2415 19.1033 22.0756 19.642 21.9362 20.0005C21.7517 20.4756 21.5307 20.814 21.1743 21.1701C20.818 21.5265 20.4796 21.7471 20.0043 21.9316C19.6458 22.0716 19.1066 22.237 18.1139 22.2824C17.0406 22.3312 16.7182 22.3418 13.9997 22.3418C11.2811 22.3418 10.9589 22.3312 9.88556 22.2824C8.89287 22.2366 8.35409 22.0707 7.99498 21.9314C7.51985 21.7468 7.18046 21.5262 6.82411 21.1699C6.46776 20.8135 6.24716 20.475 6.06219 19.9997C5.92283 19.6412 5.75675 19.1024 5.71157 18.1097C5.66278 17.0364 5.65302 16.714 5.65302 13.9951C5.65302 11.2762 5.66278 10.9555 5.71157 9.88221C5.75696 8.88951 5.92283 8.35074 6.06219 7.99184C6.24673 7.5167 6.46776 7.17732 6.82411 6.82097C7.18046 6.46461 7.51985 6.24401 7.99498 6.05905C8.35388 5.91905 8.89287 5.7536 9.88556 5.708C10.8246 5.66559 11.1886 5.65286 13.0851 5.65073C13.0858 5.65073 13.0864 5.6513 13.0864 5.652V5.652ZM19.4345 7.34362C19.4345 7.34373 19.4345 7.34383 19.4343 7.34383C18.7599 7.34394 18.2128 7.89052 18.2128 8.56519C18.2128 9.23971 18.76 9.78697 19.4345 9.78697C20.1091 9.78697 20.6563 9.23971 20.6563 8.56519C20.6563 7.89073 20.1092 7.34352 19.4348 7.34341C19.4346 7.34341 19.4345 7.3435 19.4345 7.34362V7.34362ZM13.9997 8.77136C11.1122 8.77136 8.77111 11.1125 8.77111 14C8.77111 16.8875 11.1122 19.2276 13.9997 19.2276C16.8873 19.2276 19.2275 16.8875 19.2275 14C19.2275 11.1125 16.8873 8.77136 13.9997 8.77136ZM13.9997 10.6062C15.874 10.6062 17.3936 12.1255 17.3936 14C17.3936 15.8742 15.874 17.3938 13.9997 17.3938C12.1253 17.3938 10.6059 15.8742 10.6059 14C10.6059 12.1255 12.1253 10.6062 13.9997 10.6062Z" fill="white"></path>
        <defs>
        <radialGradient id="paint0_radial_72_68" cx="0" cy="0" r="1" gradientUnits="userSpaceOnUse" gradientTransform="translate(7.43754 30.1566) rotate(-90) scale(27.7501 25.8097)">
        <stop stop-color="#FFDD55"></stop>
        <stop offset="0.1" stop-color="#FFDD55"></stop>
        <stop offset="0.5" stop-color="#FF543E"></stop>
        <stop offset="1" stop-color="#C837AB"></stop>
        </radialGradient>
        <radialGradient id="paint1_radial_72_68" cx="0" cy="0" r="1" gradientUnits="userSpaceOnUse" gradientTransform="translate(-4.69015 2.01707) rotate(78.6806) scale(12.4044 51.1314)">
        <stop stop-color="#3771C8"></stop>
        <stop offset="0.128" stop-color="#3771C8"></stop>
        <stop offset="1" stop-color="#6600FF" stop-opacity="0"></stop>
        </radialGradient>
        </defs>
        </svg></a>

<a class="btn-ghost p-2" href="#" rel="noreferrer noopener">
<svg width="28" height="28" viewBox="0 0 28 28" fill="none" xmlns="http://www.w3.org/2000/svg">
        <rect width="28" height="28" rx="3" fill="#5865F2"></rect>
        <path d="M20.9735 7.76376C19.6755 7.19425 18.2836 6.77465 16.8282 6.53433C16.8017 6.5297 16.7752 6.54129 16.7616 6.56447V6.56447C16.4203 7.14498 15.7857 7.50514 15.1141 7.45524C14.3137 7.39576 13.5165 7.39523 12.7245 7.45366C12.0522 7.50325 11.4082 7.14489 11.0654 6.56447V6.56447C11.0518 6.54206 11.0253 6.53047 10.9988 6.53433C9.54423 6.77388 8.1523 7.19348 6.85348 7.76376C6.84224 7.7684 6.8326 7.77613 6.8262 7.78617C4.18601 11.5579 3.46275 15.237 3.81756 18.8704C3.81916 18.8881 3.8296 18.9052 3.84405 18.916C5.58597 20.1392 7.27332 20.8818 8.92934 21.374C8.95584 21.3818 8.98393 21.3725 9.00079 21.3516C9.39252 20.8401 9.74172 20.3007 10.0411 19.7335C10.0588 19.7003 10.0419 19.6609 10.0058 19.6477C9.45193 19.4468 8.92452 19.2019 8.4172 18.9237C8.37707 18.9013 8.37385 18.8464 8.41077 18.8201C8.51753 18.7436 8.62432 18.664 8.72626 18.5837C8.7447 18.569 8.7704 18.5659 8.79209 18.5752C12.125 20.0303 15.7333 20.0303 19.0269 18.5752C19.0486 18.5651 19.0743 18.5682 19.0935 18.5829C19.1955 18.6633 19.3022 18.7436 19.4098 18.8201C19.4467 18.8464 19.4443 18.9013 19.4042 18.9237C18.8969 19.2073 18.3694 19.4468 17.8148 19.647C17.7787 19.6601 17.7626 19.7003 17.7803 19.7335C18.0861 20.2999 18.4353 20.8393 18.8198 21.3509C18.8358 21.3725 18.8647 21.3818 18.8912 21.374C20.5553 20.8818 22.2426 20.1392 23.9845 18.916C23.9998 18.9052 24.0094 18.8889 24.011 18.8711C24.4357 14.6705 23.2998 11.0216 21 7.78694C20.9944 7.77613 20.9848 7.7684 20.9735 7.76376ZM10.5388 16.658C9.5354 16.658 8.70859 15.7771 8.70859 14.6952C8.70859 13.6134 9.51936 12.7325 10.5388 12.7325C11.5663 12.7325 12.3851 13.6211 12.369 14.6952C12.369 15.7771 11.5583 16.658 10.5388 16.658ZM17.3058 16.658C16.3024 16.658 15.4756 15.7771 15.4756 14.6952C15.4756 13.6134 16.2864 12.7325 17.3058 12.7325C18.3333 12.7325 19.1521 13.6211 19.1361 14.6952C19.1361 15.7771 18.3333 16.658 17.3058 16.658Z" fill="white"></path></svg></a>
</div>

DownPW

Thanks dude

<baris>

For those using this widget area, I made a small change in harmony here https://github.com/NodeBB/nodebb-theme-harmony/commit/dd3eda3a16b0eb9114814b4422d1a61a1aba36fe so the widget fills the whole available space. If you are using this widget area to display icons and still want them to be aligned to the right just add a justify-content-end class to your container.

brazzerstop

Maybe this will look better?

Vote button (blue heart)

<svg width="150" height="28" viewBox="0 0 150 28" fill="none" xmlns="http://www.w3.org/2000/svg">
<path d="M43.1457 9.926L39.8177 19H37.6077L34.2797 9.926H36.2297L38.7257 17.141L41.2087 9.926H43.1457ZM47.4348 19.117C46.7415 19.117 46.1175 18.9653 45.5628 18.662C45.0082 18.35 44.5705 17.9123 44.2498 17.349C43.9378 16.7857 43.7818 16.1357 43.7818 15.399C43.7818 14.6623 43.9422 14.0123 44.2628 13.449C44.5922 12.8857 45.0385 12.4523 45.6018 12.149C46.1652 11.837 46.7935 11.681 47.4868 11.681C48.1802 11.681 48.8085 11.837 49.3718 12.149C49.9352 12.4523 50.3772 12.8857 50.6978 13.449C51.0272 14.0123 51.1918 14.6623 51.1918 15.399C51.1918 16.1357 51.0228 16.7857 50.6848 17.349C50.3555 17.9123 49.9048 18.35 49.3328 18.662C48.7695 18.9653 48.1368 19.117 47.4348 19.117ZM47.4348 17.531C47.7642 17.531 48.0718 17.453 48.3578 17.297C48.6525 17.1323 48.8865 16.8897 49.0598 16.569C49.2332 16.2483 49.3198 15.8583 49.3198 15.399C49.3198 14.7143 49.1378 14.19 48.7738 13.826C48.4185 13.4533 47.9808 13.267 47.4608 13.267C46.9408 13.267 46.5032 13.4533 46.1478 13.826C45.8012 14.19 45.6278 14.7143 45.6278 15.399C45.6278 16.0837 45.7968 16.6123 46.1348 16.985C46.4815 17.349 46.9148 17.531 47.4348 17.531ZM54.6459 13.293V16.777C54.6459 17.0197 54.7022 17.1973 54.8149 17.31C54.9362 17.414 55.1355 17.466 55.4129 17.466H56.2579V19H55.1139C53.5799 19 52.8129 18.2547 52.8129 16.764V13.293H51.9549V11.798H52.8129V10.017H54.6459V11.798H56.2579V13.293H54.6459ZM64.2619 15.243C64.2619 15.503 64.2446 15.737 64.2099 15.945H58.9449C58.9883 16.465 59.1703 16.8723 59.4909 17.167C59.8116 17.4617 60.2059 17.609 60.6739 17.609C61.3499 17.609 61.8309 17.3187 62.1169 16.738H64.0799C63.8719 17.4313 63.4733 18.0033 62.8839 18.454C62.2946 18.896 61.5709 19.117 60.7129 19.117C60.0196 19.117 59.3956 18.9653 58.8409 18.662C58.2949 18.35 57.8659 17.9123 57.5539 17.349C57.2506 16.7857 57.0989 16.1357 57.0989 15.399C57.0989 14.6537 57.2506 13.9993 57.5539 13.436C57.8573 12.8727 58.2819 12.4393 58.8279 12.136C59.3739 11.8327 60.0023 11.681 60.7129 11.681C61.3976 11.681 62.0086 11.8283 62.5459 12.123C63.0919 12.4177 63.5123 12.838 63.8069 13.384C64.1103 13.9213 64.2619 14.541 64.2619 15.243ZM62.3769 14.723C62.3683 14.255 62.1993 13.8823 61.8699 13.605C61.5406 13.319 61.1376 13.176 60.6609 13.176C60.2103 13.176 59.8289 13.3147 59.5169 13.592C59.2136 13.8607 59.0273 14.2377 58.9579 14.723H62.3769ZM71.99 13.293H70.729V19H68.883V13.293H68.064V11.798H68.883V11.434C68.883 10.55 69.1343 9.9 69.637 9.484C70.1397 9.068 70.898 8.873 71.912 8.899V10.433C71.47 10.4243 71.1623 10.498 70.989 10.654C70.8157 10.81 70.729 11.0917 70.729 11.499V11.798H71.99V13.293ZM76.3675 19.117C75.6741 19.117 75.0501 18.9653 74.4955 18.662C73.9408 18.35 73.5031 17.9123 73.1825 17.349C72.8705 16.7857 72.7145 16.1357 72.7145 15.399C72.7145 14.6623 72.8748 14.0123 73.1955 13.449C73.5248 12.8857 73.9711 12.4523 74.5345 12.149C75.0978 11.837 75.7261 11.681 76.4195 11.681C77.1128 11.681 77.7411 11.837 78.3045 12.149C78.8678 12.4523 79.3098 12.8857 79.6305 13.449C79.9598 14.0123 80.1245 14.6623 80.1245 15.399C80.1245 16.1357 79.9555 16.7857 79.6175 17.349C79.2881 17.9123 78.8375 18.35 78.2655 18.662C77.7021 18.9653 77.0695 19.117 76.3675 19.117ZM76.3675 17.531C76.6968 17.531 77.0045 17.453 77.2905 17.297C77.5851 17.1323 77.8191 16.8897 77.9925 16.569C78.1658 16.2483 78.2525 15.8583 78.2525 15.399C78.2525 14.7143 78.0705 14.19 77.7065 13.826C77.3511 13.4533 76.9135 13.267 76.3935 13.267C75.8735 13.267 75.4358 13.4533 75.0805 13.826C74.7338 14.19 74.5605 14.7143 74.5605 15.399C74.5605 16.0837 74.7295 16.6123 75.0675 16.985C75.4141 17.349 75.8475 17.531 76.3675 17.531ZM83.2795 12.916C83.5135 12.5347 83.8168 12.2357 84.1895 12.019C84.5708 11.8023 85.0042 11.694 85.4895 11.694V13.605H85.0085C84.4365 13.605 84.0032 13.7393 83.7085 14.008C83.4225 14.2767 83.2795 14.7447 83.2795 15.412V19H81.4595V11.798H83.2795V12.916ZM97.574 19H95.754L91.633 12.773V19H89.813V9.913H91.633L95.754 16.153V9.913H97.574V19ZM102.571 19.117C101.877 19.117 101.253 18.9653 100.699 18.662C100.144 18.35 99.7063 17.9123 99.3856 17.349C99.0736 16.7857 98.9176 16.1357 98.9176 15.399C98.9176 14.6623 99.0779 14.0123 99.3986 13.449C99.7279 12.8857 100.174 12.4523 100.738 12.149C101.301 11.837 101.929 11.681 102.623 11.681C103.316 11.681 103.944 11.837 104.508 12.149C105.071 12.4523 105.513 12.8857 105.834 13.449C106.163 14.0123 106.328 14.6623 106.328 15.399C106.328 16.1357 106.159 16.7857 105.821 17.349C105.491 17.9123 105.041 18.35 104.469 18.662C103.905 18.9653 103.273 19.117 102.571 19.117ZM102.571 17.531C102.9 17.531 103.208 17.453 103.494 17.297C103.788 17.1323 104.022 16.8897 104.196 16.569C104.369 16.2483 104.456 15.8583 104.456 15.399C104.456 14.7143 104.274 14.19 103.91 13.826C103.554 13.4533 103.117 13.267 102.597 13.267C102.077 13.267 101.639 13.4533 101.284 13.826C100.937 14.19 100.764 14.7143 100.764 15.399C100.764 16.0837 100.933 16.6123 101.271 16.985C101.617 17.349 102.051 17.531 102.571 17.531ZM107.195 15.373C107.195 14.645 107.338 13.9993 107.624 13.436C107.918 12.8727 108.317 12.4393 108.82 12.136C109.322 11.8327 109.881 11.681 110.497 11.681C110.965 11.681 111.411 11.785 111.836 11.993C112.26 12.1923 112.598 12.461 112.85 12.799V9.38H114.696V19H112.85V17.934C112.624 18.2893 112.308 18.5753 111.901 18.792C111.493 19.0087 111.021 19.117 110.484 19.117C109.877 19.117 109.322 18.961 108.82 18.649C108.317 18.337 107.918 17.8993 107.624 17.336C107.338 16.764 107.195 16.1097 107.195 15.373ZM112.863 15.399C112.863 14.957 112.776 14.58 112.603 14.268C112.429 13.9473 112.195 13.7047 111.901 13.54C111.606 13.3667 111.29 13.28 110.952 13.28C110.614 13.28 110.302 13.3623 110.016 13.527C109.73 13.6917 109.496 13.9343 109.314 14.255C109.14 14.567 109.054 14.9397 109.054 15.373C109.054 15.8063 109.14 16.1877 109.314 16.517C109.496 16.8377 109.73 17.0847 110.016 17.258C110.31 17.4313 110.622 17.518 110.952 17.518C111.29 17.518 111.606 17.4357 111.901 17.271C112.195 17.0977 112.429 16.855 112.603 16.543C112.776 16.2223 112.863 15.841 112.863 15.399ZM123.168 15.243C123.168 15.503 123.151 15.737 123.116 15.945H117.851C117.895 16.465 118.077 16.8723 118.397 17.167C118.718 17.4617 119.112 17.609 119.58 17.609C120.256 17.609 120.737 17.3187 121.023 16.738H122.986C122.778 17.4313 122.38 18.0033 121.79 18.454C121.201 18.896 120.477 19.117 119.619 19.117C118.926 19.117 118.302 18.9653 117.747 18.662C117.201 18.35 116.772 17.9123 116.46 17.349C116.157 16.7857 116.005 16.1357 116.005 15.399C116.005 14.6537 116.157 13.9993 116.46 13.436C116.764 12.8727 117.188 12.4393 117.734 12.136C118.28 11.8327 118.909 11.681 119.619 11.681C120.304 11.681 120.915 11.8283 121.452 12.123C121.998 12.4177 122.419 12.838 122.713 13.384C123.017 13.9213 123.168 14.541 123.168 15.243ZM121.283 14.723C121.275 14.255 121.106 13.8823 120.776 13.605C120.447 13.319 120.044 13.176 119.567 13.176C119.117 13.176 118.735 13.3147 118.423 13.592C118.12 13.8607 117.934 14.2377 117.864 14.723H121.283ZM129.645 14.346C130.156 14.4413 130.576 14.697 130.906 15.113C131.235 15.529 131.4 16.0057 131.4 16.543C131.4 17.0283 131.278 17.4573 131.036 17.83C130.802 18.194 130.459 18.48 130.009 18.688C129.558 18.896 129.025 19 128.41 19H124.497V9.926H128.241C128.856 9.926 129.385 10.0257 129.827 10.225C130.277 10.4243 130.615 10.7017 130.841 11.057C131.075 11.4123 131.192 11.8153 131.192 12.266C131.192 12.7947 131.049 13.2367 130.763 13.592C130.485 13.9473 130.113 14.1987 129.645 14.346ZM126.317 13.67H127.981C128.414 13.67 128.748 13.5747 128.982 13.384C129.216 13.1847 129.333 12.903 129.333 12.539C129.333 12.175 129.216 11.8933 128.982 11.694C128.748 11.4947 128.414 11.395 127.981 11.395H126.317V13.67ZM128.15 17.518C128.592 17.518 128.934 17.414 129.177 17.206C129.428 16.998 129.554 16.7033 129.554 16.322C129.554 15.932 129.424 15.6287 129.164 15.412C128.904 15.1867 128.553 15.074 128.111 15.074H126.317V17.518H128.15ZM137.998 14.346C138.509 14.4413 138.93 14.697 139.259 15.113C139.588 15.529 139.753 16.0057 139.753 16.543C139.753 17.0283 139.632 17.4573 139.389 17.83C139.155 18.194 138.813 18.48 138.362 18.688C137.911 18.896 137.378 19 136.763 19H132.85V9.926H136.594C137.209 9.926 137.738 10.0257 138.18 10.225C138.631 10.4243 138.969 10.7017 139.194 11.057C139.428 11.4123 139.545 11.8153 139.545 12.266C139.545 12.7947 139.402 13.2367 139.116 13.592C138.839 13.9473 138.466 14.1987 137.998 14.346ZM134.67 13.67H136.334C136.767 13.67 137.101 13.5747 137.335 13.384C137.569 13.1847 137.686 12.903 137.686 12.539C137.686 12.175 137.569 11.8933 137.335 11.694C137.101 11.4947 136.767 11.395 136.334 11.395H134.67V13.67ZM136.503 17.518C136.945 17.518 137.287 17.414 137.53 17.206C137.781 16.998 137.907 16.7033 137.907 16.322C137.907 15.932 137.777 15.6287 137.517 15.412C137.257 15.1867 136.906 15.074 136.464 15.074H134.67V17.518H136.503ZM143.557 9.77L143.349 16.049H141.815L141.594 9.77H143.557ZM142.621 19.091C142.291 19.091 142.018 18.9913 141.802 18.792C141.594 18.584 141.49 18.3283 141.49 18.025C141.49 17.7217 141.594 17.4703 141.802 17.271C142.018 17.063 142.291 16.959 142.621 16.959C142.941 16.959 143.206 17.063 143.414 17.271C143.622 17.4703 143.726 17.7217 143.726 18.025C143.726 18.3283 143.622 18.584 143.414 18.792C143.206 18.9913 142.941 19.091 142.621 19.091Z" fill="#212529"/>
<path d="M6.95234 15.3211L14.3639 22.2405C14.6715 22.5276 15.0775 22.6875 15.5 22.6875C15.9225 22.6875 16.3285 22.5276 16.6361 22.2405L24.0477 15.3211C25.2945 14.1604 26 12.5321 26 10.8299V10.592C26 7.72504 23.9287 5.28051 21.1027 4.80883C19.2324 4.49711 17.3293 5.10824 15.9922 6.44535L15.5 6.93754L15.0078 6.44535C13.6707 5.10824 11.7676 4.49711 9.89727 4.80883C7.07129 5.28051 5 7.72504 5 10.592V10.8299C5 12.5321 5.70547 14.1604 6.95234 15.3211Z" fill="url(#paint0_linear_202_13)"/>
<defs>
<linearGradient id="paint0_linear_202_13" x1="5" y1="4.90914" x2="26" y2="4.90914" gradientUnits="userSpaceOnUse">
<stop stop-color="#0D6EFD"/>
<stop offset="1" stop-color="#061DED"/>
</linearGradient>
</defs>
</svg>

Vote button (red heart)

<svg width="150" height="28" viewBox="0 0 150 28" fill="none" xmlns="http://www.w3.org/2000/svg">
<path d="M43.1457 9.926L39.8177 19H37.6077L34.2797 9.926H36.2297L38.7257 17.141L41.2087 9.926H43.1457ZM47.4348 19.117C46.7415 19.117 46.1175 18.9653 45.5628 18.662C45.0082 18.35 44.5705 17.9123 44.2498 17.349C43.9378 16.7857 43.7818 16.1357 43.7818 15.399C43.7818 14.6623 43.9422 14.0123 44.2628 13.449C44.5922 12.8857 45.0385 12.4523 45.6018 12.149C46.1652 11.837 46.7935 11.681 47.4868 11.681C48.1802 11.681 48.8085 11.837 49.3718 12.149C49.9352 12.4523 50.3772 12.8857 50.6978 13.449C51.0272 14.0123 51.1918 14.6623 51.1918 15.399C51.1918 16.1357 51.0228 16.7857 50.6848 17.349C50.3555 17.9123 49.9048 18.35 49.3328 18.662C48.7695 18.9653 48.1368 19.117 47.4348 19.117ZM47.4348 17.531C47.7642 17.531 48.0718 17.453 48.3578 17.297C48.6525 17.1323 48.8865 16.8897 49.0598 16.569C49.2332 16.2483 49.3198 15.8583 49.3198 15.399C49.3198 14.7143 49.1378 14.19 48.7738 13.826C48.4185 13.4533 47.9808 13.267 47.4608 13.267C46.9408 13.267 46.5032 13.4533 46.1478 13.826C45.8012 14.19 45.6278 14.7143 45.6278 15.399C45.6278 16.0837 45.7968 16.6123 46.1348 16.985C46.4815 17.349 46.9148 17.531 47.4348 17.531ZM54.6459 13.293V16.777C54.6459 17.0197 54.7022 17.1973 54.8149 17.31C54.9362 17.414 55.1355 17.466 55.4129 17.466H56.2579V19H55.1139C53.5799 19 52.8129 18.2547 52.8129 16.764V13.293H51.9549V11.798H52.8129V10.017H54.6459V11.798H56.2579V13.293H54.6459ZM64.2619 15.243C64.2619 15.503 64.2446 15.737 64.2099 15.945H58.9449C58.9883 16.465 59.1703 16.8723 59.4909 17.167C59.8116 17.4617 60.2059 17.609 60.6739 17.609C61.3499 17.609 61.8309 17.3187 62.1169 16.738H64.0799C63.8719 17.4313 63.4733 18.0033 62.8839 18.454C62.2946 18.896 61.5709 19.117 60.7129 19.117C60.0196 19.117 59.3956 18.9653 58.8409 18.662C58.2949 18.35 57.8659 17.9123 57.5539 17.349C57.2506 16.7857 57.0989 16.1357 57.0989 15.399C57.0989 14.6537 57.2506 13.9993 57.5539 13.436C57.8573 12.8727 58.2819 12.4393 58.8279 12.136C59.3739 11.8327 60.0023 11.681 60.7129 11.681C61.3976 11.681 62.0086 11.8283 62.5459 12.123C63.0919 12.4177 63.5123 12.838 63.8069 13.384C64.1103 13.9213 64.2619 14.541 64.2619 15.243ZM62.3769 14.723C62.3683 14.255 62.1993 13.8823 61.8699 13.605C61.5406 13.319 61.1376 13.176 60.6609 13.176C60.2103 13.176 59.8289 13.3147 59.5169 13.592C59.2136 13.8607 59.0273 14.2377 58.9579 14.723H62.3769ZM71.99 13.293H70.729V19H68.883V13.293H68.064V11.798H68.883V11.434C68.883 10.55 69.1343 9.9 69.637 9.484C70.1397 9.068 70.898 8.873 71.912 8.899V10.433C71.47 10.4243 71.1623 10.498 70.989 10.654C70.8157 10.81 70.729 11.0917 70.729 11.499V11.798H71.99V13.293ZM76.3675 19.117C75.6741 19.117 75.0501 18.9653 74.4955 18.662C73.9408 18.35 73.5031 17.9123 73.1825 17.349C72.8705 16.7857 72.7145 16.1357 72.7145 15.399C72.7145 14.6623 72.8748 14.0123 73.1955 13.449C73.5248 12.8857 73.9711 12.4523 74.5345 12.149C75.0978 11.837 75.7261 11.681 76.4195 11.681C77.1128 11.681 77.7411 11.837 78.3045 12.149C78.8678 12.4523 79.3098 12.8857 79.6305 13.449C79.9598 14.0123 80.1245 14.6623 80.1245 15.399C80.1245 16.1357 79.9555 16.7857 79.6175 17.349C79.2881 17.9123 78.8375 18.35 78.2655 18.662C77.7021 18.9653 77.0695 19.117 76.3675 19.117ZM76.3675 17.531C76.6968 17.531 77.0045 17.453 77.2905 17.297C77.5851 17.1323 77.8191 16.8897 77.9925 16.569C78.1658 16.2483 78.2525 15.8583 78.2525 15.399C78.2525 14.7143 78.0705 14.19 77.7065 13.826C77.3511 13.4533 76.9135 13.267 76.3935 13.267C75.8735 13.267 75.4358 13.4533 75.0805 13.826C74.7338 14.19 74.5605 14.7143 74.5605 15.399C74.5605 16.0837 74.7295 16.6123 75.0675 16.985C75.4141 17.349 75.8475 17.531 76.3675 17.531ZM83.2795 12.916C83.5135 12.5347 83.8168 12.2357 84.1895 12.019C84.5708 11.8023 85.0042 11.694 85.4895 11.694V13.605H85.0085C84.4365 13.605 84.0032 13.7393 83.7085 14.008C83.4225 14.2767 83.2795 14.7447 83.2795 15.412V19H81.4595V11.798H83.2795V12.916ZM97.574 19H95.754L91.633 12.773V19H89.813V9.913H91.633L95.754 16.153V9.913H97.574V19ZM102.571 19.117C101.877 19.117 101.253 18.9653 100.699 18.662C100.144 18.35 99.7063 17.9123 99.3856 17.349C99.0736 16.7857 98.9176 16.1357 98.9176 15.399C98.9176 14.6623 99.0779 14.0123 99.3986 13.449C99.7279 12.8857 100.174 12.4523 100.738 12.149C101.301 11.837 101.929 11.681 102.623 11.681C103.316 11.681 103.944 11.837 104.508 12.149C105.071 12.4523 105.513 12.8857 105.834 13.449C106.163 14.0123 106.328 14.6623 106.328 15.399C106.328 16.1357 106.159 16.7857 105.821 17.349C105.491 17.9123 105.041 18.35 104.469 18.662C103.905 18.9653 103.273 19.117 102.571 19.117ZM102.571 17.531C102.9 17.531 103.208 17.453 103.494 17.297C103.788 17.1323 104.022 16.8897 104.196 16.569C104.369 16.2483 104.456 15.8583 104.456 15.399C104.456 14.7143 104.274 14.19 103.91 13.826C103.554 13.4533 103.117 13.267 102.597 13.267C102.077 13.267 101.639 13.4533 101.284 13.826C100.937 14.19 100.764 14.7143 100.764 15.399C100.764 16.0837 100.933 16.6123 101.271 16.985C101.617 17.349 102.051 17.531 102.571 17.531ZM107.195 15.373C107.195 14.645 107.338 13.9993 107.624 13.436C107.918 12.8727 108.317 12.4393 108.82 12.136C109.322 11.8327 109.881 11.681 110.497 11.681C110.965 11.681 111.411 11.785 111.836 11.993C112.26 12.1923 112.598 12.461 112.85 12.799V9.38H114.696V19H112.85V17.934C112.624 18.2893 112.308 18.5753 111.901 18.792C111.493 19.0087 111.021 19.117 110.484 19.117C109.877 19.117 109.322 18.961 108.82 18.649C108.317 18.337 107.918 17.8993 107.624 17.336C107.338 16.764 107.195 16.1097 107.195 15.373ZM112.863 15.399C112.863 14.957 112.776 14.58 112.603 14.268C112.429 13.9473 112.195 13.7047 111.901 13.54C111.606 13.3667 111.29 13.28 110.952 13.28C110.614 13.28 110.302 13.3623 110.016 13.527C109.73 13.6917 109.496 13.9343 109.314 14.255C109.14 14.567 109.054 14.9397 109.054 15.373C109.054 15.8063 109.14 16.1877 109.314 16.517C109.496 16.8377 109.73 17.0847 110.016 17.258C110.31 17.4313 110.622 17.518 110.952 17.518C111.29 17.518 111.606 17.4357 111.901 17.271C112.195 17.0977 112.429 16.855 112.603 16.543C112.776 16.2223 112.863 15.841 112.863 15.399ZM123.168 15.243C123.168 15.503 123.151 15.737 123.116 15.945H117.851C117.895 16.465 118.077 16.8723 118.397 17.167C118.718 17.4617 119.112 17.609 119.58 17.609C120.256 17.609 120.737 17.3187 121.023 16.738H122.986C122.778 17.4313 122.38 18.0033 121.79 18.454C121.201 18.896 120.477 19.117 119.619 19.117C118.926 19.117 118.302 18.9653 117.747 18.662C117.201 18.35 116.772 17.9123 116.46 17.349C116.157 16.7857 116.005 16.1357 116.005 15.399C116.005 14.6537 116.157 13.9993 116.46 13.436C116.764 12.8727 117.188 12.4393 117.734 12.136C118.28 11.8327 118.909 11.681 119.619 11.681C120.304 11.681 120.915 11.8283 121.452 12.123C121.998 12.4177 122.419 12.838 122.713 13.384C123.017 13.9213 123.168 14.541 123.168 15.243ZM121.283 14.723C121.275 14.255 121.106 13.8823 120.776 13.605C120.447 13.319 120.044 13.176 119.567 13.176C119.117 13.176 118.735 13.3147 118.423 13.592C118.12 13.8607 117.934 14.2377 117.864 14.723H121.283ZM129.645 14.346C130.156 14.4413 130.576 14.697 130.906 15.113C131.235 15.529 131.4 16.0057 131.4 16.543C131.4 17.0283 131.278 17.4573 131.036 17.83C130.802 18.194 130.459 18.48 130.009 18.688C129.558 18.896 129.025 19 128.41 19H124.497V9.926H128.241C128.856 9.926 129.385 10.0257 129.827 10.225C130.277 10.4243 130.615 10.7017 130.841 11.057C131.075 11.4123 131.192 11.8153 131.192 12.266C131.192 12.7947 131.049 13.2367 130.763 13.592C130.485 13.9473 130.113 14.1987 129.645 14.346ZM126.317 13.67H127.981C128.414 13.67 128.748 13.5747 128.982 13.384C129.216 13.1847 129.333 12.903 129.333 12.539C129.333 12.175 129.216 11.8933 128.982 11.694C128.748 11.4947 128.414 11.395 127.981 11.395H126.317V13.67ZM128.15 17.518C128.592 17.518 128.934 17.414 129.177 17.206C129.428 16.998 129.554 16.7033 129.554 16.322C129.554 15.932 129.424 15.6287 129.164 15.412C128.904 15.1867 128.553 15.074 128.111 15.074H126.317V17.518H128.15ZM137.998 14.346C138.509 14.4413 138.93 14.697 139.259 15.113C139.588 15.529 139.753 16.0057 139.753 16.543C139.753 17.0283 139.632 17.4573 139.389 17.83C139.155 18.194 138.813 18.48 138.362 18.688C137.911 18.896 137.378 19 136.763 19H132.85V9.926H136.594C137.209 9.926 137.738 10.0257 138.18 10.225C138.631 10.4243 138.969 10.7017 139.194 11.057C139.428 11.4123 139.545 11.8153 139.545 12.266C139.545 12.7947 139.402 13.2367 139.116 13.592C138.839 13.9473 138.466 14.1987 137.998 14.346ZM134.67 13.67H136.334C136.767 13.67 137.101 13.5747 137.335 13.384C137.569 13.1847 137.686 12.903 137.686 12.539C137.686 12.175 137.569 11.8933 137.335 11.694C137.101 11.4947 136.767 11.395 136.334 11.395H134.67V13.67ZM136.503 17.518C136.945 17.518 137.287 17.414 137.53 17.206C137.781 16.998 137.907 16.7033 137.907 16.322C137.907 15.932 137.777 15.6287 137.517 15.412C137.257 15.1867 136.906 15.074 136.464 15.074H134.67V17.518H136.503ZM143.557 9.77L143.349 16.049H141.815L141.594 9.77H143.557ZM142.621 19.091C142.291 19.091 142.018 18.9913 141.802 18.792C141.594 18.584 141.49 18.3283 141.49 18.025C141.49 17.7217 141.594 17.4703 141.802 17.271C142.018 17.063 142.291 16.959 142.621 16.959C142.941 16.959 143.206 17.063 143.414 17.271C143.622 17.4703 143.726 17.7217 143.726 18.025C143.726 18.3283 143.622 18.584 143.414 18.792C143.206 18.9913 142.941 19.091 142.621 19.091Z" fill="#212529"/>
<path d="M6.95234 15.3211L14.3639 22.2405C14.6715 22.5276 15.0775 22.6875 15.5 22.6875C15.9225 22.6875 16.3285 22.5276 16.6361 22.2405L24.0477 15.3211C25.2945 14.1604 26 12.5321 26 10.8299V10.592C26 7.72504 23.9287 5.28051 21.1027 4.80883C19.2324 4.49711 17.3293 5.10824 15.9922 6.44535L15.5 6.93754L15.0078 6.44535C13.6707 5.10824 11.7676 4.49711 9.89727 4.80883C7.07129 5.28051 5 7.72504 5 10.592V10.8299C5 12.5321 5.70547 14.1604 6.95234 15.3211Z" fill="url(#paint0_linear_202_13)"/>
<defs>
<linearGradient id="paint0_linear_202_13" x1="5" y1="4.90914" x2="26" y2="4.90914" gradientUnits="userSpaceOnUse">
<stop stop-color="#FD0D0D"/>
<stop offset="1" stop-color="#ED5906"/>
</linearGradient>
</defs>
</svg>

Mastodon button

<svg width="28" height="28" viewBox="0 0 28 28" fill="none" xmlns="http://www.w3.org/2000/svg">
<g clip-path="url(#clip0_202_48)">
<rect width="28" height="28" rx="3" fill="url(#paint0_linear_202_48)"/>
<path d="M23.5871 16.2056C23.308 17.6418 21.0868 19.2136 18.5357 19.5183C17.2055 19.677 15.8958 19.8229 14.4991 19.7588C12.2151 19.6542 10.4128 19.2136 10.4128 19.2136C10.4128 19.436 10.4265 19.6477 10.454 19.8457C10.7509 22.0998 12.6891 22.2348 14.525 22.2978C16.3781 22.3612 18.0281 21.8409 18.0281 21.8409L18.1042 23.5161C18.1042 23.5161 16.8081 24.2122 14.4991 24.3402C13.2259 24.4102 11.645 24.3081 9.80369 23.8208C5.81018 22.7638 5.12339 18.5069 5.01831 14.1876C4.98627 12.9052 5.00602 11.6959 5.00602 10.6845C5.00602 6.26781 7.89985 4.9732 7.89985 4.9732C9.35899 4.30308 11.8628 4.02128 14.4657 4H14.5296C17.1325 4.02128 19.6379 4.30308 21.097 4.9732C21.097 4.9732 23.9907 6.26781 23.9907 10.6845C23.9907 10.6845 24.027 13.9432 23.5871 16.2056Z" fill="white"/>
<path d="M20.5774 11.0272V16.375H18.4586V11.1843C18.4586 10.0901 17.9982 9.53477 17.0774 9.53477C16.0592 9.53477 15.5489 10.1936 15.5489 11.4963V14.3375H13.4427V11.4963C13.4427 10.1936 12.9323 9.53477 11.9141 9.53477C10.9932 9.53477 10.5328 10.0901 10.5328 11.1843V16.375H8.41409V11.0272C8.41409 9.93416 8.69239 9.06561 9.25138 8.42302C9.82782 7.78044 10.5827 7.45103 11.5198 7.45103C12.6041 7.45103 13.4251 7.86775 13.968 8.70132L14.4957 9.586L15.0236 8.70132C15.5663 7.86775 16.3874 7.45103 17.4717 7.45103C18.4087 7.45103 19.1636 7.78044 19.7402 8.42302C20.2991 9.06561 20.5774 9.93416 20.5774 11.0272Z" fill="#5865F2"/>
</g>
<defs>
<linearGradient id="paint0_linear_202_48" x1="14" y1="0" x2="14" y2="28" gradientUnits="userSpaceOnUse">
<stop stop-color="#6364FF"/>
<stop offset="1" stop-color="#563BCD"/>
</linearGradient>
<clipPath id="clip0_202_48">
<rect width="28" height="28" fill="white"/>
</clipPath>
</defs>
</svg>

phenomlab

@baris said in [manual] Build a custom header in Harmony:

justify-content-end

Worth noting that if anyone wants the specific CSS for this, it's below

[data-widget-area="brand-header"] {
    justify-content: end;
    display: flex;
}

omega

@baris Of course this is a good idea, it's brilliant and great to see it implemented too.

If you remember I suggested last year to put widget areas in the columns, perhaps consider that too?

Also, what about a widget area in the sticky navbar!

So many widget areas to play in.

I always liked the simplicity of widget system and I think it get's forgotten about, or underutilised (or maybe that's just me), but widgets have a different and maybe greater potential in Harmony theme or was being considered in the time of early dev, but as you can see now is the time!