Announcement
Collapse
No announcement yet.
Add phone icon to Small Top Banner on Mobile
Collapse
X
-
Matt, thank you! That worked perfectly! Just when I think I have a grasp on breakpoints, I come up short.
-
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:
-
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>
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?Tags: None
Leave a comment: