Logo in Fasten Header

[afiumano]

For some reason in the Fasten Header when I select "Use Image Dimensions" it is causing an inline style of style="max-width: 0px; max-height: 0px;" to be placed on the logo instead of using the image's dimensions. Is this a glitch or is there something I am missing?

[Matt Zimmermann]

Are you referring to the settings under ReadyThemes -> Look & Feel for the site logo? If so, we strongly discourage the use of those settings with, especially, the newer ReadyThemes as it can throw off some of the styling of the site.

[afiumano]

No - I was actually referring to Readythemes -> Images Tab - Storefront Small Hero. That is interesting to know about the site logo though as I haven't read that anywhere else...

[Matt Zimmermann]

Ah, in that case, you should see the width and height attributes added to the image along with the inline styles.

[afiumano]

The image is not even showing up because the inline style is set at 0 height and 0 width and nothing is overriding it.

[Matt Zimmermann]

Ah, I see what you are seeing and been able to duplicate the concern. I believe this may be a bug in the system; I am sending it over for diagnosis. For the time being, I would recommend using the specific dimensions and setting those to the dimensions of the image.

[afiumano]

Thanks

[Matt Zimmermann]

So it looks like the data for the width and height is strictly numeric and will default to '0' if nothing is assigned. I have updated the code to check if a specific width and height are being set and output accordingly. To make the change to your site, go to ReadyTheme -> Content Sections -> fasten_header and replace the code with the following:

<mvt:item name="readytheme" param="Load_Image('fasten_header_logo', l.settings:fasten_header_logo)" />
<section class="o-layout o-layout--align-center t-site-header__masthead" data-hook="fasten-header">
    <div class="o-layout__item u-width-2 u-text-center t-site-header__logo">
        <a href="&mvte:urls:SFNT:auto;" title="&mvt:global:store:name;" rel="nofollow">
            <mvt:if expr="l.settings:readytheme:fasten_header_logo:active">
                <mvt:if expr="l.settings:readytheme:fasten_header_logo:image_size EQ 1">
                    <img class="x-fasten-header__logo-image" src="&mvt:readytheme:fasten_header_logo:image;" alt="&mvt:readytheme:fasten_header_logo:image_alt;" style="max-width: &mvt:readytheme:fasten_header_logo:image_wdth;px; max-height: &mvt:readytheme:fasten_header_logo:image_hght;px;">
                <mvt:else>
                    <img class="x-fasten-header__logo-image" src="&mvt:readytheme:fasten_header_logo:image;" alt="&mvt:readytheme:fasten_header_logo:image_alt;">
                </mvt:if>
                <mvt:else>
                <mvt:if expr="l.settings:readytheme:logo_type EQ 'text'">
                    <div class="t-site-header__store-name">&mvt:readytheme:logo_name;</div>
                    <small class="t-site-header__store-tagline">&mvt:readytheme:logo_tagline;</small>
                <mvt:elseif expr="l.settings:readytheme:logo_type EQ 'image'">
                    <img class="x-fasten-header__logo-image" src="&mvte:readytheme:logo_image;" alt="&mvt:readytheme:logo_alt;">
                </mvt:if>
            </mvt:if>
        </a>
    </div>

    <div class="o-layout__item u-width-2 &mvte:global:checkout_hidden;">
        <a class="c-button u-bg-transparent x-omega-navigation__trigger t-primary-link" data-hook="open-omega" href="&mvte:urls:CTLG:auto;">Shop Categories <span class="u-font-tiny u-icon-chevron-down x-omega-navigation__trigger-icon t-prevent-events"></span></a>
    </div>

    <div class="o-layout__item u-width-4  u-width-5--wu-text-center &mvte:global:checkout_hidden;">
        <button class="c-button c-button--full c-button--large u-bg-transparent u-border-gray-30 u-color-gray-50 u-font-tiny t-open-search" data-hook="open-search" type="button"><span class="u-icon-search"></span> search</button>
    </div>

    <ul class="o-layout__item o-list-bare u-flex u-grids-3 u-text-center u-width-4 u-width-3--w t-site-header__masthead-customer-block &mvte:global:checkout_hidden;">
        <li class="o-layout__item u-block">
            <a class="t-primary-link" href="&mvte:urls:WLST:auto;">Wish List</a>
        </li>
        <li class="o-layout__item">
            <mvt:if expr="g.Basket:cust_id EQ 0">
                <a class="t-primary-link" href="&mvte:urls:LOGN:secure;">Sign In</a>
            <mvt:else>
                <a class="t-primary-link" href="&mvte:urls:ACLN:secure;">My Account</a>
            </mvt:if>
        </li>
        <li class="o-layout__item">
            <a class="t-primary-link t-site-header__basket-link" href="&mvte:urls:BASK:auto;">
                Cart
                <span class="u-bg-primary u-color-black t-site-header__basket-link-quantity t-prevent-events" data-hook="mini-basket-count">&mvte:global_minibasket:basket_count;</span>
            </a>
        </li>
    </ul>

    <div class="o-layout__item u-width-12 u-width-10--l u-hidden &mvte:global:checkout_shown;">
        <br class="u-hidden--m">
        <span class="c-heading-echo u-block u-text-bold u-text-center u-text-right--l u-text-uppercase u-color-gray-50"><span class="u-icon-secure"></span> Secure Checkout</span>
    </div>

</section>