I have a request from the customer that the menu items position must not change when the page get taller and the scrollbar appears.
If the scrollbar appears, the width of the page get smaller and this is why the centered menu position shifts to the left. How can I preoccupy the scrollbar width so the layout stays the same when it first appears?
To see a live example of this effect
please visit http://getbootstrap.com/,
increase the height of the window that much that the scrollbar disappears and
navigate to an other page using the menu (such as http://getbootstrap.com/customize/)
You will notice that the menu items are shifting a bit to the left. How I may hide this effect?
Related
I have a normal megamenu popup (or several, one per menu item) which is shown when the parent div (horizontal menu item) is hovered. It's a normal popup menu div that automatically is left aligned with the menu entry in the horizontal menu above. It has the css style "position: absolute"
Because it's a mega menu, it can get quite wide in situations which I cannot predict, it's dynamic. It could even overflow the viewport to the right and then a horizontal scroll bar appears for the whole page. Once this happens I would rather not align it's left side with the horizontal menu item above like it is now, but push it to the left.
Can I position a div so that once it's right side touches the right side of the viewports it gets pushed to the left from it's initial (not known in pixel) position? Once it's content are wider than the viewport, of course it shall stay on the left and the page shall have horizontal scrollbars as normal.
Is this possible with CSS only?
I have a div that holds multiple draggable elements.
When I drag an elements to the right, the horizontal scroll bar appears and I can scroll the div. This is what it looks like:
However, when I drag the elements left, the horizontal scroll bar doesn't show. Example:
I have the overflow property set to auto.
I understand that this is the deafult behavior of the browser, and that not showing the scroll bar is "correct", however if anyone has any suggestions how to make the overflow also work when moving elements left, it would be greatly appreciated! TIA!
No. When you drag an element to the right you are increasing the page width and triggering a horizontal scrollbar. When you drag an element to the left, you are simply moving it off the page.
You might try dynamically increasing the page width based on how far the element has been dragged outside the left edge of the page.
The browser is working as designed.
I have a vertical menu inside a header. The header takes the whole width and height of the screen/window. It is also fixed on top. However when the height of the menu is bigger than that of the screen it get cuts off and I cannot scroll to see the rest of it. This does not happen when the header is not fixed but I want it to remain that way.
Here is a photo of the menu normally
Normal menu
and here is a photo when cropped
Menu cropped
use overflow-y:scroll in css. if that is not working you should be use important .overflow-y:scroll!important . i hope it will be work .
NOTE: I've modified the subject and some of the content of this post.
I'm writing a responsive menu that is position:fixed and overflow-y:scroll.
The menu height can be greater than the height of the device screen, and I'm trying to find a work around so the menu is scrollable, regardless of either the document or the window/device height
I've put together a little demo here:
http://s.codepen.io/onebitrocket/fullpage/iysLI?
and here's the codepen iframed link:
http://codepen.io/onebitrocket/full/iysLI
Unless I missing something, I don't think a vertical fixed position menu is possible. Mainly due to the height of the menu being larger than the height of the device window.
Is there a solution to enable this?
-- Additionally
My initial question was this
The iOS bottom 'nav' bar seems to have a reserved touch area, which conflicts with the last elements in my menu - see the image below.
This prevents me from clicking on the last item in my menu.
Is there a fix for this?
I have a problem with my website, i have created a css menu that is a dropdown menu on some elements. I use an image as a full cover. When i put my mouse over an element of the dropdown menu, the cover changes position. My test site is http://unibenefits.gr/test2/tripoli .
When you set a background-image to cover, it will fill the entirety of the element (usually HTML or Body) that you assign it to. This will change if the size of the element changes - e.g. if you resize your browser window, the background-image will resize to fit it.
Something in your dropdown menu is causing your site design to overflow horizontally (i.e. the design changes slightly on certain rollovers, so the design goes very slightly wider than the browser window). This, in turn, creates a horizontal scrollbar. The horizontal scrollbar takes up room in your browser window, effectivley resizing it. This is why your cover background-image is resizing - it's not actually changing position, though they look similar.
If you can identify what in your menu is causing the horizontal scrollbar to appear, you'll fix the problem.