[Shaun NParticipant]

Hi, I have a bit of a user friendliness issue with the mobile menu. On the website http://hessequa.gov.za.dedi46.cpt3.host-h.net/ the menu works fine on desktop version, but the moment you do not have the hover ability to have the menu dropdown autoamtically, the menu does not open unless specifically clicked on the dropdown arrows. If clicked on any other area of the button it link to the menu link for that menu item or in the case of a custom link with # it just reloads the page.

Is there a way to customize the main parent menu item to dropdown instead of going to a link or page?

[John EzraMember]

Hi there,

Thanks for writing in! The following CSS solution is tailored to your site since all your parent links point to #. It wont work for links that point to a page.

You can add this under Custom > CSS in the Customizer or in your child theme’s style.css file.

.x-sub-toggle {
    width: 100%;
}

.x-sub-toggle.collapsed span, .x-sub-toggle span {
    width: 40px;
    float:right;
    position: relative;
    top:22px
}

Hope this helps – thanks!

[Right Angle SParticipant]

Hi there,

Here is a link to our site:
http://rightanglecreative.co.uk/

I have a similar issue with the user friendliness on a tablet. When the site is viewed in a landscape format on a tablet, the user is unable to access the sub-pages in the Navbar menu as they are displayed as a drop down, e.g. The user will be able to access the About page but not the Services, Testimonials, What’s New, Meet the Team and Charity pages.

I know this is due to the fact that there is a link on the ‘About’ page and there is no hover ability on a tablet but is there a way round this so that the user can access all the pages within the Navbar menu?

Thank you in advance for your help.

[Paul RModerator]

Hi,

Please note that they need to click on the arrow for the dropdown to appear and not on the link itself.

http://screencast.com/t/ZS4GAE8eIl

You can adjust the width of the arrow clicking area by adding the code below in your custom > css box in the customizer.

body .x-sub-toggle>span {
    padding-right: 10px;
}

body .x-sub-toggle {
    width: 100px;
    text-align: right;
}

Change 100px to make make clicking area wider.

Hope that helps.

[Right Angle SParticipant]

That’s perfect! Thank you very much for your help.

[ThaiModerator]

You’re most welcome.

[Shaun NParticipant]

Thanks That did the trick!

[Paul RModerator]

You’re welcome!

[Author]

Posts