Void-menu desktop vs. mobile

[bakrona]

Hi there

For the PC version i use Custom Links with the class void-menu. This way I can structure my menu without creating unnecessary sub-pages.

However in mobile this is an issue because the menu point doenst open to the pages under it.

How can I adress this?

[ruenel]

Hello @bakrona,

Thanks for writing in!

Please add a # hash character as the URL in your custom links:

Best Regards,

RueNel

[bakrona]

Hi there

I added # but i dont see any changes on the mobile version (also after clearing cache).

[prakash_s]

Hello @bakrona,

In order to help you with your concern, please share your details in a secure note. Please provide the following details

• WordPress Login URL
• Admin level username and password

You can find the Secure Note button at the bottom of your posts

Thanks

[bakrona]

please find the details below

[tristup]

Hi @bakrona,

It seems that the void-menu class is the reason behind your issue, I would like to request you to check into the mobile devices once by removing the void-menu class.

Thanks

[bakrona]

without void-menu class the mobile version works fine

I need to find a solution now that in desktop view, the link is not clickable, nor that it changes to cold when hovering

[prakash_s]

Hello @bakrona,

I checked your site in desktop and mobile the menu is working fine in both the devices.

Thanks

[bakrona]

yes i saw it is working. however i introduced void-menu class for a reason.

Since its a sub link without a page, it serves only as menu header in the desktop view. I therefore need to find a solution that in desktop view, the link is not clickable, nor that it changes to bold when hovering

[ruenel]

Hello @bakrona,

You have added void-menu class to the menu items. You also added this custom CSS:

/* Remove Highlight effect when hovering over void menu items */

.void-menu > a {
   pointer-events: none;
}

It is best that you update your custom CSS into this:

/* Remove Highlight effect when hovering over void menu items */
@media(min-width: 980px) {
  .void-menu > a {
     pointer-events: none;
  }
}

The @media block will make sure that the pointer-event will only be disabled on larger screens starting from 980 pixels. You can check our more about the @media CSS rule here:

• https://www.w3schools.com/cssref/css3_pr_mediaquery.asp

Best Regards.

[bakrona]

problem solved, thank you for your help

[prakash_s]

You are welcome @bakrona