Add phone icon to Small Top Banner on Mobile

[eldon99]

I am trying to tweak the Navigation Bar Top black banner, to add a phone icon to phone size breakpoints along side the header message. My attempt at the code is below:

<section class="o-layout u-bg-gray-50 u-color-white t-site-header__top-navigation &mvt:global:checkout_hidden;">
    <div class="o-layout__item u-width-10-s u-width-4--l u-width-7--w u-text-left">
        <mvt:item name="readytheme" param="banner( 'header_message' )" />
    </div>
    <div class="o-layout o-layout--align-center o-layout__item u-text-uppercase u-hidden u-flex--l u-width-8--l u-width-5--w t-site-header__links">
        <div class="o-layout__item">
            <mvt:item name="readytheme" param="navigationset( 'support_navigation' )" />
        </div>
        <div class="o-layout__item u-color-gray-10 u-text-center">
            <a class="u-color-white" href="tel:&mvt:global:store:phone;"><span class="u-icon-phone"></span> &mvt:global:store:phone;</a>
        </div>
    </div>
    <div class="o-layout o-layout--align-center o-layout__item u-text-uppercase u-hidden u-flex--xs u-width-2--xs u-text-right t-site-header__links">
        <div class="o-layout__item u-color-gray-10 u-text-center">
            <a href="tel:&mvt:global:store:phone;"><span class="u-icon-phone u-color-white"></span></a>
        </div>
    </div>
</section>

As you can see, I tried using an xs (extra small) breakpoint, which I made from a copy of the small breakpoint in grids.css, changed it to xs and change the min-width to max-width.

No matter what I try, I either get the phone icon to always show, regardless of size, or I cannot get it to show no matter what.

I am sure I am overthinking this, but what am I doing wrong?

[Matt Zimmermann]

Can you post a link to the site?

[eldon99]

Sent you a PM with the link. Not ready to post to the world yet.

[Matt Zimmermann]

I do not see a reference to any "--xs" classes in your style sheet. That being said, if you want to show the icon for the majority of phones, you could use this code:

<section class="o-layout u-bg-gray-50 u-color-white t-site-header__top-navigation &mvt:global:checkout_hidden;">
    <div class="o-layout__item u-width-10-s u-width-4--l u-width-7--w u-text-left">
        <mvt:item name="readytheme" param="banner( 'header_message' )"/>
    </div>
    <div class="o-layout o-layout--align-center o-layout__item u-text-uppercase u-hidden u-flex--l u-width-8--l u-width-5--w t-site-header__links">
        <div class="o-layout__item">
            <mvt:item name="readytheme" param="navigationset( 'support_navigation' )"/>
        </div>
        <div class="o-layout__item u-color-gray-10 u-text-center">
            <a class="u-color-white" href="tel:&mvt:global:store:phone;"><span class="u-icon-phone"></span> &mvt:global:store:phone;</a>
        </div>
    </div>
    <div class="o-layout o-layout--align-center o-layout__item u-text-uppercase u-hidden--m u-width-2 u-text-right t-site-header__links">
        <div class="o-layout__item u-color-gray-10 u-text-center">
            <a href="tel:&mvt:global:store:phone;"><span class="u-icon-phone u-color-white"></span></a>
        </div>
    </div>
</section>

[eldon99]

Matt, thank you! That worked perfectly! Just when I think I have a grasp on breakpoints, I come up short.