Menu item that opens drop down menu

[edward_bailey]

Is it possible to have a menu item that, when clicked, opens up the drop down menu below. I currently have the menu item unclickable, which works fine on laptop as the drop down menu below opens when the cursor hovers over the menu item, however on mobile clicking the menu item does nothing unless you click the drop down arrow. Can it made so that clicking the menu item itself does the same as if you'd clicked the drop down arrow?

[Karlie]

Hello, @edward_bailey!

Karlie here from the Shopify Support Team! It sounds like you're wanting to add nested drop-down menus to your menu items in your navigation bar. You can actually enable this type of menu functionality by adjusting your navigation section in your Shopify Admin. 

To add a nested drop-down menu:

• Log into your Shopify Admin
• Online Store > Navigation
• Click the title of your main menu
• If the header item (where the dropdown will be attached to) is not already added to your navigation menu, you'll want to add that menu item in by clicking on 'Add menu item'
• You'll then want to start adding in the pages that you would like in the drop down the same way, by clicking on 'Add menu item' 
• Once you've added in all of the items/pages, you can then start to click and drag the menu items below your header item
• Once you're done, simply click on 'Save menu'
• Another option is to follow our video tutorial or step by step instructions in our help guide, here 

I hope this has answered your question. If not, or if you have any further questions please let me know. I will be happy to help!

[edward_bailey]

Apologies for not being clear, I have already created the nested drop-down menu and it is all working correctly. For the top-level menu items in question, I have currently set the link as unclickable rather than going to a given collection or page. So for example, the top-level menu item is 'Jewellery' and below is 'Rings', and the way it is currently set up means that clicking on the 'Jewellery' menu item will do nothing rather than bringing up all the jewellery we stock or going to a different page. This is not an issue on laptops as the menu-items nested below jewellery will automatically be shown when hovered over, but when viewing the site on mobile the menu items nested below 'Jewellery' remain hidden unless the drop-down arrow is pressed. I was wondering if it was possible to make it so that, if 'Jewellery' is pressed when viewing the site on mobile, the drop-down menu becomes visible, rather than what currently happens (nothing). In effect, pressing 'Jewellery' on the top menu does exactly the same thing as pressing the drop-down arrow does. Thanks.

[Karlie]

Hello again, @edward_bailey!

Karlie here! Okay, I see. No worries! Can you tell me what your shop URL is so I can take a look at how the dropdown is working on mobile and desktop. Can you let me know what the theme is that you're using? 

Looking forward to hearing back from you! 

[edward_bailey]

Thank you, the URL is https://rafflesjewellers.co.uk/ and the theme is Supply. It's currently password protected. Thanks again for taking a look.

[Karlie]

Hey, @edward_bailey!

Thanks for getting back to me! Can you tell me what exactly you're looking to achieve? When I view your shop via mobile, I can click on your menu items (like the Jewellery menu item) and the dropdown menu appears. Are you looking for the dropdown menu to appear when hovering over menu items, when viewing on mobile?

[edward_bailey]

Hi thanks for getting back quickly. Currently when viewing the site on mobile, you have to press the drop down arrow on ‘Jewellery’ to bring up the drop down menu below. If possible, we’d like it so that as long as you press on the jewellery menu item, not just the drop down arrow, then it brings up the menu below. Currently, if you click the ‘Jewellery’ menu item itself (and not the drop down arrow) nothing happens. Hopefully that makes sense, really appreciate your help with this. Have sent you an email but it will be easier to continue discussing here if that’s ok.

[edward_bailey]

Hi @Karlie is it not possible? Thanks

[Karlie · Accepted solution]

Hello, @edward_bailey!

Okay, I see what you mean here. I've reached out to our theme team to inquire about this type of customization and they've let me know that something like this would require more customized coding than our support team can offer. They let me know that your best bet would be to reach out to a developer or a Shopify Expert to have them adjust your theme coding to make this customization a possibility. Be sure to check out our Shopify Experts if you're interested in this option. Shopify Experts are developers, designers, marketers and photographers who you can hire to help you with different aspects of your online store. You can check out our Shopify Experts, here. 

I hope this has answered your question. If not, or if you have any further questions please let me know. I will be happy to help!

[edward_bailey]

@Karlie Thanks very much for checking this out for us!