Clickable elements too close together

Hi Ivan,

You have the same menu displayed on both desktop and mobile, so ignore the “Mobile (optional)” menu location and it’s theme. Just work on the Primary Menu and the theme assigned to that location.

I suspect – but can’t be sure, as I don’t know exactly which elements are too close together – it is because you have the toggle bar height set to 20px (on your primary menu theme), so try increasing that.

Thank you for your answer, I am very grateful.

Unfortunately, it didn’t help. My mobile menu doesn’t change a bit, no matter what I change in both, the main menu theme and the mobile theme.

Can you use the exported theme to see what is my problem?

I exported both, the mobile and the Main menus. Here there is the Mobile theme:

{“title”:”MobileTheme”,”container_background_from”:”rgba(0, 0, 0, 0)”,”container_background_to”:”rgba(0, 0, 0, 0)”,”container_padding_top”:”20px”,”container_padding_bottom”:”20px”,”menu_item_background_hover_from”:”rgba(0, 0, 0, 0)”,”menu_item_background_hover_to”:”rgba(0, 0, 0, 0)”,”menu_item_spacing”:”40px”,”menu_item_link_font_size”:”24px”,”menu_item_link_height”:”120px”,”menu_item_link_weight”:”bold”,”menu_item_link_text_transform”:”uppercase”,”menu_item_link_color_hover”:”rgb(245, 246, 148)”,”menu_item_link_weight_hover”:”bold”,”menu_item_link_padding_left”:”0px”,”menu_item_link_padding_right”:”0px”,”menu_item_link_padding_top”:”20px”,”menu_item_link_padding_bottom”:”20px”,”menu_item_border_color_hover”:”rgb(255, 255, 255)”,”panel_background_from”:”rgba(0, 0, 0, 0.47)”,”panel_background_to”:”rgba(34, 34, 34, 0.92)”,”panel_border_radius_bottom_left”:”20px”,”panel_border_radius_bottom_right”:”20px”,”panel_header_color”:”rgb(255, 255, 255)”,”panel_header_font_size”:”24px”,”panel_header_padding_top”:”20px”,”panel_header_padding_bottom”:”20px”,”panel_header_border_color”:”#555″,”panel_widget_padding_left”:”25px”,”panel_widget_padding_bottom”:”25px”,”panel_font_size”:”26px”,”panel_font_color”:”#666″,”panel_font_family”:”inherit”,”panel_second_level_font_color”:”rgb(255, 255, 255)”,”panel_second_level_font_color_hover”:”rgb(245, 246, 148)”,”panel_second_level_text_transform”:”uppercase”,”panel_second_level_font”:”inherit”,”panel_second_level_font_size”:”26px”,”panel_second_level_font_weight”:”bold”,”panel_second_level_font_weight_hover”:”bold”,”panel_second_level_text_decoration”:”none”,”panel_second_level_text_decoration_hover”:”none”,”panel_second_level_padding_top”:”20px”,”panel_second_level_padding_bottom”:”20px”,”panel_second_level_border_color”:”#555″,”panel_third_level_font_color”:”rgb(241, 241, 241)”,”panel_third_level_font_color_hover”:”rgba(245, 246, 148, 0.91)”,”panel_third_level_font”:”inherit”,”panel_third_level_font_size”:”26px”,”panel_third_level_font_weight_hover”:”bold”,”panel_third_level_padding_left”:”15px”,”panel_third_level_padding_top”:”20px”,”panel_third_level_padding_bottom”:”20px”,”flyout_width”:”150px”,”flyout_menu_item_divider_color”:”rgb(255, 255, 255)”,”flyout_link_size”:”26px”,”flyout_link_color”:”#666″,”flyout_link_color_hover”:”#666″,”flyout_link_family”:”inherit”,”line_height”:”2″,”shadow”:”on”,”shadow_horizontal”:”5px”,”shadow_vertical”:”5px”,”shadow_blur”:”3px”,”shadow_spread”:”5px”,”shadow_color”:”rgba(0, 0, 0, 0.33)”,”toggle_background_from”:”rgba(0, 0, 0, 0.3)”,”toggle_background_to”:”rgba(0, 0, 0, 0.3)”,”toggle_bar_height”:”120px”,”mobile_menu_item_height”:”120px”,”mobile_menu_force_width”:”on”,”mobile_background_from”:”#222″,”mobile_background_to”:”#222″,”mobile_menu_item_link_font_size”:”36px”,”mobile_menu_item_link_color”:”#ffffff”,”mobile_menu_item_link_text_align”:”left”,”mobile_menu_item_link_color_hover”:”#ffffff”,”mobile_menu_item_background_hover_from”:”#333″,”mobile_menu_item_background_hover_to”:”#333″,”custom_css”:”\/** Push menu onto new line **\/ \r\n#{$wrap} { \r\n clear: both; \r\n}\r\n\r\n@include mobile {\r\n .mega-menu-main-menu #site-navigation-wrap {\r\n float: none;\r\n right: auto;\r\n }\r\n}\r\n\r\n”}

And here is the main theme:
{“title”:”MyMegaMenu”,”container_background_from”:”rgba(0, 0, 0, 0)”,”container_background_to”:”rgba(0, 0, 0, 0)”,”menu_item_background_hover_from”:”rgba(0, 0, 0, 0)”,”menu_item_background_hover_to”:”rgba(0, 0, 0, 0)”,”menu_item_spacing”:”20px”,”menu_item_link_font_size”:”12px”,”menu_item_link_height”:”80px”,”menu_item_link_weight”:”bold”,”menu_item_link_text_transform”:”uppercase”,”menu_item_link_color_hover”:”rgb(245, 246, 148)”,”menu_item_link_weight_hover”:”bold”,”menu_item_link_padding_left”:”0px”,”menu_item_link_padding_right”:”0px”,”menu_item_link_padding_bottom”:”20px”,”menu_item_border_color_hover”:”rgb(255, 255, 255)”,”panel_background_from”:”rgba(0, 0, 0, 0.47)”,”panel_background_to”:”rgba(34, 34, 34, 0.92)”,”panel_border_radius_bottom_left”:”20px”,”panel_border_radius_bottom_right”:”20px”,”panel_header_color”:”rgb(255, 255, 255)”,”panel_header_font_size”:”12px”,”panel_header_border_color”:”#555″,”panel_font_size”:”14px”,”panel_font_color”:”#666″,”panel_font_family”:”inherit”,”panel_second_level_font_color”:”rgb(255, 255, 255)”,”panel_second_level_font_color_hover”:”rgb(245, 246, 148)”,”panel_second_level_text_transform”:”uppercase”,”panel_second_level_font”:”inherit”,”panel_second_level_font_size”:”12px”,”panel_second_level_font_weight”:”bold”,”panel_second_level_font_weight_hover”:”bold”,”panel_second_level_text_decoration”:”none”,”panel_second_level_text_decoration_hover”:”none”,”panel_second_level_border_color”:”#555″,”panel_third_level_font_color”:”rgb(241, 241, 241)”,”panel_third_level_font_color_hover”:”rgba(245, 246, 148, 0.91)”,”panel_third_level_font”:”inherit”,”panel_third_level_font_size”:”12px”,”panel_third_level_font_weight_hover”:”bold”,”flyout_width”:”150px”,”flyout_menu_item_divider_color”:”rgb(255, 255, 255)”,”flyout_link_size”:”14px”,”flyout_link_color”:”#666″,”flyout_link_color_hover”:”#666″,”flyout_link_family”:”inherit”,”line_height”:”20″,”shadow”:”on”,”shadow_horizontal”:”5px”,”shadow_vertical”:”5px”,”shadow_blur”:”3px”,”shadow_spread”:”5px”,”shadow_color”:”rgba(0, 0, 0, 0.33)”,”toggle_background_from”:”rgba(0, 0, 0, 0.3)”,”toggle_background_to”:”rgba(0, 0, 0, 0.3)”,”mobile_menu_force_width”:”on”,”mobile_background_from”:”#222″,”mobile_background_to”:”#222″,”mobile_menu_item_link_font_size”:”24px”,”mobile_menu_item_link_color”:”#ffffff”,”mobile_menu_item_link_text_align”:”left”,”mobile_menu_item_link_color_hover”:”#ffffff”,”mobile_menu_item_background_hover_from”:”#333″,”mobile_menu_item_background_hover_to”:”#333″,”custom_css”:”\/** Push menu onto new line **\/ \r\n#{$wrap} { \r\n clear: both; \r\n}\r\n\r\n@include mobile {\r\n .mega-menu-main-menu #site-navigation-wrap {\r\n float: none;\r\n right: auto;\r\n }\r\n}\r\n\r\n”}

I just discovered that SiteGround Cache services were active and that was the reason I was not able to see any changes in the menu. I am deactivating them and I will let you know how it goes after that.

Hi Ivan,

Ignore the mobile theme, it is not being used. For the “MyMegaMenu” theme, set the toggle bar height to something like 120px.

It looks like the CSS is still being cached. If you have the SG Optimiser plugin installed, disable CSS minification in there and make sure “Remove query strings from static resources is disabled” (query strings are a good thing, they let browsers know when static assets are been updated).

Thank you very much for your answer.

Thanks to your instructions I am finally making it work the right way.

I just left a positive rating (5 starts) in the forum, you deserve it.

Sincerely,

Ivan Gil

Hi Ivan,

Many thanks for the review – much appreciated! ??