Hover and click errors on mobile navigation menu

  • Resolved rsheppard

    (@rsheppard)


    7 years, 9 months ago

    Hello,

    I am having an issue with my Pure and Simple nav menu when viewing the theme on smaller screen sizes and mobile phones. The issue is as follows:

    Whenever I click on a nav menu tab to open the sub menu, there is a “double click” effect that clicks through to a sub menu item. I want to be able to see the sub menu and select an option myself, so this is very frustrating as every time I click the main nav header, it also clicks a sub menu item as soon as the sub menu opens up!

    Any help here would be great, as I think this is a theme issue to do with the nav menu hover option on a mobile phone…

    Thanks,
    Ross

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

  • Hello there,

    Please try a standard WP theme and also deactivate and reactivate the plugin/s one by one if you have used any inorder to check if the dysfunction is related to the theme or plugin/s.
    If it doesn’t solve out the issue please provide your website URL along with the image attachments of your problems precisely.

    Thanks,
    Rohan

    Thread Starter rsheppard

    (@rsheppard)

    Hello Rohan,

    Thank you for getting back to me on this. Switching my theme is not possible, as my client has already chosen this theme and is happy with it.

    I have also determined that the issue is not with any of the plugins used. The issue potentially lies with the customized CSS code I have used to configure the mobile navigation menu, as I believe something is going wrong between my CSS and the theme code for the nav menu.

    My site is not yet public, but I have pasted my CSS code here in case that helps to narrow down any issues.

    
/****** Nav Menu ******/

.nav-menu .menu-item {
	margin-left: 10px !important;
  margin-right: 10px !important;
}

#menu-item-503 a {
	pointer-events: none;
  cursor: default;
}

#menu-item-503 .sub-menu a {
	pointer-events: auto !important;
  cursor: auto !important;
}

#menu-item-31 a {
	pointer-events: none;
  cursor: default;
}

#menu-item-31 .sub-menu a {
	pointer-events: auto !important;
  cursor: auto !important;
}

#menu-item-1390 a {
	pointer-events: none;
  cursor: pointer;
}

#menu-item-1390 .sub-menu a,
#menu-item-31 .sub-menu a,
#menu-item-503 .sub-menu a {
	pointer-events: auto !important;
  cursor: pointer !important;
}

/*Nav Menu for mobile*/

@media screen and (max-width: 850px) {
  .nav-menu .menu-item {
  	margin-left: 0 !important;
    margin-right: 0 !important;
  }
  .menu-toggle {
  	margin: 3px 0 0 0 !important;
    border: 2px solid white !important;
  	border-radius: 5px !important;
  }
  .menu-toggle:hover; {
  	background-color: #fff !important;
  }
  .menu-toggle:active, 
  .menu-toggle:focus, 
  .menu-toggle:hover {
  	background-color: #2a79ef !important;
  }
  #primary-navigation .sub-menu .menu-item a {
  	color: #2a79ef !important;
    background-color: white !important;
  }
}

    [Moderator note: code fixed. Please wrap code in the backtick character or use the code button.]

    Thanks,
    Ross

    • This reply was modified 7 years, 9 months ago by bdbrown.

    Hey Ross,

    I dont think there are any issues related to the theme. Please undo your CSS changes and check again with the theme’s default styling.

    Hope to hear from you.
    Thanks!

Viewing 3 replies - 1 through 3 (of 3 total)
  • The topic ‘Hover and click errors on mobile navigation menu’ is closed to new replies.