CSS Bugs

Hi @mwendell,
Thanks for using the Mega Menu plugin. And thank you for noticing the bug. We will try to fix this issue in our next update.
Please don’t worry.
Thanks

Hi Rejuan,

I’m pretty surprised that this is still an issue in version 1.3.7 of the plugin. Three months ago I found the bug for you, gave you line numbers, and wrote out the fix!

Just for context, the reason this is such an issue is because websites need to pass ADA scrutiny. Testers for ADA accessibility will throw an error if you specify there must be padding, but do not define the size of that padding. Right now your plugin writes our “padding-left: px !important”, which is pretty broken.

m.

The wpmm_generate_css() function actually adds a lot of bad or empty CSS to the page which causes both accessibility and performance issues. I’ve fixed the whole function.

public function wpmm_generate_css(){
	$wpmm_layouts_option = wpmm_get_post_meta_by_keys('wpmm_layout');
	//wp_die(print_row($wpmm_layouts_option));
	if ( count($wpmm_layouts_option)){
		$style = '<style type="text/css">';
		foreach ($wpmm_layouts_option as $key => $value){
			$options = maybe_unserialize($value->meta_value);

			if ( ! empty($options['options']['width'])){
				$style .= ".wp-megamenu-item-{$value->post_id} > ul{ ";
					$width = $options['options']['width'];
					if ( is_numeric( $width ) ) {
						$width = $width.'px';
					}
					$style .= "width:{$width} !important ;";
				$style .= "}";
			}

			if ( ! empty($options['options']['strees_row_width'])) {
				$style .= '.wp-megamenu-wrap > ul.wp-megamenu > li.wpmm_mega_menu > .wpmm-strees-row-container > ul.wp-megamenu-sub-menu { ';
					$style .= "width: {$options['options']['strees_row_width']}px !important;";
				$style .= '}';

				$style .= ".wp-megamenu > li.wp-megamenu-item-{$value->post_id}.wpmm-item-fixed-width > ul.wp-megamenu-sub-menu { ";
					$style .= "width: {$options['options']['strees_row_width']}px !important;";
					// $style .= "margin-left: -".($options['options']['strees_row_width'])."px !important;";
					$style .= "left: calc(100% - ".(intval($options['options']['strees_row_width']) / 2)."px - 20px) !important";
				$style .= '}';
			} else {
				$style .= '.wp-megamenu-wrap > ul.wp-megamenu > li.wpmm_mega_menu > .wpmm-strees-row-container > ul.wp-megamenu-sub-menu { ';
					$style .= "width: 100% !important;";
				$style .= '}';

				$style .= ".wp-megamenu > li.wp-megamenu-item-{$value->post_id}.wpmm-item-fixed-width > ul.wp-megamenu-sub-menu { ";
					$style .= "width: 100% !important;";
				$style .= '}';
			}

			// .wp-megamenu > li.wpmm-item-fixed-width
			if ( ! empty($options['options']['dropdown_alignment']) ){
				$position = $options['options']['dropdown_alignment'];

				//.wp-megamenu-wrap .wpmm-nav-wrap > ul.wp-megamenu li.wpmm_dropdown_menu ul.wp-megamenu-sub-menu li.menu-item-has-children > ul.wp-megamenu-sub-menu
				$style .= ".wp-megamenu-wrap .wpmm-nav-wrap > ul.wp-megamenu li.wpmm_dropdown_menu ul.wp-megamenu-sub-menu li.menu-item-has-children.wp-megamenu-item-{$value->post_id}.wpmm-submenu-{$position} > ul.wp-megamenu-sub-menu {";
					$style .= ($position === 'left') ? 'right: 100%;': 'left: 100%;';
				$style .= "}";
			}

			$temp_style = "";
			# Single menu font size.
			if ( ! empty($options['options']['single_menu_font_size'])){
				$temp_style .= "font-size: {$options['options']['single_menu_font_size']}px !important;";
			}
			# Single menu color.
			if ( ! empty($options['options']['single_item_text_color'])){
				$temp_style .= "color: {$options['options']['single_item_text_color']} !important;";
			}
			# Single menu font color.
			if ( ! empty($options['options']['single_menu_font_weight'])){
				$temp_style .= "font-weight: {$options['options']['single_menu_font_weight']} !important;";
			}
			# Single menu font color.
			if ( ! empty($options['options']['single_menu_line_height'])){
				$temp_style .= "line-height: {$options['options']['single_menu_line_height']}px !important;";
			}
			# Single menu font color.
			if ( ! empty($options['options']['item_align'])){
				$temp_style .= "text-align: {$options['options']['item_align']} !important;";
			}
			if ( ! empty( $temp_style ) ) {
				$style .= ".wpmm-nav-wrap ul.wp-megamenu>li ul.wp-megamenu-sub-menu #wp-megamenu-item-{$value->post_id}>a { {$temp_style} }";
			}

			$temp_style = "";
			if ( ! empty( $options['options']['single_menu_item_border_separator_width'] ) && ! empty( $options['options']['single_menu_item_border_separator_type'] ) && ! empty( $options['options']['single_menu_item_border_separator_color'] )){
				$temp_style .= "border-bottom: {$options['options']['single_menu_item_border_separator_width']}px {$options['options']['single_menu_item_border_separator_type']} {$options['options']['single_menu_item_border_separator_color']} !important;";
			}
			if ( ! empty( $temp_style ) ) {
				$style .= ".wpmm-nav-wrap .wp-megamenu>li>ul.wp-megamenu-sub-menu li#wp-megamenu-item-{$value->post_id}>a { {$temp_style} }";
			}

			# Margin  - Submenu item menu margin.
			$style .= "li#wp-megamenu-item-{$value->post_id}> ul ul ul> li { ";
			foreach ( ['top', 'right', 'bottom', 'left'] as $side ) {
				$this_option = "single_menu_margin_{$side}";
				if ( isset( $options['options'][$this_option] ) && ! empty( $options['options'][$this_option] ) ) {
					if ( is_numeric( $options['options'][$this_option] ) ) {
						$style .= "margin-{$side}: {$options['options'][$this_option]}px !important;";
					} else {
						$style .= "margin-{$side}: {$options['options'][$this_option]} !important;";
					}
				}
			}
			$style .= "width: 100%; display: inline-block;";
			$style .= "}";

			# Padding  - Submenu item menu padding.
			$temp_style = "";
			foreach ( ['top', 'right', 'bottom', 'left'] as $side ) {
				$this_option = "single_menu_padding_{$side}";
				if ( isset( $options['options'][$this_option] ) && ! empty( $options['options'][$this_option] ) ) {
					if ( is_numeric( $options['options'][$this_option] ) ) {
						$temp_style .= "padding-{$side}: {$options['options'][$this_option]}px !important;";
					} else {
						$temp_style .= "padding-{$side}: {$options['options'][$this_option]} !important;";
					}
				}
			}
			if ( ! empty( $temp_style ) ) {
				$style .= " li#wp-megamenu-item-{$value->post_id} a { {$temp_style} }";
			}

			$temp_style = "";
			foreach ( ['top', 'right', 'bottom', 'left'] as $side ) {
				$this_option = "wp_megamenu_submenu_menu_padding_{$side}";
				if ( isset( $options['options'][$this_option] ) && ! empty( $options['options'][$this_option] ) ) {
					if ( is_numeric( $options['options'][$this_option] ) ) {
						$temp_style .= "padding-{$side}: {$options['options'][$this_option]}px !important;";
					} else {
						$temp_style .= "padding-{$side}: {$options['options'][$this_option]} !important;";
					}
				}
			}
			if ( ! empty( $temp_style ) ) {
				$style .= "#wp-megamenu-item-{$value->post_id}> .wp-megamenu-sub-menu { {$temp_style} }";
			}

			//Setting background image if any
			if ( ! empty($options['options']['menu_bg_image'])){
				$style .= ".wp-megamenu-item-{$value->post_id} > ul, .wp-megamenu-item-{$value->post_id} > div > ul.wp-megamenu-sub-menu{ ";
				$style .= "background-image: url('{$options['options']['menu_bg_image']}') !important;";
				$style .= "background-size: cover !important;";
				$style .= "background-repeat: no-repeat !important;";
				$style .= "background-position: center !important;";
				$style .= "}";
			}
		}
		$style .= '</style>';
		echo $style;
	}
}

m.

• This reply was modified 3 years, 10 months ago by mwendell.