Title: CSS Bugs
Last modified: October 9, 2020

---

# CSS Bugs

 *  [mwendell](https://wordpress.org/support/users/mwendell/)
 * (@mwendell)
 * [5 years, 7 months ago](https://wordpress.org/support/topic/css-bugs-6/)
 * Hello,
 * There are some bugs in the current version of WPMM that are causing CSS issues.
   The CSS issue is triggering an accessibility issue for ADA compliance.
 * Essentially, the CSS is being written out with no value; ie: “padding-left: px!
   important”
 * **Line 929 of class.wp-megamenu-base.php is using isset() instead of !empty()
   like the other lines in that section. The same issue exists on lines 947 and 
   964.**
 * Also if you’re concerned about not clogging up the logs with NOTICE and WARNING
   messages, and we all should be, you should be checking for both isset() and !
   empty();
 *     ```
       if ( isset( $options['options']['single_menu_padding_left'] ) && ! empty( $options['options']['single_menu_padding_left'] ) ) {
         $style .= "padding-left: {$options['options']['single_menu_padding_left']}px !important;";
       }
       ```
   
 * …or maybe include support for non-px units, with px as the default?
 *     ```
       if ( isset( $options['options']['single_menu_padding_left'] ) && ! empty( $options['options']['single_menu_padding_left'] ) ) {
         if ( is_numeric( $options['options']['single_menu_padding_left'] ) ) {
           $style .= "padding-left: {$options['options']['single_menu_padding_left']}px !important;";
         } else {
           $style .= "padding-left: {$options['options']['single_menu_padding_left']} !important;";
         }
       }
       ```
   
 * m.
    -  This topic was modified 5 years, 7 months ago by [mwendell](https://wordpress.org/support/users/mwendell/).

Viewing 3 replies - 1 through 3 (of 3 total)

 *  [Rejuan Ahamed](https://wordpress.org/support/users/rejuancse/)
 * (@rejuancse)
 * [5 years, 7 months ago](https://wordpress.org/support/topic/css-bugs-6/#post-13527732)
 * Hi [@mwendell](https://wordpress.org/support/users/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
 *  Thread Starter [mwendell](https://wordpress.org/support/users/mwendell/)
 * (@mwendell)
 * [5 years, 4 months ago](https://wordpress.org/support/topic/css-bugs-6/#post-13933810)
 * 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.
 *  Thread Starter [mwendell](https://wordpress.org/support/users/mwendell/)
 * (@mwendell)
 * [5 years, 4 months ago](https://wordpress.org/support/topic/css-bugs-6/#post-13934540)
 * 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 5 years, 4 months ago by [mwendell](https://wordpress.org/support/users/mwendell/).

Viewing 3 replies - 1 through 3 (of 3 total)

The topic ‘CSS Bugs’ is closed to new replies.

 * ![](https://ps.w.org/wp-megamenu/assets/icon-256x256.jpg?rev=2451874)
 * [WP Mega Menu](https://wordpress.org/plugins/wp-megamenu/)
 * [Frequently Asked Questions](https://wordpress.org/plugins/wp-megamenu/#faq)
 * [Support Threads](https://wordpress.org/support/plugin/wp-megamenu/)
 * [Active Topics](https://wordpress.org/support/plugin/wp-megamenu/active/)
 * [Unresolved Topics](https://wordpress.org/support/plugin/wp-megamenu/unresolved/)
 * [Reviews](https://wordpress.org/support/plugin/wp-megamenu/reviews/)

## Tags

 * [css](https://wordpress.org/support/topic-tag/css/)

 * 3 replies
 * 2 participants
 * Last reply from: [mwendell](https://wordpress.org/support/users/mwendell/)
 * Last activity: [5 years, 4 months ago](https://wordpress.org/support/topic/css-bugs-6/#post-13934540)
 * Status: not resolved