storefront_handheld_footer_bar disappears when adding item to cart

When viewing my shop page at mobile size, after adding a product to the cart, the storefront_handheld_footer_bar in the footer disappears. If I click on where the footer is, it reappears.

I am using Storefront Theme and the WooCommerce Better Usability plugin. In the plugin, on the shop tab, I have ” Allow to change product quantity on shop page” selected. I have not added or changed any styles on the footer. When I click “add to cart” link, the ::before pseudo-element \on the storefront_handheld_footer_bar is removed. When I click the footer, ::before is added back in. When I uncheck “Allow to change product quantity on shop page”, the problem with the footer bar is fixed, but I can’t change the quantity on the shop page.

I have tried adding a ::before to my css, but it also is removed on adding to the cart.
Any ideas on how I can fix this?

Before adding item to cart:

<div class="storefront-handheld-footer-bar">
    ::before
  <ul class="columns-3">
    <li class="my-account">
      <a href="https://hyixteam.com/my-account/">My Account</a>					 
    </li>
    <li class="search">
      <a href="">Search</a>			
      <div class="site-search">
        <div class="widget woocommerce widget_product_search">
          <form role="search" method="get" class="woocommerce-product-search" action="https://hyixteam.com/">
	    <label class="screen-reader-text" for="woocommerce-product-search-field-2">Search for:</label>
	    <input type="search" id="woocommerce-product-search-field-2" class="search-field" placeholder="Search products…" value="" name="s">
	    <button type="submit" value="Search">Search</button>
	    <input type="hidden" name="post_type" value="product">
          </form>
        </div>			
      </div>
    </li>
    <li class="cart">
      <a class="footer-cart-contents" href="https://hyixteam.com/cart/" title="View your shopping cart">
      <span class="count">45</span>
      </a>	
    </li>
  </ul>
</div>

and after:

<div class="storefront-handheld-footer-bar">
   <ul class="columns-3">
     <li class="my-account">
	<a href="https://hyixteam.com/my-account/">My Account</a>					 
     </li>
     <li class="search">
	<a href="">Search</a>	
        <div class="site-search">
	  <div class="widget woocommerce widget_product_search">
            <form role="search" method="get" class="woocommerce-product-search" action="https://hyixteam.com/">
	      <label class="screen-reader-text" for="woocommerce-product-search-field-2">Search for:</label>
	      <input type="search" id="woocommerce-product-search-field-2" class="search-field" placeholder="Search products…" value="" name="s">
	      <button type="submit" value="Search">Search</button>
	      <input type="hidden" name="post_type" value="product">
            </form>
          </div>			
        </div>
      </li>
      <li class="cart">
	<a class="footer-cart-contents" href="https://hyixteam.com/cart/" title="View your shopping cart">
	  <span class="count">45</span>
	</a>
      </li>
    </ul>
</div>

• This topic was modified 4 years, 2 months ago by takadre.

The page I need help with: [log in to see the link]