I am developing hamburger sidebar menu for my website. This my current work.
Jsfiddle
I just want to stop scrolling when hamburger menu expanded. So I've added overflow: hidden to body when menu is expanded. (click toggle for body element $('body').toggleClass('scroll-lock'); )
The problem
I have tested this in ios both chrome and safari browsers. Seems like overflow: hidden not working fine. I have googled and found out that I need to add position:fixed also. Used that and working fine. But when I scroll down a bit and click my hamburger menu, it will work but jumps to top!
I have googled and tried so many times but didn't work any pure css methods.
.scroll-lock{
overflow: hidden;
position: fixed;
}
I have a bit js,jquery knowledge.
But I have an idea. How about using jquery .scrollTop() function to archive this? Found this resource Jsfiddle
Any help?
maybe this solution help you:
1- change position from fixed to absolute (scroll-lock)
2- change parent position to relative
3- (optional) top:10px;left:10px;(more or less than 10) (scroll-lock)
Related
I made a portfolio website with HTML, CSS (and Bootstrap), and JavaScript. My issue is the sticky navigation bar.
The .sticky-top class from Bootstrap does not work. The reason it does not work is because I have a CSS line that sets overflow-x as hidden for the body. For some reason my website had a cut off in the middle and whitespace on the right side when in a mobile format, so when I looked for a solution I read to use the overflow-x: hidden property to fix it (shown below).
html,
body {
overflow-x: hidden;
}
Which it did fix that issue, but I was also able to isolate that this is why the navbar is not sticky. Obviously I cannot have my website cut in the middle so I thought maybe I could try another way to get a sticky navbar.
Since I can't use Bootstraps sticky nav, I tried to use position: sticky in CSS and that did not work either.
#navBar {
position: sticky;
}
Then I pulled and altered multiple versions of sticky navbar code for vanilla JavaScript (including testing with console.log to see if they were active), and they ran but did not keep the navbar sticky.
I am not sure how to get both the overflow-x: hidden to stay and get a sticky navbar. Maybe if I could figure out how to fix the website getting cut off on mobile (therefore remove the overflow-x issue), then I would be able to keep the Bootstrap sticky-top. Does anyone have any ideas for why either are giving me trouble?
Website link: https://1amporkchop.github.io/PortfolioWebsite/
GitHub repo with all the code: https://github.com/1amporkchop/PortfolioWebsite/tree/gh-pages/docs
you can always use position: fixed; make sure to also use width: 100%; with it
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'm working on a site, http://six03.com/ART which is currently in development. I thought I had everything all wrapped up for deployment until I had gone back in 320x480 mode on mobile and none of the links on the slideout menu do not work on any mobile device I have tested, at any resolution, on any page.
I have updated and reverted back to a working copy of jQuery, I have tried z-index:1; I have thought of all I could and researched all I could with no avail. Now I am asking for some help here.
I'll do some research in here as well to see if there are any similar problems, or if anyone knows of a thread similar to this, a point in that direction would be greatly appreciated also. Thanks.
I'm going to assume that you mean only the 'testimonials' and 'contact' links in the menu don't work, on the homepage only.
If this is the case, your problem has nothing to do with jQuery.
Your .region element is also positioned, and so it is being rendered over the menu.
Setting nav {z-index: 1} and .region {z-index: 0} should fix the problem, as it will bring the menu over the other positioned content.
I ended up getting rid of the repetitive icon that I had in the menu, I didn't need it, placed a z-index: 1; on the nav container. I also changed the positioning of the menu-icon to relative instead of fixed and that fixed the problem in the mobile devices I have been able to test in.
unless this was a design feature, the hamburger icon is no longer on the top left and in the hero image when the desktop browser is scaled to narrow width.
I am facing issues where when a user clicks on a link it redirects them to a specific div with a specific id.
I'm using jQuery for the smooth scroll feature.
The issue is when I'm at the Homepage then I click on the About page it normally scrolls there, when I click back on the About link again the page moves a bit click again and it returns to normal.
You can try it out here (https://saa-d.github.io) And all of the code is here (https://github.com/saa-d/saa-d.github.io)
Thanks in advance :)
EDIT: I've tried troubleshooting using Chrome's inspection tool, and I think the problem is with the .stick CSS class that's responsible for sticking the navbar using JS. But I am not exactly sure what's the issue and how to fix it.
It's happening because you attach and detach the nav which causes the section to shift up and down by the height of the nav.
To avoid it use position:absolute on the nav:
nav {
background-color: #595241;
height: 60px;
position: absolute;
width: 100%;
}
I am running a website using WordPress and using some javascript that changes the page see http://s72956.gridserver.com/dev/.
I want my menu position to be static at 150px down and 800px right and not move when I change my browser window to any size. Currently when I try position:static; it moves when I click on one of my javascript links that expands a section. Can anybody help?
In your css, try position: fixed; instead of using position:absolute;.