Make a menu title unclickable

  • Hi,

    Ok I hope this makes sense as I try to explain it. On my left-hand side menu, I have Stories that has a drops down menu with the stories when you hover over it. That’s good and I want that to remain.

    My issue is when I click on Stories on the left hand side menu, it comes out as a blank page on the right-hand side. Can I have a custom CSS so the Stories becomes unclickable and I don’t have the empty page on the right hand side?

    Many thanks
    Haris

    The blog I need help with is: (visible only to logged in users)

  • Hi Haris,

    See the response to the question “How do I create an un-clickable parent tab for my sub-menu” in the FAQs section of the Custom Menus support page.

    doc

  • Hi,

    While the explanation makes sense, I’m not sure how to make the Stories page in the customize menu section into a custom link in. Or how to make a custom link and link it to the Stories page in order to follow the directions as shown in the FAQ section.

    Cheers
    Haris

  • Since the Stories item is not a custom link, I would say the first step would be to remove that item. Then you can replace it with a custom link. I’ll try to provide step-by-step instructions.

    1. Remove the Stories item from the menu as described in the Delete Menu Items section of the Menu Items support page.

    2. Add a Custom Link type of menu item as described and illustrated in the Add Menu Items section.

    3. Type a # symbol in the URL bar of the custom link.

    4. Type or paste the title (e.g. “Stories”) into the title bar of the custom link.

    5. Click the “Add to Menu” button.

    6. Move the new custom link “Stories” item into the desired position, above the items that are to drop-down from it, and then assign those items as sub-items. How to do this is described in the Reorder Menu Items & Add Drop-Down Menus section.

    7. When you’re finished arranging the menu items, click the Publish button to save the changes.

  • Can I have a custom CSS so the Stories becomes unclickable and I don’t have the empty page on the right hand side?

    Sorry, I hadn’t noticed that the topic was in the CSS Customization forum. Custom CSS is entirely unnecessary to accomplish this little task. However, if you prefer to use CSS code, it might be possible.

    You may also start a live chat, here: https://wordpress.com/help/contact.

  • Hi @hariscoussidis, I’m not aware of any way to “style” CSS to take a link out. It doesn’t change the underlying HTML, it only changes how it’s displayed.

    So you could, for example, change the cursor so it looks like a regular pointer instead of a “click” hand. But that’s about it. People could still inadvertently click it.

    The much better way to go about it is with custom links, as @musicdoc1 suggested.

  • Hi there,

    I’d agree that the better solution is the option above, however if you’re adamant for a CSS solution, you may wish to try this:

    .menu-item-380.selected a {
    pointer-events: none;
    }
    
    .menu-item-380 .sub-menu a {
    pointer-events: all;
    }

    That should achieve what you’re hoping for. :)

  • Hi,

    Many thanks for all the replies on this, but as I’m travelling this weekend and with limited Internet access I won’t be able to access my laptop till Monday to properly try out the options you have proposed. Will update as soon as possible with feedback.

    Many thanks
    Haris

  • Hi all,

    Just to update you having checked the options. The CSS code posted by @torres126 works great. The Stories on the left hand side menu drops down but is no longer clickable. Super helpful.


    @musicdoc1
    thank you for the clear step by step instructions to create a custom menu, makes sense now and can definitely use in the future for other things now that I know the concept of it.

    Thank you all for your input and suggestions. All this is starting to make more sense as I navigate through the custom set up of websites.
    Cheers
    Haris

  • Glad to hear, let us know if you run into any further questions or issues! :)

  • The topic ‘Make a menu title unclickable’ is closed to new replies.