I have a word press navigation bar which has 2 buttons Home and Contact. When hovering on the contact page there is a sub item called number. How do I stop the user navigating to the parent link? and only allow them to selected number and navigate to that page.
The quickest way would be to create that parent menu item with a URL of #/ which will prevent the click. It will append #/ to the url in the browser, but other than that nothing else will happen. Note that the slash at the end will prevent the page from scrolling to the top when clicked which is especially useful if you have a sticky menu.
If you want to prevent the URL from changing in your browser you can add some Javascript to prevent the click event for links with a href of #/ like this bit of jQuery...
$('a[href*=\\#\\/]').click(function (e) {
e.preventDefault();
});
As Jaxon said in the comments, you could then use CSS to change the cursor on those parent items (to default perhaps).
If you felt this method was too "hacky" you could use a Walker to actually override the output HTML, but depending on your implementation that feels like overkill to me for such a small effect. Plus, once you strip the a tag out you could run into other issues with your menu if your dropdowns require that tag to work properly.
You can try these steps in the wordpress console.
https://connectnc.com/clients/knowledgebase/112/How-to-make-menu-item-unclickable.html
Related
I am working on alpha.dubaiexporters.com.
http://alpha.dubaiexporters.com/aboutus.aspx
Upon resizing the browser, the blue button panel comes and after clicking on it, it shows the navigation side bar.The issue is that after clicking somewhere else, it does not disappear.
I don't seem to find the issue here. The home page is not creating any problems. Rest pages do.
You can add to end of your code when you activate the menu and
$(".container").on("click", function(){
$(".menu-btn").click();
});
And inside the menu-btn.click() add a $(".container").off(); so it toggles the behaviour.
How to disable top menu link in Wordpress to avoid redirect to another page on click. I only need to show submenus.
Give the menu item link a the value #.
Then you'll need some Javascript to prevent default link clicking action.
E.g. with jQuery:
$('.class').click(function(e){
e.preventDefault();
});
// replace class with whatever the selector of the link is. To cover ALL menu items that have sub menus (and have the WP classes), you can use '.menu-item-has-children a'
Add custom link to menu item (Put # value on link)
Log into your WordPress administration panel. Navigate to Appearance, and select Menus:
Navigate to Links on the left and type in the URL you want to have for this menu button, add Link Text to specify what the tab will say, and then click Add to Menu:
Optionally, if you would like to control whether your menu link opens in a new tab when clicked, check the “Link Target” advanced property from within Screen Options to reveal this setting on individual menu items:
Refresh the site and you will see your new custom page and link in the navigation menu.
I'm experiencing a frustrating problem with MaterializeCSS dropdown links created on Wordpress Menus. I can see the link when I hover over the top level items, e.g. About FAIRDOM, but I can't click any of them. I know it's an issue somewhere perhaps in having a hidden element above that may be catching the click event, but I can't see where. Anyone with any idea of where the issue is in this site http://beta.fair-dom.org/ ?
MaterializeCSS built their dropdowns "mobile-first". Essentially, what that means for you is that the JS that powers the dropdowns explicitly disables the href on click for all dropdowns. This is a because, on mobile, a user cannot hover and can only touch.
However, if you're still wanting to get around this, you can try out the following (assuming you're using jQuery):
<script>
$('.dropdown-button').click(function() {
window.location.href = $(this).attr('href');
}
</script>
Try sticking that just before you close the body tag,
On my website, I have a list of users. By clicking each one, a fancybox pop up window will show. Within the window, I use iframe to load a page with paintings from the user.
Is there any way to make the images in fancybox iframe pinable by clicking pinterest bookmark pin it button? Or do I have to add a pin it button to each HTML page?
Thanks,
Milo
The bookmarklet button works on the page that is currently loaded. Usually, if an iframe has changed even slightly from its original url, it is inaccessible to the parent page via javascript. The actual iframe itself has to initiate the appropriate messaging request systems.
If you can have the iframe send a message to the parent window that contains the desired images and then have the parent window add the image links to the page, that seems to be the only way to do it right now. Look into the postMessage() function.
As you asked if there is "any way" to do it, I would say yes. However, it is very ugly. Probably better to add pinit buttons to each image in the iframe. :)
I'm trying to remove the link href from an unordered list item.
The menu has been created by wordpress and I'm trying to remove the link from the first item, so that when I user rolls over the item the menu still drops down but the very first item (the one that triggers the drop down) isn't clickable.
Currently I just have href="#" in place but I'd like to remove the link altogether.
How can I go about stripping out the href element?
After creating the menu item place holder remove the # from the URL field to create the non clickable dropdown place holder.
This is possible by adding a custom link to the menu assigning it any url (for this example I just added #) then click add to menu. Once it's on the menu open it and remove the url you assigned and save. If you don't put the url initially WordPress won't let you add it to the menu. On your pages you will be able to hover over it and the drop down children will appear but you wont be able to click on the parent "place holder".
Note: This answer is from the same question on WordPress Answers
Click me
I am supposing the menu you are talking abou is an automatic one.
I would use jQuery to prevent the default action of the link.
<script>
$("menu-item-123").click(function(event) {
event.preventDefault();
});
</script>