Support » Theme: Pure & Simple » Hover and click errors on mobile navigation menu

  • Resolved rsheppard

    (@rsheppard)


    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

    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 1 year 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.