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.
Related
I have the following navigation in my site.
The first 3 items are normal links to other pages in my site. The last orange link opens a modal box.
This is how I have written it in code
<?php wp_nav_menu(['menu' => 'Main menu', "container" => "", "menu_class" => "desktop-menu"]); ?>
<a class="open-modal-registration passion-one bg-orange white" href="#">Einfach anmelden und kostenlos studieren</a>
I have a menu that can be customized from the Control panel, and then the orange button is hardcoded.
Now comes my problem. I would like to be able to reorder the items in the navigation in a way that I can also reorder the orange button, and put it, lets say, between "Page #1" and "Page #2".
To do this, I guess I would have to add it to my menu from the Control Panel, but I do not see any proper way to do this. All that can be added to the menu are
Custom links
Pages
Posts
Categories
Tags
And none of those elements seem the right one to define a button with such a functionality.
How could I solve this?
Based on what you are looking for and the way a WordPress menu is loaded, I would say your best bet is to add it to the menu like the other items. You can enter in all of the same data, the dead-link, style it and then use the menu item id assigned to every wordpress menu item dynamically as the selector that opens your modal. There is no need for the class you are currently using to open it since only one element will be opening the modal based on your question.
For example:
jQuery(document).ready(function(){
jQuery('#menu-item-7155').click(function() {
//add the selector/js to open your modal
jQuery('#modal').show();
});
});
Hope that helps! Good luck.
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
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>
I am looking to create a menu bar with a specic type of "action"
Similar to the bar on this website
BBC Sport
Its totally static and has no dynamic or "pop out" sections. When the top menu is clicked the page will re-load and display the lower level in a diffrent colour.
Can this be achived with the Standard ASP:Menu control?
I am not a big fan of the pop out feature however I do not want all my options to be visible to my users at root
Hope that makes sense
Check out this basic ASP.Net Menu control page. You can click on the "Run" buttons to see very basic versions of the menus.
The advantage of using this particular approach is that you can tie it to a sitemap, so you don't have to keep updating the menu code. You just add the page(s) to the sitemap, and the menu picks it up.
You can also dynamically link the menu to different sitemaps, such as one for the admin menu and another for regular users' menu.
The Menu control is in the navigation section of the toolbox.
To experiment with the built-in functionality (before writing your own code to do what it will do for you), just drag and drop a menu control onto your form. Then, use the common tasks menu to:
autoformat -- good for quick & dirty because it sets hoverstyle too
set the data source
set the view type (static or dynamic)
define menu items with an editor
work with templates to set appearance
You have to go to properties to set menu appearance.
Here is my site:
http://wake9.com/blogs/norcal-merced-wakesurfing-competition-2009/.
Notice the menu item "Photos and Results". Hover over it and you will see sub menu items. I want to be able to click on the sub-menu items but the main menu item shouldn't be a page or be clickable. The only way i could get this item on the menu was to make it a page. Is there a way to just have a menu item that has sub menu items to content, but the actual menu item isn't clickable? I was thinking about using JQuery to remove the anchor tag, but that is a real hack and I want to know if there is an easier way.
Thanks in advance!
One option would be to use Page Links to plugin and set the main link as '#' . I tried this and it works in my blog.
What about using the jQuery.remove to remove the element?
something like this:
function removeLinkAttrib() {
var attrib = jQuery(#menus).find("a").attr("Photos and Results");
jQuery(attrib).remove;
}
I'm not sure if $(attrib).remove; will work, but you get the picture :)
(this answer is for people using Wordpress.com free sites):
You can go to Appearance > Menus, then add a custom link to the menu by clicking 'Links' in the left-hand column, and adding "#" as the URL (and whatever you want as a label). Then add this link to the menu. Open the options for the new menu item in 'Menu Structure', and then delete '#' from the URL, so the field is blank, and save changes. Now you can add sub-menus to this menu item, and there will be no link for this item on the main menu...works for me.