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,
Related
In Blazor, you can load content dynamically by putting it in an #if block and then making that condition true, e.g. on a button click.
I have a Bootstrap dropdown whose contents are loaded when the dropdown is first clicked. For some reason, the right alignment is not honored on the first click of the dropdown button but is on each subsequent click to open it. There is something about the initial render and the CSS not being honored. I am not sure why this is happening.
Here is an example (Blazor server-side): https://blazorfiddle.com/s/yc5m9rv4
Since Bootstrap dropdowns user popper.js, the solution was found through that. Bootstrap provides an update method to refresh the dropdown's position.
To solve this issue, the update method just needed to be called after the dropdown is rendered.
Here is an update, with this solution, to the example in the question: https://blazorfiddle.com/s/t24r1753
Basically I just wanted to know how to change the looks of the right click menu using css. I haven't tried anything because I have no clue were to start.
Thanks in advance
unfortunately, you can't change the right click menu style using CSS, but you can disable it and create one from scratch using HTML, CSS and Javascript
you can handle the right click event (context menu event) by adding this code:
document.addEventListener('contextmenu', function(e){
e.preventDefault();
});
This part e.preventDefault(); will disable the default behavior of the right click and the context menu will no longer appear, now you need to add a function and new style for your styled context menu
If you are still not sure how to make this here's a tutorial for the complete thing you want to achieve https://www.sitepoint.com/building-custom-right-click-context-menu-javascript/
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.
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 have made an Accordion Menu like what have been explained here. The problem is that when you clicking on the menu items, browser will try to jump (and scrolling) to the target to be sure that the target is visible in the view port. Is there any solution to prevent the jump, except something like this?
$("a[href^=#]").on("click", function(e) {
e.preventDefault();
history.pushState({}, "", this.href);
});
js source: Fighting the jump
There is no other way than using JavaScript.
You could also listen to the hashchange event, save the actual scroll position at the time of the event firing and jump back to it after the event.
But those are the only possible solutions one could think of.