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:
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?
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?
Comment