Not GOV.UK Service

The GOV.‌UK Frontend v6.3.0 introduced a Generic header component for services that are not part of the GOV.UK proposition but would still benefit from using GOV.‌UK Frontend to build their service.

When to use this component

Use the Generic header component if your service is both:

• a public-facing government service
• not on the GOV.UK website (meaning that your service is not part of the GOV.UK proposition)

This is to bring consistency and maintain user trust in journeys that move between the GOV.UK website and other government websites and services.

This component also helps ensure your non-GOV.UK service does not:

• identify itself as being part of GOV.UK
• use the crown or GOV.UK logotype in the header
• use the GDS Transport typeface
• use the GOV.UK brand colours

See the guidance on if your service is not on GOV.UK in the Service manual.
 

---

In order to use the Generic header component, create a sub theme and copy templates/layout/page.html.twig from the main govuk_theme into templates/layout/page.html.twig of your new sub theme.

Replace this section:

<header class="govuk-template__header">
 <div class="govuk-header govuk-clearfix">
   <div class="govuk-header__container govuk-width-container">
     {{ govuk_header }}
     {% if page.navigation and mobile_menu_type == 1 %}
       <button class="menu-toggle hamburger icon" aria-label="Open menu" onclick="toggleMobileMenu();">
         <svg class="menu-icon" viewBox="0 0 32 32" aria-hidden="true">
           <path d="M3 6h18M3 12h18M3 18h18"
                 stroke="currentColor"
                 stroke-width="3"
                 stroke-linecap="round"/>
         </svg>
       </button>
       
     {% endif %}
     {% if search_box %}
       {{ search_box }}
     {% endif %}
   </div>
   {% if page.navigation and mobile_menu_type == 1 %}
     <div id="mobile-menu"></div>
   {% endif %}
 </div>
</header>

With this section:

<header class="govuk-generic-header">
 <div class="govuk-generic-header__container govuk-width-container govuk-clearfix">
   <div class="govuk-generic-header__logo">
     <a href="#" class="govuk-generic-header__homepage-link">
       <svg width="28" height="30" viewBox="0 0 28 30" fill="currentColor" xmlns="http://www.w3.org/2000/svg">
         <circle cx="13.5549" cy="4.21349" r="4.21349" />
         <circle cx="13.5549" cy="25.7865" r="4.21349" />
         <circle cx="22.8963" cy="9.6068" r="4.21349" />
         <circle cx="4.2135" cy="20.3932" r="4.21349" />
         <circle cx="22.8963" cy="20.3932" r="4.21349" />
         <circle cx="4.21351" cy="9.60674" r="4.21349" />
       </svg> Service name
     </a>
   </div>
   {% if page.navigation and mobile_menu_type == 1 %}
       <button class="menu-toggle hamburger icon" aria-label="Open menu" onclick="toggleMobileMenu();">
         <svg class="menu-icon" viewBox="0 0 32 32" aria-hidden="true">
           <path d="M3 6h18M3 12h18M3 18h18"
                 stroke="currentColor"
                 stroke-width="3"
                 stroke-linecap="round"/>
         </svg>
       </button>
       
   {% endif %}
   {% if search_box %}
     {{ search_box }}
   {% endif %}
 </div>
 {% if page.navigation and mobile_menu_type == 1 %}
   <div id="mobile-menu"></div>
 {% endif %}
</header>

You likely want to replace the svg with your logo and "Service name" with {{ site_name }}

Also in the footer section, remove:

{{ govuk_meta }}

This is the css file to remove GOV.UK branding, fonts, brand colors etc. The complete not_govuk theme as a zip file. unzip into your /themes/custom folder.

After making these changes, issue a drush cr.