[luukkaass]

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

[stefanioancretu]

@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;
}
}

[stefanioancretu]

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’

[luukkaass]

Great thank you

[Author]

Posts