Skip to content

fix social colors not working for mobile header #773

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
pallavic27 merged 1 commit into from
Apr 28, 2026
Merged

fix social colors not working for mobile header #773

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
1 commit
Select commit
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
10 changes: 8 additions & 2 deletions core/includes/customizer/assets/js/customize-preview-color-control.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -3720,6 +3720,8 @@
val.bind(function(newval){
if ( 'filled' === newval || '' == newval ) {
$( '.site-mobile-header-item .header-layouts.social-icon .social-icons .responsive-social-icon .responsive-social-icon-anchor' ).css( 'background-color', '#EDF2F7' );
} else {
$( '.site-mobile-header-item .header-layouts.social-icon .social-icons .responsive-social-icon .responsive-social-icon-anchor' ).css( 'background-color', '' );
}
});
});
Expand Down Expand Up @@ -3867,8 +3869,11 @@
api( 'responsive_mobile_header_social_item_background_color', function(val){
val.bind(function(newval){
var header_social_item_use_brand_colors = api('responsive_mobile_header_social_item_use_brand_colors').get();
if ( 'no' === header_social_item_use_brand_colors ) {
var mobile_header_social_item_style = api('responsive_mobile_header_social_item_style').get();
if ( 'no' === header_social_item_use_brand_colors && ( 'filled' === mobile_header_social_item_style || '' == mobile_header_social_item_style ) ) {
$( '.site-mobile-header-item .header-layouts.social-icon .social-icons .responsive-social-icon .responsive-social-icon-anchor' ).css( 'background-color', newval );
} else if ( 'outline' === mobile_header_social_item_style ) {
$( '.site-mobile-header-item .header-layouts.social-icon .social-icons .responsive-social-icon .responsive-social-icon-anchor' ).css( 'background-color', '' );
}
});
});
Expand Down Expand Up @@ -3928,7 +3933,8 @@
api( 'responsive_mobile_header_social_item_background_hover_color', function(val){
val.bind(function(newval){
var header_social_item_use_brand_colors = api('responsive_mobile_header_social_item_use_brand_colors').get();
if ( 'no' === header_social_item_use_brand_colors ) {
var mobile_header_social_item_style = api('responsive_mobile_header_social_item_style').get();
if ( 'no' === header_social_item_use_brand_colors && ( 'filled' === mobile_header_social_item_style || '' == mobile_header_social_item_style ) ) {
$( '.site-mobile-header-item .header-layouts.social-icon .social-icons .responsive-social-icon .responsive-social-icon-anchor:hover' ).css( 'background-color', newval );
}
});
Expand Down
2 changes: 1 addition & 1 deletion core/includes/customizer/custom-styles.php
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -6186,7 +6186,7 @@ function responsive_build_responsive_margin_spacing_css( $margin ) {
}

// Mobile Header Social
if( Responsive\Core\responsive_check_element_in_mobile_tablet_items( 'social', 'header ') ) {
if( Responsive\Core\responsive_check_element_in_mobile_tablet_items( 'social', 'header' ) ) {
$mobile_header_social_item_spacing = get_theme_mod(
'responsive_mobile_header_social_item_spacing', 0 );
if( $mobile_header_social_item_spacing > 0 ) {
Expand Down
59 changes: 59 additions & 0 deletions core/includes/customizer/helper.php
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -3629,6 +3629,65 @@ function responsive_show_social_background_colors() {
}
}

if ( ! function_exists( 'responsive_show_mobile_social_background_colors' ) ) {
/**
* Determines whether mobile header social icons should display with a filled background color.
*
* @return bool True if the mobile header social icons should have a filled background.
*/
function responsive_show_mobile_social_background_colors() {
$social_item_style = get_theme_mod( 'responsive_mobile_header_social_item_style', 'filled' );
if ( 'filled' === $social_item_style ) {
return true;
}
return false;
}
}

if ( ! function_exists( 'responsive_show_header_social_custom_colors' ) ) {
/**
* Show header social custom color controls only when brand colors are disabled.
*
* @return bool True when "Use Brand Colors" is set to "No".
*/
function responsive_show_header_social_custom_colors() {
return 'no' === get_theme_mod( 'responsive_header_social_item_use_brand_colors', 'no' );
}
}

if ( ! function_exists( 'responsive_show_mobile_header_social_custom_colors' ) ) {
/**
* Show mobile header social custom color controls only when brand colors are disabled.
*
* @return bool True when "Use Brand Colors" is set to "No".
*/
function responsive_show_mobile_header_social_custom_colors() {
return 'no' === get_theme_mod( 'responsive_mobile_header_social_item_use_brand_colors', 'no' );
}
}

if ( ! function_exists( 'responsive_show_header_social_background_colors_control' ) ) {
/**
* Show header social background controls only when style is filled and brand colors are disabled.
*
* @return bool True when "Social Style" is "Filled" and "Use Brand Colors" is "No".
*/
function responsive_show_header_social_background_colors_control() {
return responsive_show_social_background_colors() && responsive_show_header_social_custom_colors();
}
}

if ( ! function_exists( 'responsive_show_mobile_header_social_background_colors_control' ) ) {
/**
* Show mobile header social background controls only when style is filled and brand colors are disabled.
*
* @return bool True when "Social Style" is "Filled" and "Use Brand Colors" is "No".
*/
function responsive_show_mobile_header_social_background_colors_control() {
return responsive_show_mobile_social_background_colors() && responsive_show_mobile_header_social_custom_colors();
}
}

function responsive_font_presets_control( $wp_customize, $element, $label, $section, $priority, $default = '', $transport = 'postMessage', $description = '' ) {

$choices = array(
Expand Down
4 changes: 2 additions & 2 deletions core/includes/customizer/settings/class-responsive-header-social-customizer.php
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -128,9 +128,9 @@ public function customizer_options( $wp_customize ) {
);
responsive_select_button_control( $wp_customize, 'header_social_item_use_brand_colors', __( 'Use Brand Colors', 'responsive' ), 'responsive_header_social', 60, $social_item_use_brands_colors_choices, 'no', null );

responsive_color_control( $wp_customize, 'header_social_item', __( 'Colors', 'responsive' ), 'responsive_header_social', 65, Responsive\Core\get_responsive_customizer_defaults( 'header_social_item_color' ), null, '', true, Responsive\Core\get_responsive_customizer_defaults( 'header_social_item_hover_color' ), 'header_social_item_hover' );
responsive_color_control( $wp_customize, 'header_social_item', __( 'Colors', 'responsive' ), 'responsive_header_social', 65, Responsive\Core\get_responsive_customizer_defaults( 'header_social_item_color' ), 'responsive_show_header_social_custom_colors', '', true, Responsive\Core\get_responsive_customizer_defaults( 'header_social_item_hover_color' ), 'header_social_item_hover' );

responsive_color_control( $wp_customize, 'header_social_item_background', __( 'Background Colors', 'responsive' ), 'responsive_header_social', 66, Responsive\Core\get_responsive_customizer_defaults( 'header_social_item_bg_color' ), 'responsive_show_social_background_colors', '', true, Responsive\Core\get_responsive_customizer_defaults( 'header_social_item_bg_hover_color' ), 'header_social_item_background_hover' );
responsive_color_control( $wp_customize, 'header_social_item_background', __( 'Background Colors', 'responsive' ), 'responsive_header_social', 66, Responsive\Core\get_responsive_customizer_defaults( 'header_social_item_bg_color' ), 'responsive_show_header_social_background_colors_control', '', true, Responsive\Core\get_responsive_customizer_defaults( 'header_social_item_bg_hover_color' ), 'header_social_item_background_hover' );

responsive_separator_control( $wp_customize, 'header_social_item_border_spacing', esc_html__( 'Border', 'responsive' ), 'responsive_header_social', 70 );

Expand Down
4 changes: 2 additions & 2 deletions core/includes/customizer/settings/class-responsive-mobile-header-social-customizer.php
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -128,9 +128,9 @@ public function customizer_options( $wp_customize ) {
);
responsive_select_button_control( $wp_customize, 'mobile_header_social_item_use_brand_colors', __( 'Use Brand Colors', 'responsive' ), 'responsive_mobile_header_social', 60, $social_item_use_brands_colors_choices, 'no', null );

responsive_color_control( $wp_customize, 'mobile_header_social_item', __( 'Colors', 'responsive' ), 'responsive_mobile_header_social', 65, Responsive\Core\get_responsive_customizer_defaults( 'header_social_item_color' ), null, '', true, Responsive\Core\get_responsive_customizer_defaults( 'header_social_item_hover_color' ), 'mobile_header_social_item_hover' );
responsive_color_control( $wp_customize, 'mobile_header_social_item', __( 'Colors', 'responsive' ), 'responsive_mobile_header_social', 65, Responsive\Core\get_responsive_customizer_defaults( 'header_social_item_color' ), 'responsive_show_mobile_header_social_custom_colors', '', true, Responsive\Core\get_responsive_customizer_defaults( 'header_social_item_hover_color' ), 'mobile_header_social_item_hover' );

responsive_color_control( $wp_customize, 'mobile_header_social_item_background', __( 'Background Colors', 'responsive' ), 'responsive_mobile_header_social', 66, Responsive\Core\get_responsive_customizer_defaults( 'header_social_item_bg_color' ), 'responsive_show_social_background_colors', '', true, Responsive\Core\get_responsive_customizer_defaults( 'header_social_item_bg_hover_color' ), 'mobile_header_social_item_background_hover' );
responsive_color_control( $wp_customize, 'mobile_header_social_item_background', __( 'Background Colors', 'responsive' ), 'responsive_mobile_header_social', 66, Responsive\Core\get_responsive_customizer_defaults( 'header_social_item_bg_color' ), 'responsive_show_mobile_header_social_background_colors_control', '', true, Responsive\Core\get_responsive_customizer_defaults( 'header_social_item_bg_hover_color' ), 'mobile_header_social_item_background_hover' );

responsive_separator_control( $wp_customize, 'mobile_header_social_item_border_spacing', esc_html__( 'Border', 'responsive' ), 'responsive_mobile_header_social', 70 );

Expand Down