<div class="nav-bar">
<a class="nav-bar__home-button" href="/">
<svg class="main-logo" width="84" height="84" viewBox="0 0 84 84" fill="none" xmlns="http://www.w3.org/2000/svg">
<g id="360-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>
</svg>
<span class="nav-bar__product-name">Registry</span>
<span class="screen-reader-only">Home</span>
</a>
<h1 class="nav-bar__title">
<a class="" href="/">Site title</a>
</h1>
<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="/">
{% include '@main-logo--graphic-only' %}
<span class="nav-bar__product-name">{{ product_name }}</span>
<span class="screen-reader-only">Home</span>
</a>
<h1 class="nav-bar__title">
<a class="" href="/">Site title</a>
</h1>
<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.