Bootstrap menu dropdown problems - javascript

my problem is with a bootstrap menu. I'm using wp_bootstrap_navwalker in my WP theme, and I found some solutions on the web to enable more deeper nav, but I can't find the solution to make it work fine on desktop and on smaller devices.
I have this structure of the menu:
My question is: How to enable all menu items, dropdown items and sub dropdown items to be clickable on all devices (on hover on desktop and on click on small devices). I suppose that on small devices there should be some function that lets you to click 2 time to access the link and on 1 click just to enable opening of the sub items.
I currently have this solution, but doesnt quite do what I want, as my sub dropdown items show up at the same time like this:
This is the exact code (JSFiddle) that I use in header.php and my style.scss.
Any ideas?

Related

How to change from on cursor event to on click for displaying sub category menu in magento 2 mobile view?

I have an all product category containing all my sub categories and products. The issue is that on the mobile version, if user want to see the sub category, they have to hold their finger on the tab. Clicking neither lead to all products or display sub categories. I tried on a computer and it seems that the menu is responsive as soon as you pass the cursor over it. Although it is great for cursor users, it renders the mobile version unusable.
mobile version sub category menu unresponsive
How would it be possible to create an on click event instead of on cursor event for the mobile version? Is it possible with css? I know you can specify the css based on media screen. Not sure what to edit tho and how?
Thank you

How to stop javascript from moving the submenu when clicked?

I'm working on this site: http://editingplus.com.au
In the submenu Resource > Getting published, at some screen sizes when a link is clicked, instead of navigating to the link the submenu jumps to a different position and then closes. A second attempt at opening the menu and clicking the link works, but only if you try to click the same link--clicking a different link means you have to start again and click that link a further time.
This problem only occurs at smaller screen sizes where the Getting Published submenu doesn't fit to the right of the Resources submenu. Clicking on the Getting Published submenu makes it jump briefly from the left to the right of the Resources submenu before closing. At larger screen sizes where the Getting Published submenu fits to the right of the Resources submenu, links work on first click.
This screenshot shows the situation of the Getting Published submenu being to the left. It's when it's like this that the menu jumps then closes.
This is a problem with JavaScript--if I disable JS on my browser and the site falls back to CSS only menus, the links work first time.
I haven't made any custom menus. The site is using the Mins theme from GoDaddy, which is built off the Primer theme. As far as I can tell, neither of them are using any custom JS for the menus, and all the JS is standard WordPress JS.
StackOverflow recommended I check out these two other questions:
Jquery Drop Down Menu. The sub menu disappears when clicked. So, How to make the submenu stays when clicked?
Submenu disappearing when clicked in the submenu in wordpress
However, those are both to do with developing custom menus, and those menus not working ever when clicked, rather than only sometimes not working at certain screen sizes.
I'm guessing I will need to add some custom JS to this site to stop the menus not working, or somehow disable the JS so the menus roll back to pure CSS, but I'm not sure how to do either of those things.
Any help would be much appreciated!

JQuery Slicknav, merge two menus in one, but on 2 columns

on a wordpress custom theme, I'm using slicknav menu to create a responsive mobile menu.
It works great, so I decide to merge the second menu present on my site (category menu) in the mobile menu.
Using this codePen it's simple and easy, but I'd like to separate the menus in two floating columns, left category and right the global menu.
see image:
I currently can insert a "<hr>" between one menu and the other, using combinedMenu.append("<hr>");, but if I "append" to create the float combinedMenu.append("<div class='col-sm-6'>"); the resulting code is
<li><a>.....</a></li>
<li><a>.....</a></li>
<div class='col-sm-6'></div>
<li><a>.....</a></li>
so it closes the tag itself! GRRRRR
can anyone helps me?
bye, L.

Responsive menu with a dropdown as last Item

I want to create a menu with some items, and at the end of this menu, it has a "Show More" dropdown. This "Show More" shows the rest of the items of menu, that could not be viewed because of the width of the browser. A classic responsive problem.
To illustrate:
And when the width is less than the image before, it happens:
So, my question is, what's the best way to do that? Is there any ready solution?
I am using Foundation, so I can't use any of another CSS module like Bootstrap. But, I can use jQuery, CSS3, HTML5. I don't have more limits than that - I guess =)
I got those images from Instantcart website, so, you can go there to see it working.

Mega menu implementation with wordpress

I have to reproduce menu of the winston.com website. It also has to work with wordpress, and I found the UberMenu but its sort of a personal project and I don`t want to spent money on plugins.
The website is built on bootstrap, and i found the next plugin: yamm 3 ( website ), but I simply cannot reproduce the menu from winston.com.
I also want it to be built on bootstrap, so if someone could help me make a reproduction with that YAMM3 plugin, it would be great!
Its pretty basic, you should start with an on hover event. With this event just "show" the menu which is hidden at first. On this menu add a transaction effect http://api.jquery.com/category/effects/
Start of with a simple div that has the correct position after your menu items. Then try to implement a jquery/javascript function to show/hide the correct menu item. After that add a transaction effect. Keep it simple first, aka use some basic colors and widths to understand how this dropdown menu works. After that, just extend/improve it to make it look like your example.

Categories

Resources