I've been struggling with this problem for a few days now. Navigation bar on my page hides browser scrollbars. This happens in Chrome (both desktop and mobile) and Firefox - I didn't chceck other browsers yet but I suppose the result will be the same.
I tried like every single solution I found on Google and Stack Overflow but none of them fully worked. The navbar either kept covering the scrollbars or it wasn't clickable because it was under the rest of the page.
Can somebody browse my CSS and help me with this problem? Thanks a lot!
P.S.: I use no CSS framework. I downloaded the template from here and sligtly modified it.
Related
I'm currently working on the page of a site.
In this page the top bar is stuck at the top when i scroll down.
This issue occurs only in the Chrome browser.
When i opened it in Safari or other browsers it is working perfectly fine.
I tried disabling Javascript thinking js would have caused the problem. But the errror still occured.
I think the issue is with css style. but i'm not sure.
What would be causing this problem ?
Help me to sovle this issue.
If you need anything i can add here...
I expect to solve this problem in chrome since many people are using chrome.
Multiple Jquery has been initialized in both top and bottom of the page.
Use only one jquery and that is at the bottom side of the code.
From console, error looks like some order mismatch in initializing.
Please change the order of js import (First jquery-3.3.1.min.js then bootstrap.min.js and all other js files)
I checked your page out buddy, I don't see any top bars. Can you clarify further?your page as seen by me in chrome
If you meant the logo and the white line on the top, they are not fixed and scroll fine with the rest of the page.
I am doing an animation with ScrollMagic and GreenSock's TimelineMax. The animation is suppose to go in a WordPress page. However the animation has some glitches when the page is open in Chrome. This problem does not occur in Safari and Firefox. I can't test for IE.
This is how the problem looks like:
And this is how it is suppose to look like:
The most bottom part with title Your web site goes up, and the two top parts move down. As I said, it works perfect on Safari and Firefox, but on Chrome you have to scroll up and down to fix the issue. However this is not acceptable for us, since the users of our page wont see the animation properly when they first scroll down.
Here is JSFiddle of the animation. Now, this will most probably work without problems in JSFiddle, but when I put this in WordPress page it looks like on the first image. Does anybody have a clue why this happens?
I found the solution :) I don't want to delete the question, because I hope somebody will find it useful.
The solution is to increase the z-index of all the elements (images, divs, everywhere where I have z-index in the css.). I increased it for 1000 on every element and it worked.
I'm having an issue with a scrollbar that doesn't scroll. Here is my web page (still under construction): http://www.personal.psu.edu/pzb4/zacs/
CSS file is at http://www.personal.psu.edu/pzb4/zacs/css/screen.css
The scrollbars work fine when tested in Chrome and Firefox. Safari seems to be the problem. When I click on the Depth of Field link, the scrollbar is inactive for some reason. I was having the same problem with the Exposure link, but once I fiddled with that and somehow got it working, the Depth of Field scrollbar stopped working! I didn't do anything to change that and it was working before. Scratching my head as to why this doesn't work right. Any help humbly appreciated.
Here is the link to the website I am talking about.
My problem is that when you navigate between the different pages in the main navigation, the main wrapper does not align on the different pages I have used. So if you are on the home page and you click on "WMH" in the main navigation bar the whole page jumps to the left by about 8px.
This creates a jitter between pages that my client really doesn't like. I used some padding-left and padding-right in css to align it correctly. Unfortunately when I get it pixel perfect in Firefox, it is wrong in Chrome and Safari. If I get it pixel perfect in chrome, it jitters in Firefox. This is very irritating. I don't want to have to write separate styles for Chrome, Firefox, IE, Safari unless it really is the only solution.
Thanks for your feedback.
Archie.
The browser scrollbar looks to be causing this. You can force a scrollbar to always appear which would solve the issue. Add this to your CSS:
html {overflow-y: scroll;}
You would also probably need to remove the padding that you tried to fix the problem with originally once the above style is in your CSS.
I'm facing a problem I can't figure out how to solve. I'm almost sure this is a Chrome bug since in other browsers it works like a charm but I want to be sure. On my website, developed using a mobile first and responsive design approach, I have a menu that uses the Left Nav Flyout pattern. On Tablets and desktops, I show it full width.
When I load the website on my smartphone (specifically an Android device) using Chrome in Portrait mode, once I rotate the device (passing in Landscape mode) and start to scroll the page, as soon as I reach the menu position, the latter magically disappears. What is really strange is that if you try to click the space that now is completely white, you can see that the links are actually there. I tried to use the inspector to find the problem but didn't succeed.
So, wow can I solve the problem? Anyone else had this issue before? If you know it's a bug, I'm glad to add a temporary workaround as well.
I didn't find a real solution but a reasonable workaround. Of course, I still hope that someone will explain what's the cause of this issue and how to solve it.
In the meantime, I found that the problem occurs because the menu, 240px wide, is completely out of the viewport. In fact, as soon as I changed the margin-left to 239.5px the menu didn't disappear anymore.