Resolvedmobie icon color change

Viewing 4 posts - 1 through 4 (of 4 total)
  • Author
    Posts
  • #33351
    luukkaass
    Participant

    Hi it is possible o change color of these icons ?

    https://www.dropbox.com/s/xr22bqua9p2sysn/Sn%C3%ADmka%20obrazovky%202022-03-20%20o%2010.22.46.png?dl=0

    Thank you

    Lukas

    #33352
    stefanioancretu
    Participant

    @media only screen and (max-width: 768px){
    #header .lafka-top-bar-message span.lafka-top-bar-phone a:before {
    background-color: #000!important;
    }

    a.mob-menu-toggle i{
    background-color: #000;
    }
    }

    #33353
    stefanioancretu
    Participant

    Or if u want to use color picker, install Code snippets and add new snippet

    // Customize appearance options for toggle menu button and phone button on mobile
    function menu_and_phone_buttons_style( $wp_customize ) {
    
    	$wp_customize->add_setting('menu_button_background_color', array(
    		'default' => '#f2002d',
    		'transport' => 'refresh',
    	));
    	
    	$wp_customize->add_setting('menu_button_background_hover_color', array(
    		'default' => '#333333',
    		'transport' => 'refresh',
    	));
    	
    	$wp_customize->add_setting('menu_button_color', array(
    		'default' => '#ffffff',
    		'transport' => 'refresh',
    	));
    	
    	$wp_customize->add_setting('phone_button_background_color', array(
    		'default' => '#a1ba32',
    		'transport' => 'refresh',
    	));
    	
    	$wp_customize->add_setting('phone_button_color', array(
    		'default' => '#ffffff',
    		'transport' => 'refresh',
    	));
    
    	$wp_customize->add_section('menu_phone_styles_section', array(
    		'title' => __('Mobile phone and menu styles', 'Lafka'),
    		'priority' => 30,
    	));
    
    	$wp_customize->add_control( new WP_Customize_Color_Control( $wp_customize, 'menu_button_background_color_control', array(
    		'label' => __('Toggle menu background color', 'Lafka'),
    		'section' => 'menu_phone_styles_section',
    		'settings' => 'menu_button_background_color',
    	) ) );
    	
    	$wp_customize->add_control( new WP_Customize_Color_Control( $wp_customize, 'menu_button_background_hover_color_control', array(
    		'label' => __('Toggle menu background hover color', 'Lafka'),
    		'section' => 'menu_phone_styles_section',
    		'settings' => 'menu_button_background_hover_color',
    	) ) );
    
    	$wp_customize->add_control( new WP_Customize_Color_Control( $wp_customize, 'menu_button_color_control', array(
    		'label' => __('Toggle menu color', 'Lafka'),
    		'section' => 'menu_phone_styles_section',
    		'settings' => 'menu_button_color',
    	) ) );
    	
    	$wp_customize->add_control( new WP_Customize_Color_Control( $wp_customize, 'phone_button_background_color_control', array(
    		'label' => __('Phone button background color', 'Lafka'),
    		'section' => 'menu_phone_styles_section',
    		'settings' => 'phone_button_background_color',
    	) ) );
    
    	$wp_customize->add_control( new WP_Customize_Color_Control( $wp_customize, 'phone_button_color_control', array(
    		'label' => __('Phone button color', 'Lafka'),
    		'section' => 'menu_phone_styles_section',
    		'settings' => 'phone_button_color',
    	) ) );	
    
    }
    
    add_action('customize_register', 'menu_and_phone_buttons_style');
    
    // Output CSS in head
    function output_menu_and_phone_css() { ?>
    
    	<style type="text/css">
    		@media only screen and (max-width: 768px){
    			#header .lafka-top-bar-message span.lafka-top-bar-phone a:before {
    				background-color: <?php echo get_theme_mod('phone_button_background_color'); ?>!important;
    				color:<?php echo get_theme_mod('phone_button_color'); ?>!important;
    			}
    
    			a.mob-menu-toggle i{
    				background-color:<?php echo get_theme_mod('menu_button_background_color'); ?>;
    				color: <?php echo get_theme_mod('menu_button_color'); ?>;
    			}
    			
    			a.mob-menu-toggle:hover i{
    				background-color:<?php echo get_theme_mod('menu_button_background_hover_color'); ?>;
    			}
    		}
    	</style>
    
    <?php }
    add_action('wp_head', 'output_menu_and_phone_css');

    After add this, you can select colors from customizer -> ‘Mobile phone and menu styles’

    #33354
    luukkaass
    Participant

    Great thank you

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

You must be logged in and have valid license to reply to this topic.

License required for the following item
Login and Registration Log in · Register