Announcement

Collapse
No announcement yet.

Add phone icon to Small Top Banner on Mobile

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

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

    Leave a comment:


  • Matt Zimmermann
    replied
    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>

    Leave a comment:


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

    Leave a comment:


  • Matt Zimmermann
    replied
    Can you post a link to the site?

    Leave a comment:


  • eldon99
    started a topic Add phone icon to Small Top Banner on Mobile

    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?
Working...
X