<div class="nav-bar">
<a class="nav-bar__home-button" href="/">
<svg class="main-logo main-logo--animated" width="189" height="84" viewBox="0 0 189 84" fill="none" xmlns="http://www.w3.org/2000/svg">
<g id="grantnav-logo">
<g id="main-360-circle">
<path id="circle-background" d="M61.1246 52.4174C58.816 52.4174 57.0295 51.6534 55.7652 50.1253C54.5009 48.5972 53.8696 46.4417 53.8713 43.659V39.8849C53.8713 37.0853 54.5009 34.9257 55.7602 33.406C57.0194 31.8863 58.7983 31.1264 61.0969 31.1264C63.1117 31.1264 64.7286 31.7135 65.9476 32.8877C64.1632 28.5118 61.1178 24.7643 57.1978 22.1206C53.2778 19.4769 48.66 18.0562 43.9305 18.039C39.2009 18.0217 34.5729 19.4086 30.6336 22.0237C26.6944 24.6387 23.6217 28.3639 21.8054 32.7266C22.2596 32.3661 22.7582 32.065 23.2888 31.8309C24.4102 31.3432 25.6221 31.098 26.845 31.1113C29.1536 31.1113 30.9687 31.6388 32.29 32.6939C33.6114 33.749 34.2721 35.1966 34.2721 37.0367C34.2651 37.9399 33.9783 38.8189 33.4511 39.5527C32.8425 40.398 32.018 41.0644 31.0635 41.4826C32.0858 41.8249 32.9868 42.4559 33.6576 43.2992C34.3054 44.1697 34.6375 45.2344 34.5995 46.3185C34.6258 47.1761 34.4452 48.0275 34.0731 48.8008C33.701 49.5741 33.1482 50.2467 32.4613 50.7618C31.0358 51.8723 29.1637 52.4275 26.845 52.4275C25.5449 52.438 24.2573 52.173 23.0672 51.65C22.6068 51.4469 22.1701 51.1938 21.7651 50.8952C23.5719 55.3027 26.6585 59.0687 30.6271 61.7078C34.5957 64.3469 39.2645 65.7383 44.0318 65.7026C48.7991 65.6668 53.4464 64.2056 57.3749 61.5073C61.3035 58.809 64.3331 54.9972 66.0735 50.5631C64.8428 51.7976 63.1932 52.4157 61.1246 52.4174ZM50.912 48.8949C50.3028 49.9842 49.3985 50.8798 48.3028 51.4789C47.1672 52.1061 45.888 52.4277 44.5905 52.4124C43.2079 52.4348 41.8444 52.0873 40.6415 51.406C39.4795 50.7326 38.5388 49.736 37.934 48.5376C37.2632 47.203 36.918 45.7286 36.9266 44.2352V42.3129C36.8949 40.3083 37.3677 38.328 38.3018 36.5536C39.1998 34.8698 40.5625 33.4787 42.2281 32.5455C43.9531 31.5705 45.9055 31.0688 47.8872 31.0912H48.6151V34.8653H48.401C46.6062 34.8653 45.1311 35.2955 43.976 36.156C43.4021 36.583 42.9184 37.1192 42.5528 37.7337C42.1871 38.3481 41.9467 39.0288 41.8453 39.7364C42.3867 39.2092 43.0293 38.7968 43.7343 38.5239C44.4394 38.2511 45.1923 38.1235 45.948 38.1488C47.7462 38.1488 49.1734 38.8038 50.2295 40.1138C51.2856 41.4239 51.8178 43.1423 51.8262 45.2693C51.8441 46.5385 51.5289 47.7903 50.912 48.9V48.8949Z" fill="#153634" />
<path id="fill-in-3" d="M26.7746 39.759C28.5694 39.759 29.4669 38.8809 29.4669 37.1246C29.4779 36.8163 29.4265 36.509 29.3157 36.221C29.2049 35.9331 29.037 35.6705 28.8221 35.4489C28.5798 35.2244 28.2943 35.0513 27.9831 34.9401C27.6718 34.829 27.3412 34.7821 27.0113 34.8023C26.4104 34.7904 25.8238 34.9869 25.3516 35.3584C25.132 35.5156 24.9531 35.723 24.83 35.9633C24.7069 36.2036 24.6431 36.4698 24.6439 36.7397H20.5387C20.1695 38.4223 19.9837 40.1399 19.9846 41.8624C19.9852 43.3737 20.1277 44.8815 20.4103 46.3662H24.3517C24.3517 46.6806 24.4205 46.9912 24.5532 47.2763C24.6859 47.5614 24.8793 47.8141 25.1199 48.0167C25.6389 48.4839 26.318 48.7335 27.0163 48.7137C27.754 48.7489 28.4765 48.4963 29.0312 48.0092C29.2789 47.7805 29.4746 47.5013 29.6049 47.1905C29.7353 46.8797 29.7973 46.5445 29.7867 46.2077C29.7867 45.1627 29.5248 44.4221 29.0009 43.986C28.4771 43.5499 27.7551 43.3318 26.835 43.3318H24.4978V39.759H26.7746Z" fill="#153634" />
<path id="fill-in-6" d="M44.2908 41.8221C43.7256 41.8022 43.168 41.9569 42.694 42.265C42.2871 42.5366 41.9582 42.9095 41.7395 43.3469V44.7836C41.7395 47.4053 42.647 48.7153 44.462 48.7137C44.8247 48.7127 45.1816 48.6227 45.5013 48.4516C45.821 48.2805 46.0937 48.0335 46.2955 47.7324C46.8038 47.0139 47.0613 46.1483 47.0284 45.2692C47.0655 44.379 46.7991 43.5026 46.2728 42.7833C46.0434 42.4764 45.7437 42.229 45.3989 42.0618C45.054 41.8946 44.674 41.8124 44.2908 41.8221Z" fill="#153634" />
<path id="fill-in-0" d="M61.0968 34.8174C60.7293 34.796 60.3635 34.8813 60.0435 35.063C59.7235 35.2447 59.463 35.5151 59.2935 35.8415C58.9174 36.5259 58.7151 37.5608 58.6865 38.9463V44.2427C58.6865 45.7892 58.8821 46.9214 59.2733 47.6394C59.4438 47.9789 59.7098 48.2614 60.0386 48.4523C60.3674 48.6431 60.7447 48.734 61.1245 48.7137C61.495 48.7314 61.8629 48.6421 62.184 48.4565C62.5051 48.2709 62.7659 47.9968 62.9353 47.667C63.3248 46.9692 63.5246 45.8789 63.5347 44.3961V39.2583C63.5347 37.7688 63.3399 36.6559 62.9504 35.9195C62.7838 35.5743 62.5191 35.2858 62.1895 35.0898C61.8599 34.8939 61.4799 34.7991 61.0968 34.8174Z" fill="#153634" />
</g>
<path id="circle-1" d="M67.6979 69.9821C70.0166 69.9821 71.8963 68.1042 71.8963 65.7878C71.8963 63.4714 70.0166 61.5935 67.6979 61.5935C65.3792 61.5935 63.4995 63.4714 63.4995 65.7878C63.4995 68.1042 65.3792 69.9821 67.6979 69.9821Z" fill="#BC2C26" />
<path id="circle-2" d="M43.8172 83.7324C47.5658 83.7324 50.6046 80.6965 50.6046 76.9516C50.6046 73.2066 47.5658 70.1708 43.8172 70.1708C40.0686 70.1708 37.0298 73.2066 37.0298 76.9516C37.0298 80.6965 40.0686 83.7324 43.8172 83.7324Z" fill="#DE6E26" />
<path id="circle-3" d="M15.547 79.4274C20.7491 79.4274 24.9662 75.2144 24.9662 70.0173C24.9662 64.8202 20.7491 60.6072 15.547 60.6072C10.3448 60.6072 6.12769 64.8202 6.12769 70.0173C6.12769 75.2144 10.3448 79.4274 15.547 79.4274Z" fill="#EFC329" />
<path id="circle-4" d="M6.78742 48.6483C10.536 48.6483 13.5748 45.6124 13.5748 41.8675C13.5748 38.1225 10.536 35.0867 6.78742 35.0867C3.03883 35.0867 0 38.1225 0 41.8675C0 45.6124 3.03883 48.6483 6.78742 48.6483Z" fill="#4DACB6" />
<path id="circle-5" d="M15.9295 23.0347C21.1317 23.0347 25.3488 18.8217 25.3488 13.6246C25.3488 8.42753 21.1317 4.21448 15.9295 4.21448C10.7274 4.21448 6.51025 8.42753 6.51025 13.6246C6.51025 18.8217 10.7274 23.0347 15.9295 23.0347Z" fill="#DE6E26" />
<path id="circle-6" d="M43.8172 13.5616C47.5658 13.5616 50.6046 10.5258 50.6046 6.78082C50.6046 3.03588 47.5658 0 43.8172 0C40.0686 0 37.0298 3.03588 37.0298 6.78082C37.0298 10.5258 40.0686 13.5616 43.8172 13.5616Z" fill="#EFC329" />
<g id="grantnav-word">
<path id="letter-G" d="M91.0523 49.4082C90.3196 50.4402 89.2941 51.229 88.1081 51.6726C86.7031 52.1991 85.2111 52.4552 83.7108 52.4275C82.1284 52.4572 80.5691 52.046 79.2076 51.2399C77.8841 50.4292 76.828 49.2481 76.1703 47.8432C75.424 46.2528 75.0469 44.5145 75.0672 42.7582V40.9592C75.0672 37.8376 75.7959 35.4171 77.2533 33.6978C78.7106 31.9785 80.7616 31.1197 83.406 31.1213C85.572 31.1213 87.3156 31.674 88.637 32.7794C89.9584 33.8848 90.766 35.4532 91.0598 37.4845H88.3146C87.8008 34.7319 86.1663 33.3556 83.4111 33.3556C81.5776 33.3556 80.1882 33.9997 79.2429 35.288C78.2976 36.5762 77.8199 38.4406 77.8099 40.8812V42.577C77.8099 44.9052 78.3421 46.7554 79.4066 48.1275C80.4711 49.4996 81.9109 50.1831 83.7259 50.1781C84.6351 50.1938 85.5419 50.0786 86.4182 49.8359C87.1481 49.6333 87.809 49.2358 88.3297 48.6861V44.0414H83.5244V41.8046H91.0523V49.4082Z" fill="#153634" />
<path id="letter-r" d="M101.925 39.0847C101.496 39.0161 101.062 38.9825 100.628 38.9841C98.8965 38.9841 97.7211 39.7204 97.1016 41.1932V52.128H94.4697V36.7196H97.0361L97.0789 38.501C97.9419 37.1238 99.1676 36.4353 100.756 36.4353C101.156 36.4144 101.555 36.4832 101.925 36.6366V39.0847Z" fill="#153634" />
<path id="letter-a-first" d="M112.568 52.128C112.364 51.6085 112.239 51.0615 112.198 50.5052C111.641 51.1132 110.962 51.5972 110.206 51.9258C109.45 52.2544 108.632 52.4202 107.808 52.4123C106.287 52.4123 105.039 51.9829 104.065 51.1241C103.594 50.7215 103.218 50.219 102.966 49.6532C102.713 49.0875 102.59 48.4726 102.604 47.8532C102.604 46.2496 103.216 45.0042 104.438 44.1168C105.66 43.2295 107.378 42.785 109.591 42.7833H112.155V41.5731C112.175 41.1696 112.112 40.7663 111.97 40.388C111.828 40.0098 111.61 39.6647 111.329 39.374C110.778 38.8272 109.965 38.5546 108.891 38.5563C108.045 38.5267 107.214 38.777 106.526 39.2684C106.238 39.4551 106 39.7098 105.834 40.0099C105.667 40.31 105.577 40.6463 105.571 40.9894H102.919C102.935 40.1765 103.223 39.3925 103.738 38.7626C104.323 38.0159 105.088 37.4298 105.962 37.0593C106.934 36.6333 107.985 36.4189 109.047 36.4302C110.825 36.4302 112.218 36.8739 113.225 37.7612C114.233 38.6486 114.755 39.8714 114.792 41.4297V48.52C114.792 49.9357 114.972 51.0612 115.333 51.8965V52.123L112.568 52.128ZM108.193 50.1152C109.02 50.1147 109.833 49.8932 110.545 49.4736C111.24 49.0959 111.802 48.5146 112.155 47.8079V44.6528H110.09C106.859 44.6528 105.243 45.5971 105.241 47.4859C105.223 47.8505 105.288 48.2145 105.432 48.5502C105.575 48.8859 105.793 49.1845 106.07 49.4232C106.669 49.9057 107.424 50.1535 108.193 50.1202V50.1152Z" fill="#153634" />
<path id="letter-n" d="M120.69 36.7195L120.775 38.6569C121.314 37.9465 122.013 37.3741 122.816 36.9869C123.619 36.5998 124.503 36.4089 125.394 36.4302C128.653 36.4302 130.297 38.2678 130.326 41.9429V52.1229H127.689V41.9328C127.679 40.8207 127.427 39.9997 126.933 39.4696C126.44 38.9396 125.663 38.6737 124.604 38.672C123.8 38.6556 123.012 38.8944 122.352 39.3539C121.702 39.8133 121.182 40.4319 120.841 41.1503V52.128H118.197V36.7195H120.69Z" fill="#153634" />
<path id="letter-t" d="M137.151 32.9907V36.7195H140.03V38.7576H137.151V48.3186C137.114 48.813 137.251 49.3049 137.537 49.71C137.789 50.017 138.229 50.173 138.846 50.173C139.271 50.1577 139.692 50.1004 140.106 50.0019V52.1255C139.449 52.3083 138.772 52.4031 138.091 52.4073C136.915 52.4073 136.026 52.0517 135.424 51.3405C134.821 50.6292 134.522 49.6178 134.527 48.3061V38.745H131.706V36.707H134.514V32.9907H137.151Z" fill="#153634" />
<path id="letter-N" d="M158.743 52.128H155.992L145.543 36.1509V52.128H142.793V31.3981H145.543L156.02 47.4456V31.3981H158.743V52.128Z" fill="#153634" />
<path id="letter-a-second" d="M171.982 52.128C171.776 51.6093 171.651 51.0619 171.612 50.5052C171.055 51.113 170.376 51.5969 169.619 51.9255C168.862 52.254 168.045 52.4199 167.22 52.4124C165.709 52.4124 164.462 51.9829 163.48 51.1241C163.008 50.7218 162.632 50.2195 162.379 49.6536C162.127 49.0877 162.004 48.4727 162.019 47.8532C162.019 46.2497 162.629 45.0042 163.85 44.1169C165.071 43.2295 166.788 42.785 169.003 42.7833H171.569V41.5731C171.589 41.1694 171.526 40.766 171.383 40.3878C171.241 40.0096 171.022 39.6646 170.741 39.3741C170.188 38.8272 169.377 38.5547 168.305 38.5563C167.459 38.5267 166.627 38.777 165.938 39.2684C165.65 39.4551 165.412 39.7098 165.246 40.0099C165.079 40.31 164.989 40.6463 164.983 40.9894H162.331C162.348 40.1763 162.637 39.3923 163.152 38.7627C163.737 38.0154 164.502 37.4292 165.376 37.0593C166.348 36.6331 167.4 36.4187 168.462 36.4303C170.233 36.4303 171.622 36.8756 172.63 37.7663C173.637 38.657 174.16 39.8798 174.199 41.4347V48.525C174.199 49.9407 174.379 51.0663 174.74 51.9016V52.128H171.982ZM167.605 50.1152C168.433 50.1151 169.245 49.8935 169.958 49.4736C170.652 49.0953 171.214 48.5142 171.569 47.8079V44.6528H169.502C166.27 44.6528 164.654 45.5972 164.656 47.4859C164.637 47.8503 164.702 48.2142 164.845 48.5499C164.988 48.8856 165.206 49.1843 165.482 49.4233C166.082 49.9049 166.836 50.1525 167.605 50.1202V50.1152Z" fill="#153634" />
<path id="letter-v" d="M182.485 48.5552L186.303 36.7296H189L183.459 52.138H181.444L175.858 36.7296H178.551L182.485 48.5552Z" fill="#153634" />
</g>
</g>
</svg>
<span class="screen-reader-only">Home</span>
</a>
<nav class="nav-bar__nav-menu">
<ul>
<li class="nav-menu__item">
<a class="nav-menu__button" href="#">
About the data
</a>
</li>
<li class="nav-menu__item">
<a class="nav-menu__button" href="#">
Get help
</a>
</li>
<li class="nav-menu__item">
<a class="nav-menu__button" href="#">
About 360Giving
</a>
</li>
</ul>
</nav>
</div>
<div class="nav-bar">
<a class="nav-bar__home-button" href="/">
{# TO DO: REFACTOR LOGO INTO COMPONENT #}
{% include '@main-logo--animated' %}
<span class="screen-reader-only">Home</span>
</a>
<nav class="nav-bar__nav-menu">
<ul>
{% for item in nav_menu %}
<li class="nav-menu__item">
{# If you want to disable a nav item, please don't use an anchor,
make it another element instead #}
<a class="nav-menu__button"
href="{{ item.url }}"
{% if item.target %} target="{{ item.target }}"{% endif %}
{% if item.isexternal %} rel="noopener noreferrer"{% endif %}>
{{ item.name }}
{% if item.target %}<span class="screen-reader-only">(opens in a new tab)</span>{% endif %}
{# I've ommitted the title attribute because it's not great for accessibility #}
</a>
</li>
{% endfor %}
</ul>
</nav>
</div>
{
"product_name": "Registry",
"auxiliary_name": "Dashboard",
"product_logo_svg": "360registry-color.svg",
"product_logo_alt": "360Registry",
"product_summary": "Based on data published by UK grantmakers in the 360Giving Data Standard",
"nav_menu": [
{
"name": "About the data",
"url": "#"
},
{
"name": "Get help",
"url": "#"
},
{
"name": "About 360Giving",
"url": "#"
}
]
}
.nav-bar {
display: flex;
flex-direction: column;
padding: 8px 24px 14px;
&--minimal {
padding: 14px 24px;
// Offset `@separator`'s top margin.
margin-bottom: -1rem;
}
@include breakpoint($regular) {
flex-direction: row;
justify-content: space-between;
align-items: center;
}
&__home-button {
display: block;
margin: 2px; // margin on this helps keep the focus outline within the viewport
margin-bottom: 22px;
img {
width: 190px;
}
@include breakpoint($regular) {
margin-bottom: 0;
}
@media print {
float: right;
min-width: initial;
}
}
&__product-name {
display: inline-block;
vertical-align: top;
font-weight: 400;
color: $black;
font-size: 30px;
margin-top: 24px;
}
&__title {
font-weight: 400;
margin-top: 12px;
margin-bottom: 12px;
@include breakpoint($regular) {
margin-left: 2rem;
margin-right: auto;
}
& a {
color: inherit;
}
@media print{
margin-left: 0px;
margin-right: 0px;
}
}
&__nav-menu {
ul {
list-style: none;
padding: 0;
margin: 0;
display: flex;
flex-direction: column;
justify-content: flex-start;
margin-bottom: 20px;
@include breakpoint($regular) {
flex-direction: row;
align-items: center;
margin-bottom: 0;
}
li {
margin-right: 10px;
&:last-of-type {
margin-right: 0;
}
}
}
.nav-menu__button {
display: block;
padding: 8px 0px;
font-weight: 400;
font-size: 14px;
&:hover {
text-decoration: underline dashed;
text-underline-offset: 2px;
}
@include breakpoint($regular) {
padding: 16px 6px;
}
}
@media print{
display: none;
}
}
@media print{
@include reset_print;
}
}
The nav bar is meant to replace the old header. It currently doesn’t support dropdown menus or an offcanvas mobile menu.