I'm creating my website responsive for mobile except when I open the menu I see the scrollbar on top of the menu pop out and I can still scroll on the body that's behind the menu. I would like to hide the scrollbar and prevent the body from scrolling when the menu is open. I've seen examples how to do this with jQuery but is there a way to do it with just plain JavaScript or even css? I've also tried using z-index on the menu but that doesn't work either. Thanks in advance!
Related
I made this website with an accordion menu in a sidebar on mobile, and there is one little problem i can not solve.
If you look at the page https://lieth-schule.de and open the sidebar on a mobile device (button underneath the image banner) you can see the accordion menu. If you now open a submenu, you can only scroll if you exactly hit the scrollbar of the whole sidebar.
What do I have to change in order to be able to scroll the entire sidebar, when touching and holding anywhere inside it? Like you would do on a mobile touch device?
Most likely the scroll does not work because the opening of accordions is done through mousedown
Need to be converted to click
On the XS breakpoint, the div I am using Bootstrap's collapse feature on is full screen and has enough content that it requires a scroll. I want to disable the rest of the website from scrolling when this is expanded. I have tried overflow:auto on the div and overflow: hidden on the body but it doesn't seem to do anything.
Is this possible to have scrolling enabled on the div when its expanded and have the body scrolling disabled?
Edit: Figured it out. Thanks to everyone that jumped in to help!
I'm having some issues with jQuery not animating the mobile menu. I am trying to make it slide down and have the links in the menu slide in from the side or top. Right now its animating the links on the menu, but not the menu it self. It just appears and disappears. I have an .expanded class that has css transitions applied to it as well as the selector for the menu, but it still doesn't seem to be working as it was before.
Website (Shrink your window for the mobile menu)
CSS (towards the bottom in the media query)
JS
Have you tried to use bootstrap? Check this out http://blackrockdigital.github.io/startbootstrap-sb-admin-2/pages/index.html this page uses bootstrap that makes it responsive.
Is there a way to have a scrollbar appear on a div depending on the devices height?
This menu is opened by a hamburger drawer on the side.
Drawer contains 3 divs - login div, menu div and social media div
You can reorder all 3 divs on your liking.
My menu div is customization on how many items it will show.
My problem is that of there are about 10 items in the menu and is viewed on a phone. It overlays over the bottom div if there is one.
I would like it not to overlay other divs.
I tried using
Css - Overflow-y:scroll but that requires a fixed height.
I tried using JS as well with this example
http://jsfiddle.net/6WAnd/20/
But my header and footer can vary so it won't work
P.S Maybe check if the div exist or not first? How would i implement this?
Is there another way i can achieve this?
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?!