How to overwrite a html-element but keep the rest of a block?

Question

I am extending a twig-template where i want to replace the line

<div class="container">

with

<div class="container-fluid">

Twig-template

{% block layout_main_navigation %}
    <div class="main-navigation"
         id="mainNavigation"
         data-flyout-menu="true">
        {% block layout_main_navigation_navbar %}
            <div class="container"> <!-- This line should be replaced -->
                {% block layout_main_navigation_menu %}
                    ...
                {% endblock %}
            ...
        {% endblock %}
        ...
{% endblock %}

I tried to overwrite the layout_main_navigation by copying everything and changing the class of the div. But i am not happy with that solution as i have to copy and overwrite a lot blocks.

How can i achieve replacing the class of the div and overwrite as less block as possible?

Answer 1

You can override the block layout_main_navigation_navbar, add the div element with the desired class container-fluid and then include the original content of the block layout_main_navigation_menu using the parent() function:

{% block layout_main_navigation_navbar %}
    <div class="container-fluid">
        {% block layout_main_navigation_menu %}
            {{ parent() }}
        {% endblock %}
    </div>
{% endblock %}