Announcement

Collapse
No announcement yet.

Add phone icon to Small Top Banner on Mobile

Collapse
X
  • Filter
  • Time
  • Show
Clear All
new posts

  • Add phone icon to Small Top Banner on Mobile

    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:

    HTML 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 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?

  • Can you post a link to the site?
    Matt Zimmermann
    Director of UI/UX Standards and Theme Development
    / Miva, Inc.

    Comment


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

      Comment


      • 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:
        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>
        Matt Zimmermann
        Director of UI/UX Standards and Theme Development
        / Miva, Inc.

        Comment


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

          Comment

          Working...
          X

          This website uses cookies to identify visitors, track visitors to our website, store login session information and to remember your user preferences. By continuing to use this site you agree to our use of cookies. Learn More.

          This website uses cookies. By continuing to use this site you agree to our use of cookies. Learn More.

          Accept