Add custom class in header region on drupal 8 - class

Question

I'd like to add custom class in my drupal template, in header region, but it doesn't works.
<!-- BEGIN OUTPUT from 'themes/marinenat/templates/layout/page.html.twig' -->
<div class="layout-container">
<header role="banner">
<!-- THEME DEBUG -->
<!-- THEME HOOK: 'region' -->
<!-- FILE NAME SUGGESTIONS:
x region--header.html.twig
* region.html.twig
-->
<!-- BEGIN OUTPUT from 'themes/marinenat/templates/layout/region--header.html.twig' -->
<div class="nav">
I'd like to add this class after "nav" class di region--header.
Anyone can help me

Answer 1

You already have all you need in the output.
Many roads lead to Rome
If themes/marineat is you base theme, simply copy themes/marinenat/templates/layout/region--header.html.twig into your subtheme's themes/MYSUBTHEME/templates directory and edit this file. Flush cache. Done.
If themes/marinenat is you custom subtheme simply edit the suggested template file /themes/marinenat/templates/layout/region--header.html.twig/ and add your class there. Flush cache. Done.
Last but not least you can also add classes to a region from a preprocess function from your MYSUBTHEME.theme file or any MYMODULE.module file.
/**
* Implements template_preprocess_region().
*/
function MYTHEME/MYMODULE_preprocess_region(&$variables) {
if (isset($variables['region']) && $variables['region'] == 'header') {
$variables['attributes']['class'][] = 'MYCLASS';
}
}
How to pass a string from PHP to Twig
/**
* Implements template_preprocess_region().
*/
function MYTHEME/MYMODULE_preprocess_region(&$variables) {
$variables['foo'] = FALSE;
if (isset($variables['region']) && $variables['region'] == 'header') {
// Get the current node.
$node = \Drupal::routeMatch()->getParameter('node');
if ($node instanceof \Drupal\node\NodeInterface) {
// Get the node type.
$node_type = $node->bundle();
// Do what ever else you need to do to retrieve your class dynamically.
$variables['foo'] = $node_type;
}
}
}
Then in your region--header.html.twig Twig file it's:
{% if foo %}
<div class="nav {{ foo }}">
{{ content }}
</div>
{% endif %}