Make submenu items display on mobile

Hi there,

On my site I have a menu item called ‘Treatments’ that links to a corresponding page called ‘Treatments’. The Treatments menu item also displays submenu items as a dropdown.

http://demo.nubandgist.co.uk/treatments/

This is fine on desktop. However, on mobile, the dropdown menu doesn’t appear and visitors are taken straight to the ‘Treatments’ page. Is there any way to not display the ‘Treatments’ page on mobile and instead just show the dropdown menu with the submenu items? I’d like it to stay the same as it is on desktop.

Thanks in advance,
Laura.

Hello Laura, try to use the following CSS code.

You can add CSS code in Customize → Additional CSS section.

.menu-item .btn-submenu::before {
    color: #696965;
}

Please feel free to ask any other questions that you might have.

Kind Regards, Roman.

Hi Roman,

Thank you for this - the dropdown menu now appears on mobile so that the submenu items are visible.

However, mobile users can still click on the Treatments main menu item and will be taken to the Treatments page - I want to disable this on mobile so that the only navigation option is to use the submenu dropdown. Could you let me know how to do this please?

Also, how can I change the background colour of the submenu items on mobile?

Many thanks for your help.

Kind regards,
Laura.

Hello Laura, try to add this CSS code as well:

.btn-submenu {
    width: 100%;
    text-align: right;
    right: 0;
    padding-right: 30px;
}

#mainnav-mobi li.menu-item ul.sub-menu {
    background-color: transparent;
}

Kind Regards, Roman.

Hi Roman,

Thank you for this.

It achieves what I’ve asked for with the Treatments menu item on mobile, but it now also means that on mobile you can’t tap on the submenu items ‘Cosmetic Blemish Treatment’ or ‘Electrolysis’ which also have pages that I do want people to be able to visit. is there a way to achieve this?

Thanks for your help,
Laura

Hello Laura, try to use this selector:

div > ul > li > .btn-submenu

…instead of this:

.btn-submenu

…in the code above.

Kind Regards, Roman.

You’re amazing - thank you so much for the speedy response. This works perfectly.

Thank you,
Laura

You are welcome Laura! And have a nice day :slight_smile:

Kind Regards, Roman.