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

    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 4 months, 3 weeks 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)
  • You must be logged in to reply to this topic.