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!
Related
I am currently trying to make the new website for my school but I am having some problems with the responsive menu. Basically when I open the menu on a mobile device some of the links do not appear on the page as there are too many. When I try to scroll down through the list of links the menu just closes. I don't know what to do to solve the problem cos I've got no idea what's even causing it. Please help!
Any ideas?
You can see the page here
First Change the script order in your website. Jquery should be at top of all the remaining scripts. In your website it's different. See the below image.
and at the same time you are using ksmenu.js twice.
And for the issue you are asking is there is a script to hide menu on resize. Please see the below image.
I have a Bootstrap navbar on my site with a collapsed menu that toggles on/off. I would like it so that when a user clicks one of the links in the menu (which is a dropdown, by the way), that active link should jump to the top of the menu. This way they can see a more expanded list of the dropdown items.
Here's a regular Bootstrap navbar. I want that when I click on "Dropdown", bring that active link to the top under "project name".
If I understand what you want to do correctly, from a user interface point of view I would strongly recommend against doing this. This is highly unexpected behaviour for the user who is likely to get confused as to why the thing they just tapped has moved. It could also cause mistakes from people opening the menu, then (since their finger is probably still close to the screen) accidentally clicking one of the menu items and being moved to a new page.
If you are worried about users not being able to see all the items maybe you should consider a different menu interface for your mobile devices such as an off-canvas menu (click the little 'toggle nav' button rather than the hamburner menu to see the off canvas menu). This would give you more space to play with for your menu items.
I am using the Dopetrope meanu form html5up.net:
http://html5up.net/uploads/demos/dopetrope/left-sidebar.html
This template is simply great but I am having an issue with the left hand menu when in mobile view. When you click the famous burger icon (no matter which page) the menu slides in as expected and it works some of the time but not everytime. It is not something I have added as it does it on the official demo site (above) too.
Go to the above URL and without clicking navigation links, just scroll the page up and down a few times, then click the burger icon. Keep doing this a few times and you will find that on some occasions the left hand links and icon toggle disappears (just leaving the dark background). But if you do see the burger icon, you can click it again and the menu will show again.
This only happens on mobile (android samsung S4 mini - happens pretty much 100% of the time). Iphone 6 - happens say 40/60.
Could anyone help with providing a fix for this? Or perhaps point me to the code that calls the menu to see if I can override a setting such as z-index or call the function twice?
Many thanks for anyone who can help.
My head is about to explode as I try to figure out the reason why my dropdown menu stops working as soon as the page jumps to an anchor. There is some JS involved in the jump, too, but the same problem existed even with a plain html anchor jump.
The page is at http://mincovlawyer.com/doc/euro-excellence
As you load the page, please hover over "The Law", "About" and "The Goodies" and see how the dropdown is supposed to operate.
Then click any of the links in the sidebox to the right, for example Alt. #1.
Then hover over the menu items again and observe that no dropdowns emerge anymore.
I would immensely appreciate any guidance in this regard.
The rollover breaks even if you just scroll down the page. The rollover menu is positioned absolute and the navigation is positioned fixed. You could add 'position:fixed' to your rollover menu or you could add the scroll offset in your drop down menu code.
To set 'position:fixed':
At line 8 of the anylinkmenu.css file, change the position:absolute to position:fixed.
It looks like they're working, but they are above the top of the page. Before clicking on any of the links, scroll down just a little bit. Then hover over "The Law" and you'll see your menu shifted vertically.
Now that's a lot of code...
Where's your menu created? The mouse-over stuff
Question1:
Why even using any javascript for an inline-anchor? Using #links scrolls to said position anyways, even without JS?!
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.