Menu template - add additional header content container

[guywillis]

Subject of the issue

It would be really useful to have an additional container in the menu template for the header to allow for some more unique styling.

Your environment

• Master AT & FW

Expected behaviour

The introduction of a new container element within the .menu__header-inner element to allow for some more styling flexibility. The introduction of the element should have no visual impact to the standard view.

{{#any displayTitle subtitle body instruction}}
  <div class="menu__header boxmenu__header">
    <div class="menu__header-inner boxmenu__header-inner">

      {{#if _boxMenu._graphic._src }}
      <div class="menu__image-container boxmenu__image-container">
        <img class="menu__image boxmenu__image" src="{{_boxMenu._graphic._src}}"{{#if _boxMenu._graphic.alt}} alt="{{_boxMenu._graphic.alt}}"{{/if}}{{#unless _boxMenu._graphic.alt}} aria-hidden="true"{{/unless}}>
      </div>
      {{/if}}

      <div class="menu__header-content">

        {{#if displayTitle}}
        <div class="menu__title boxmenu__title">
          <div class="menu__title-inner boxmenu__title-inner js-heading"></div>
        </div>
        {{/if}}

        ...

      </div>

    </div>
  </div>

This header style should be achievable with the new element with very little additional CSS.

[kirsty-hames]

I'm in favour of having an additional container. I was undecided whether .boxmenu__image-container should sit within this but I think your suggestion above (outside of container) offers more flexibility with styling.

[guywillis]

I'm in favour of having an additional container. I was undecided whether .boxmenu__image-container should sit within this but I think your suggestion above (outside of container) offers more flexibility with styling.

Thank you for taking time to review.

I had the same thought and ultimately landed on the image being outside to allow for a Text / Graphic layout in the header should it be required.

[github-actions]

🎉 This issue has been resolved in version 6.4.0 🎉

The release is available on GitHub release

Your semantic-release bot 📦🚀