BuddyPanel Formatting Problem in Mobile View After Boss. 2.0 Update

[W David Bayless]

Since updating to the Boss. 2.0 (I’m currently running Boss. 2.0.3 with Social Learner for Sensei 1.0.6), the menu item cells in mobile view have some formatting problems. More specifically, a) the cell heights vary, and b) there is a mismatch between the on-hover contrasting color and the menu item cell.

These problems seem to occur in Mobile view on iOS and Android mobile devices as well as Chrome, Firefox, and Edge desktop browsers.

Screenshots attached.

As always, thanks for your help.

[Anonymous]

Hi @dbayless, thanks for point this we will check this and get back to you.

Regards
Pallavi

[W David Bayless]

Thank you, Pallavi.

[Anonymous]

🙂

[Varun Dubey]

Hi @dbayless

Inside Social Learner I have modified some codes form line 425 to 449 inside functions.php
It will fix the issue

if ( boss_get_option( 'mini_logo_switch' ) && boss_get_option( 'boss_small_logo', 'id' ) ) {
		$css .= "
                /* .header-navigation > div > ul {
                    line-height: " . $small_logo_h . "px;
                    height: " . $small_logo_h . "px;
                } */
                #header-menu > ul > li {
                    height: " . $small_logo_h . "px;
                    line-height: " . $small_logo_h . "px;
                }
                ";
	}

	if ( boss_get_option( 'logo_switch' ) && boss_get_option( 'boss_logo', 'id' ) ) {
		$css .= "
                /* .left-menu-open .header-navigation > div > ul {
                    line-height: " . $big_logo_h . "px;
                    height: " . $big_logo_h . "px;
                } */
                .left-menu-open #header-menu > ul > li {
                    height: " . $big_logo_h . "px;
                    line-height: " . $big_logo_h . "px;
                }
                ";
	}

with

if ( boss_get_option( 'mini_logo_switch' ) && boss_get_option( 'boss_small_logo', 'id' ) ) {
		$css .= "
                .is-desktop #header-menu > ul > li {
                    height: " . $small_logo_h . "px;
                    line-height: " . $small_logo_h . "px;
                }
                ";
	}

	if ( boss_get_option( 'logo_switch' ) && boss_get_option( 'boss_logo', 'id' ) ) {
		$css .= "
                .is-desktop.left-menu-open #header-menu > ul > li {
                    height: " . $big_logo_h . "px;
                    line-height: " . $big_logo_h . "px;
                }
                ";
	}

Regards
Varun Dubey

[Varun Dubey]

You can also add to improve the padding for mobile submenus

.is-mobile .menu-panel #header-menu .sub-menu-wrap .sub-menu { padding: 0; }

Regards

[W David Bayless]

Looks good, Varun. Thank you. I assume this fix will be incorporated in the next Social Learner child theme update?

[Varun Dubey]

Hi @dbayless
yes it will be added sure, I have already made these edits at your site
Regards
Varun Dueby