CTGY Header gets hidden Shadows 2

[ids]

I'm not sure I understand the logic in the CTGY template Details.

<mvt:item name="prod_ctgy_hdft" param="ctgy_header" />

is hidden in the smaller media queries. Appears to be happening regardless of if there is a Title Image present. The break so far, for example, iPad is hidden but iPad Pro renders fine. I have tried to isolate by browser because of emulation in the dev tools, but the content is getting hidden across the board. What was the thought for intentionally hiding this content?

Scott

[Matt Zimmermann]

Hi Scott,

Do you have a link to a site where this is happening? I am unable to duplicate that element being hidden and there isn't any CSS, by default, that should cause it to become hidden.

[ids]

Just to make sure, this is the Catalog category header and not the CTGY page template header.
It's a dev store. I'll need to send you the folder creds:

This is the original FW template section of code:

<section class="o-layout o-layout--column-reverse o-layout--row-reverse--l o-layout--wide">
<div class="o-layout__item u-width-12 u-width-9--l">
<h1 class="c-heading-delta u-text-bold u-text-uppercase">&mvte:category:name;</h1>
<mvt:if expr="NOT ISNULL l.settings:category_title:image">
<section class="o-layout u-hidden u-flex--l">
<div class="o-layout__item u-width-12 u-width-5--l">
<div class="x-hero" title="&mvte:category:name;">
<img src="&mvte:category_title:image;" alt="&mvte:category:name;" loading="lazy">
</div>
<br>
</div>
<div class="o-layout__item u-width-12 u-width-7--l u-width-7--s">
<mvt:item name="prod_ctgy_hdft" param="ctgy_header" />
</div>
</section>
<mvt:else>
<section class="o-layout u-hidden u-flex--l">
<div class="o-layout__item">
<mvt:item name="prod_ctgy_hdft" param="ctgy_header" />
</div>
</section>
</mvt:if>

I can repro the issue with default code. When no title image, there is no ctgy_header rendered as I described. I made sure to remove any HTML formatting for just flat text in the catalog category header. It looks like the 'else' branch the content will be hidden? But the main branch is up to something too.

[Matt Zimmermann]

Hi Scott,

That code looks customized and you are correct, the else will cause the header to be hidden on anything smaller than a large screen. This is the default code for that section as shipped with the current version of Shadows:

<section class="o-layout o-layout--column-reverse o-layout--row-reverse--l o-layout--wide">
<div class="o-layout__item u-width-12 u-width-9--l">
<mvt:if expr="NOT ISNULL l.settings:category_title:image">
<section class="o-layout u-hidden u-flex--l">
<div class="o-layout__item">
<div class="x-hero" title="&mvte:category:name;">
<img src="&mvte:category_title:image;" alt="&mvte:category:name;" loading="lazy">
</div>
<br>
</div>
</section>
</mvt:if>

<section class="o-layout">
<div class="o-layout__item">
<mvt:item name="hdft" param="header" />
</div>
</section>

<section class="o-layout">
<div class="o-layout__item">
<mvt:item name="prod_ctgy_hdft" param="ctgy_header" />
</div>
</section>

[ids]

Hmmm, I am sure I didn't customize this page. However, this dev store is an MMUI converted store with Shadows 2 applied over it. Maybe something glitched or recalled an old template version and saved it by accident. Regardless, my question appears to be answered. Thanks.

Scott