Home Forums Basel support forum "My Account" icon not showing in sticky header

"My Account" icon not showing in sticky header

Viewing 5 posts - 1 through 5 (of 5 total)
  • Author
    Posts
  • #39973

    vinirossi
    Participant

    I have added to my functions.php (Child-Theme) the following header config:

    add_filter( 'basel_header_configuration', 'basel_custom_header_configuration', 1, 1 );
    
    function basel_custom_header_configuration() {
    
    		return array(
    			'container' => array(
    				'wrapp-header' => array(
    					'logo',
    					'main_nav',
    					'right-column' => array(
    						'cart',
    						'header_links',
    						'mobile_icon',
    
    					)
    				)	
    			),
    		);
    }

    The “my-account” icon will be shown for header.color-scheme-light. For header.color-scheme-dark I had to add the following CSS to my styles.css:

    header.color-scheme-dark div.header-links.my-account-with-icon ul li a:before {
      color:#000000;
    }

    The problem is now, that when I scroll and sticky header gets visible, then there is not my header Icon within DOM, but the deactivated “Account / Log-in-out”:

    <div class="right-column">
    <div class="language-switcher"><div class="dropdown-wrap-cat"><ul class="dropdown-cat"><li class="current-lang">Deutsch</li><li><a href="https://en.vini-rossi.ch/">Englisch</a></li></ul></div></div>
    			<div class="shopping-cart basel-cart-design-3 basel-cart-icon cart-widget-opener">
    				<a href="https://vini-rossi.ch/warenkorb/">
    					<span>Cart (<span>o</span>)</span>
    					<span class="basel-cart-totals">
    															<span class="basel-cart-number">1</span>
    		
    		
    								<span class="subtotal-divider">/</span> 
    															<span class="basel-cart-subtotal"><span class="woocommerce-Price-amount amount"><span class="woocommerce-Price-currencySymbol">CHF</span>17.55</span></span>
    		
    		
    							</span>
    				</a>
    							</div>
    					<div class="header-links my-account-with-icon">
    				<ul>
    											<li><a href="https://vini-rossi.ch/account/">My Account</a></li>
    											<li><a href="https://vini-rossi.ch/account/customer-logout/">Logout</a></li>
    									</ul>		
    			</div>
    					<div class="mobile-nav-icon">
    				<span class="basel-burger"></span>
    			</div><!--END MOBILE-NAV-ICON-->
    		</div>

    The question is now: How to make custom header config also work on sticky header?

    #39975

    vinirossi
    Participant

    The problem can be seen here:

    #39986

    Artem Temos
    Keymaster

    Hi,

    Try to use this CSS snippet to show it on the sticky header

    div.sticky-header .right-column .header-links {
        display: inline-flex;
    }

    Regards

    #40012

    vinirossi
    Participant

    Perfect <3

    Many thanks again 🙂

    #40018

    Artem Temos
    Keymaster

    Great, you are welcome 🙂

Viewing 5 posts - 1 through 5 (of 5 total)