I'm working on a mobile navigation option for my site and want it to slide from the right.
Here's a mockup:
https://codepen.io/rctneil/pen/OqzBjX
The issue I have is that by default the page scrolls over to the right when the nav is hidden.
I've tried adding overflow: hidden to .mega-wrapper which stops this scroll, but also hides the navigation when the toggle button is clicked.
Any ideas?
Kind regards,
Neil
I think that adding overflow: hidden was a good step. But after that you need to positioned absolute the mega-wrapper__mobile-nav and translateX the mega-wrapper__wrapper and mega-wrapper__mobile-nav
I made a demo
Related
I have a flyout menu for screens below 992px, but the menu items extend below the screen. When you scroll, it’s scrolling the content behind the menu. I’m guessing it’s partly due to absolute positioning, but not sure how to make the menu scroll down.
Here is a link to the dev server http://phiaconcepts.devlocation.site
You could have a condition which sets the body to overflow: hidden if the menu is open.
I found a solution..
I added this inside the max-width : 992px media query
.fixed-top{
max-height:100vh;
overflow:auto;
}
I'm building a web application and testing with Google Chrome. I have a sidebar element where, if I hover over that element, I want to disable scrolling for the body element.
I achieved this by setting overflow: hidden on the body tag using CSS whenever a user hovers over the sidebar. I tested this on a browser without a USB mouse plugged in, and it worked great:
Sidebar Closed (body scrollbar visible)
Sidebar Open - Bad (body scrollbar still visible, producing an ugly overlap)
Sidebar Open - Good (my fix: hiding body scrollbar, so that sidebar scrollbar displays alone)
This works because Google Chrome doesn't render scrollbars as actual elements (that have widths). However, when I plug in my USB mouse, the scrollbars now do have widths. And thus, when I move my mouse from outside the scrollbar to inside the scrollbar, the width suddenly changes:
Before Hover (body scrollbar visible)
After Hover - Bad (body scrollbar hidden, suddenly decreasing the width of the whole sidebar)
This produces a really ugly and glitchy visual effect, where the widths of elements change when you hover over them. I've looked everywhere for a solution to this... any help would be much appreciated! Thanks so much!
If you are on a mac, chances are your OS is adding the scroll bar when you plug in the mouse, a scroll bar that will override most CSS selectors.
There is not a way to override this with CSS that I am aware of. If you change your system preferences you will find your website behaving the way you intended.
System Preferences -> General -> Show Scroll Bars -> Change from [ALWAYS] to [WHEN SCROLLING]
.MY_CSS_CLASS::-webkit-scrollbar {
width: 0px;
height: 0px;
background: transparent;
}
This fixed my issue with ugly scrollbar being displayed when mouse is connected.
Specifying width to the body element will keep content width constant.
Here is the working example: https://jsfiddle.net/fuhacLtn/2/
First, you should pay attention to the rendering with other browsers and with chrome windows. As you know, the windows scroll bar is clearly not the same and is not rendered in the same way. You might have surprises with this.
Otherwise you maybe should pay attention to jQuery custom content scroller plugins.
This could actually helps you a bit more to control the scroll & the overflow and customize the scroll bar depending on the render you would like to give to it.
Good Luck'
I created a sticky fixed footer on my site. Finally got it to be sort of what I need, however my sub menu items are not visible when you hover over the parent menu item. They are definitely there you can see the bottom item but the ones that go above the footer aren't visible.
You can see the page here: http://feltzdesignbuild.com/fdb-tester/
Can anyone help me get the sub-menu items to show on top of the content?
I found the answer myself, had to remove the overflow: auto; from the CSS.
http://www.andrewsmorris.co.uk/blog/
I have a sidebar that slides out when you click the button on the left, the problem however, is that on iOS I get horizontal scroll bars on the page when I click it.
Which I don't when I click it on a desktop browser, because it adds a class with overflow:hidden to the body class.
In theory this should prevent the same unwanted horizontal scrolling on the iPhone too, but it doesn't for reasons i cannot work out.
I could apply overflow-x:hidden to the html element, but that seems to jump the page to the top regardless of where you are, which is unwanted behaviour.
You need to apply overflow:hidden; and position:relative; to both and and they also can't be display:table, display:block works. Specifying the height and width may help as well.
I don't know a solution that will enable you to use overflow: hidden; based on the information you are giving. I can however advise you to use iScroll for mobile scrolling!
Take a look at it on cubiq's website
I'm wracking my brain over this and can't figure it out. I have overlapping DIVs but I cannot get the submit button (login) to be on top.
http://swaptoria.com/
You'll see on the right there is the login button and a DIV from the main area thats preventing the button from being clickable.
Any advice would be most appreciated!
Your login button's position is static so its z-index wont be considered, change it to position: relative; z-index only works on positioned elements (position:absolute, position:relative, or position:fixed).