I'm currently working on my very first personal page! I'm getting horizontal scroll on smaller media queries where I shouldn't and I cant track down the culprit. All containers are set to 100% width and have their overflow-x hidden. Once the page reaches 1200px in width the side navigation collapses, however once you toggle the 'hamburger' the menu should slide out and push the contents of the main section out and hide the overflow until an anchor point is selected in the menu. At which point the page should shift back to where it was and scroll to the desired section. Something I didnt notice until I turned on touch simulation in the dev tools is that its completely busted on mobile with touch, however working fine with browser scroll in mobile view.
If anyone has any thoughts please let me know, you can find my site here: https://imaleks.dev/
Sorry in advance if this breaks any ettiquite new to all this.
I think, when all you containers are width: 100% + translateX(290px);, and this is more then 100%. You should toggle some class to a body with overflow-x: hidden; when the mobile menu is active.
Or you can keep overflow-x: hidden; for body permanent. This will completely disable horizontal scroll.
Related
I have a background image as can be seen here https://www.nova969.com.au/win/novas-sending-you-ed-sheeran
The image is background image to the body.
When the off-canvas menu is opened, the background image shifts.
I will like to keep the background image to stay in the exact location where it was before opening the background image.
You will notice the following css is there for the body
body.has-background {
background-image: url(https://d2nzqyyfd6k6c7.cloudfront.net/nova-skins/972409-novafm-edsheeran-platwinpage-bg.jpg);
}
When the off-canvas opens, it causes background position shift. I need to ensure that the background does not shift. Can someone help me in getting this resolved?
Combining the two images into one is not an option for our case at this moment.
Also, to replicate,
Go to the link using any browser in Desktop
scroll a bit down the page.
Open the off-canvas menu (the one on the left-hand top side)
You will notice the shift of the background
If i've understood your problem correctly then the following should fix it.
Edit: it seems to only be an issue on devices over 1200px wide? If so, then apply these changes using #media (min-width: 1200px).
Make the following declaration additions to the following selectors:
.disabledInteraction {
position: relative;
}
(or delete the position: fixed; from .disabledInteraction)
and then:
.header-fixed .site-wrapper {
margin-top: 0 !important;
}
The problem lies with fixing the position of body. If you remove this declaration or change it to position: relative, you can see this stops the image moving around problem.
The problem then is that the text moves up the screen, which is caused by some JS changing the margin to -268px. Adding margin: 0 !important overrides this, but if you can you should stop the JS from adding this negative margin.
Hope this helps!
As you might of figured out, this is a standard behavior of a website. Content shifts as your available area shifts (scroll is part of visible area) causing your whole content of the page to shift 17 pixels? (Whatever the scroll is).
What you need to do is append a scroll once the sidebar is open.
I had a play with your website and it works, however there must be some javascript which removes the scroll bar.
I was going to fine the file for you, but you're returning too many files and I don't have time to go through all of them.
Selector:
body > div.site-wrapper.off-canvas-menu-overlay
Add overflow-y: scroll to that div using javascript, on sidebar open event, or when you add it in CSS make sure whatever is manipulating that Element once the sidebar is open that it stops as currently it seems to append styles on open event.
I guess you mean the "hidden" menu on the left side of the page.
The background shifts because the scrollbar is removed when you open the menu.
You could change your code so the scrollbar stays visible, or shift the background image to accomodate for this change. I'm not sure if you can do that so it will work without a flicker in every browser, so your best bet is to keep that scrollbar visible.
I've got a fixed slide menu that appears only on mobiles , the problem I got is , when I touch scroll down the menu, all the body elements scrolls down too,I want to prevent body scrolling when touch scrolling the nav element, I tried many js codes but nothing, Help please.
PS: The Menu I want to scroll is inside the body, I dont want to prevent it from scrolling too
First thing would be make the menu big enough that it needs to be scrolled, so, let's say your menu wrapper has a height of 200px. The inner content should have more than 200px, at least.
After that you can add overflow-y: scroll; to your menu wrapper CSS selector.
If you face problems, http://iscrolljs.com should help you with that!
Since adding a slide-in menu to my web page the rest of the page doesn't seem to be able to scroll to remaining content at the bottom of the page? This is more noticeable if you resize the browser to make the height smaller.
http://handmade-nation.com/dev/v3/shop.html
I think the reason is down to the fixed position and 100% height on the #right div but if this is removed it knocks out the menu so I need help working around this is possible?
Thanks!
Add overflow:auto in your #right it solved the issue for me in my browser.
I've got an off-canvas menu, and it's working very well for my Mobile layout.
However, when I expand the menu item to show the submenus under it, the whole page can scroll horizontally. Not so perfect.
I'm just controlling the class name to display: block.
http://dev.martinilab.com/so1/index.html
I'm not sure what is causing the problem.
The problem is that you don't have a height set on .row, so it's as tall as the content forces it to be. When you display:block that class and cause those menu items to be displayed, it forces the content further down, and since the page is as tall as the content, the page gets longer.
If you want to fix it, either set a height for that class or take those menu items out of the document flow so it doesn't push the content down.
I am using the jScrollPane to add scroll bars to pages that exceed a certain height.
I can't figure out why the following page gets scroll bars even though the content is not overflowing my boundary.
Can anyone help please?
http://souk.gumpshen.com/test/contact.htm
In style.css there is a class applied to the html tag
html{
overflow-y: scroll;
}
If I remove this style and zoom out then the scroll bars go away. I think it depends on the zoom level of the browser. If the user is set at a low resolution or zoomed in the contents do overflow.