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.
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!
This page here: https://www.ohdela.com/
Has a slider at the top of the webpage. If you use chrome tools or you mobile phone and try to click the buttons in each slide - they do not work (give it a second to load completely). This issue only occurs on smaller screen widths. I cannot figure out why. There is nothing on top of them blocking them from being clicked.
The only thing I can think of is that there is javascript somewhere preventing the default action from taking place. Any ideas as to why would be appreciated!
Thanks for looking!
So I am trying to achieve a responsive website.
Here is my navigation so far (Window is maximized):
What I am trying to achieve is that when the window is resized, a new tab will appear called menu. This will be a button which once clicked will show all the existing links I have.
I have two lists in two separate div's, ideally, when the window is resized, I would want the content from both lists to be view able in this new menu.
This is what it looks like when Chrome is resized to its lowest width:
As you can see, those links in the image (Stretches, posture etc), those should not be visible. They should dynamically show up once menu is clicked, which is another issue, clicking menu does nothing.
Everything I have can be found in this fiddle: https://jsfiddle.net/hudnybux/
This is quite a common use-case as im sure you can imagine. Googling it took me 5 seconds, this was the first one that popped up. It seems simple and straight forward to follow.
As a general rule at stack overflow, try looking around a bit before you ask a question...people will generally respond better to your answers. :)
I'm working on a responsive website and want to make an overlay menu like on play.google.com.
My layer get's dynamicaly the height of the window to fill the screen from top to bottom and get's "position:fixed" to stay where it is.
I do "window.scroll(0,100)" to vanish the navigation bar. But when I try to scroll inside my menu by touch the whole page scrools up and shows the navition bar again. Then it's no longer possible to scroll the page. The result of this behavior is, that man menu is now to long and the bottom of the menu is no longer visible on the page.
On the google play website they used something that the navigation bar never vanishes and I think this could help to avoid my problem also, but I haven't found out how to do that, yet.
I hope someone of you has some experiance in that.
thanks in advance
Frank
I've used this site many times to find answers to my questions, but I can't seem to find an answer to my current issue. Any help would be great!
I'm using a custom photo pop-up feature add-on in Magento called TopUp. I contacted the original writer of the code and have not received a response. I Googled the issue and other users with Magento 1.6 and 1.7 are having the same issue.
When you click on a product image when viewing a product details page, the image should popup in the middle of the screen. Well, right now, the image pops up toward the bottom of the screen and when you click next or back, it re-positions itself further down.
Here's an exact link to a product where this applies (development site):
http://www.childress-media.com/shapingheartsforgod.org/index.php/shaping-hearts-series/pre-k-through-5th-grade/all-things-made-new/all-things-made-new-student-workbook-level-1.html
Here's the link to the Javascript pop-up program:
http://www.childress-media.com/shapingheartsforgod.org/skin/frontend/base/default/js/top_up/top_up-min.js
I've tried messing around with the CSS here and there within the file - but I can't make it do what I want.
Ideally, the pop-up would appear 100px from the top of the page and be centered and stay centered when you press next or previous.
Any help you guys can provide would be much appreciated. Thanks!
An easy, but raw way to do this is setting a css style, like:
document.getElementById('top_up').style.top = '100px';