The In-page Navigation is slightly narrower than would be on a vanilla USWDS project.
{#
/**
* @file
* Theme override for the body field in the page content type.
*
* Wrap field output in a USWDS In-page navigation.
*/
#}
{%
set classes = [
'field',
'field--name-' ~ field_name|clean_class,
'field--type-' ~ field_type|clean_class,
'field--label-' ~ label_display,
label_display == 'inline' ? 'clearfix',
]
%}
{%
set title_classes = [
'title',
label_display == 'visually_hidden' ? 'usa-sr-only',
label_display == 'inline' ? 'display-inline',
]
%}
{%
set field_classes = [
label_display == 'inline' ? 'display-inline',
]
%}
{% if label_hidden %}
{% if multiple %}
<div{{ attributes.addClass(classes, 'field__items').addClass(field_classes) }}>
{% for item in items %}
{# Wrap content with USWDS in-page navigation. #}
{% block content %}
<div class="usa-in-page-nav-container">
{% block aside %}
<aside
class="usa-in-page-nav"
data-title-text="On this page"
data-title-heading-level="h4"
data-scroll-offset="0"
data-root-margin="0px 0px 0px 0px"
data-threshold="1"
data-main-content-selector=".block-system-main-block"
></aside>
{% endblock %}
<div{{ item.attributes.addClass('field__item').addClass(field_classes) }}>{{ item.content }}</div>
</div>
{% endblock %}
{% endfor %}
</div>
{% else %}
{% for item in items %}
{# Reuse the aside block defined above, with a different item.content. #}
<div class="usa-in-page-nav-container">
{{ block('aside') }}
<div{{ attributes.addClass(classes, 'field__item').addClass(field_classes) }}>{{ item.content }}</div>
</div>
{% endfor %}
{% endif %}
{% else %}
<div{{ attributes.addClass(classes) }}>
<div{{ title_attributes.addClass(title_classes) }}>{{ label }}</div>
{% if multiple %}
<div{{ attributes.addClass(classes, 'field__items').addClass(field_classes) }}>
{% endif %}
{% for item in items %}
{# Reuses the content block defined above. #}
{{ block('content') }}
{% endfor %}
{% if multiple %}
</div>
{% endif %}
</div>
{% endif %}
<nav> parent element and set the width of this element to 15rem (The <aside> element specifies this as the max-width.Strangely, I cannot find the culprit CSS that might be causing this. The resolution of this issue is currently unclear.
Active
3.7
Code
Check this against the current 3.7.x dev to see if a recent patch resolved.
Sorry, didn't apply this change yet.
https://www.drupal.org/project/uswds_base/issues/3452705 🐛 Fix main content grid column span given both sidebar regions Needs review