I have been working on wordpress website and the theme am using used bootstrap 4 wp_bootstrap_navwalker.php for menu and my problem is the sub-menu doesn't display as expected, one is above the other so i follow Avoid dropdown menu close on click inside answer and and there is no change. is their any way i should edit this
Thank you
sub-menu is inside the parent menu with black color and when hover green color appear
Related
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!
Basically, I am trying to get the menu to disappear when clicking a link. Here is an example site that demonstrates my problem:
http://themeforest.net/item/square-responsive-admin-app-with-angularjs/full_screen_preview/7511722
click the hamburger symbol
hover over 'UI Kit'
Click multiple links in the sub menu
As you can see when you click any of the links, the sub menu does not disappear. How can I make it disappear. I am using angular as my front end framework.
Using bootstrap 2.3.2 and just introduced Infinity slider
When I'm using the dropdown nav and the slider changes slide, the dropdown nav disappears and I have to open it again (but quickly before the next transition). This is probably because the slider is active the "active state" of the menu gets overridden.
Is there a way to force the bootstrap menu to stay open or make it take priority over the Infinity slider (run the slider in the background, the default bootstrap slider/carousel does this).
If anyone has experienced the same or may know a way around it would be appreciated muchly!
Worked it out - in Bootstrap.js I commented out the line (under dropdown api-standard dropdown elements:
.on('click.dropdown.data-api', clearMenus)
I have the following lines in my website - http://codepen.io/anon/pen/LhDnu/ that creates a sidebar menu.
As the user hovers their mouse over a parent, listed item with child-links within it, a sub-menu appears.
However, when the mouse moves over to select one of the child-links, it removes the sub-menu listed items.
How can I modify the codepen above so that it will allow the user to select one of the sub-menu items?
Here is a working code for you, in css dropdown menus try to work with display:none & display:block not with the opacity
http://codepen.io/anon/pen/luGDK/
Nevermind. Here is the solution - http://codepen.io/anon/pen/LzpyK/.
Okay, so I've got two drop-down menus on my page, Navigation, and Links. Links works normally, but Navigation disappears when I try to hover over it. I got no idea why, so I'm asking.
Why does my Navigation menu disappear when I hover over it, and how do I fix it?
My site with the error
You have an element that's hanging over the left menu named #crwrap. So when moving your mouse to the Navigation options, the mouseout is triggered because you're suddenly hovering the #crwrap element instead of the Navigation menu. It's invisible but if you use a debugging tool that supports DOM searching you'll see it covering the area of the Navigation menu options.
It's not covering the Links menu so that one does not have any problems.
If you remove #crwrap (or move it to the background using z-index: -999), it works fine for me.
Your JS to show the menus is toggled by mouseover and mouseout of the elements in your menu section. The submenus are not nested inside these elements. Therefore, when you move the mouse down toward the submenu, you trigger the mouseout on the main menu item, which is hiding the submenu.
I would recommend nesting the submenu items inside the main menu item's container.
I would also advise you check out the excellent alistapart.com article about CSS hybrid menus. It has some excellent pointers and techniques you might find useful.