I'm making a new website where I want my navbar fixed top when scrolling. It works, but on mobile there is white space on top or bottom when we scroll. The problem is than I have a nav coming from left side on mobile. This nav doesn't moove when I scroll, no the top navbar go under the left navbar and its really ugly.
Here is my website if you don't understand https://www.hytalefrance.net
I've tried something like this:
overscroll-behavior: none;
But It change nothing
body {
height: 100%;
overflow: auto;
}
Do nothing to
It's a classic bootstrap 4 navbar, but I don't use fixed-top class to make it fixed, it's a custom class similar to fixed-top
.sticky.is-sticky {
position: fixed;
left: 0;
right: 0;
top: 0;
z-index: 1000;
}
I would like the whitespace on mobile disappears.
Some screenshot taken on my mobile (iPhone 6)
I'm actually scrolling down:
When nav is open:
When I scroll with nav open:
I guess you're taking about inertial scroll behavior caused by over scrolling a webpage in iPhone. There is no ideal fix for this problem.
There're few partial solutions that may / maynot work in your case
- How to disable inertial scrolling on body for iOS browsers?
- ipad safari: disable scrolling, and bounce effect?
Though, It is not recommended to prevent it. Doing so will intercept natural scroll smoothness in browser.
I'd suggest you to set your body's background color to the exact bg color of your nav bar to make it less obvious
I fixed the problem by removing my js function. On desktop navbar will not be fixed, on mobile the navbar is now directly fixed, and it works
Related
I have div with the id #sy-whatshelp for a floating chat head which has the property Position:fixed as I want it fixed on the bottom right corner of the viewport. The css for the div is
#sy-whatshelp {
right: 15px;
bottom: 15px;
position: fixed;
z-index: 9999;
}
The issue is that in chrome mobile browser when scrolling down very fast, the touch area of the div shifts up even though visually the div stays in the correct position as defined by my css. How do I make the touch area of the div stick to the correct place too as defined by my css.
Here is a video link of the problem in chrome mobile dubugger connected to a pc using adb. You can see that the highlighted portion identifying the div goes up while scrolling down but visually its in the correct place.
https://imgur.com/a/yJBUMdR
I have tried this solution with no avail
Position fixed on chrome mobile causing element to move on scroll up/down
I'm making a website DEMO using Bootstrap Framework and AOS - Animate on scroll library.
In desktop I had to change some animations because they increased the width the page, with a horizontal scrolling.
For the mobile I have the same issues, but now I don't understand if the problem is caused from the animations or something else, I see the navbar larger.
Here is the link: https://doc.digitalsolutioner.com/
I've tried to fix wider elements like the navbar, but the issue remains.
I have seen in other issues similar about rows without containers, but it's not the case.
I want to have the right width on the mobile, with no horizontal scrolling.
the culprit is the following class inside the footer... to check: go to the bottom of the page; do inspect element; remove this property (in browser developer tools) to see how it is causing the horizontal scroll to appear
[data-aos^=fade][data-aos^=fade].aos-animate
{ transform: translateZ(0); }
simplest way to solve this will be to hide overflow-x property against your body. This css will be the simplest way to get the fade effect without seeing the scroll at the bottom:
body {
overflow-x: hidden;
}
Update:
on mobiles and mobile emulators, a horizontal bar appears... this was due to margins on the card-service class, just remove the margin-left and margin-right properties in the media-query (as shown below) to resolve this.
#media (max-width: 576px){
.card-service {
/* margin-left: 15px; */
/* margin-right: 15px; */
margin-bottom: 25px !important;
}
}
In AOS there is problem, when you cant set initial position of your element, Its set to the default position.
Like in fade-left default position is right: 0 so whenever you call fade-left its start from 0 and its create screen overflow.
So there is two option here,
Don't use fade-left
Set initial value of the element
I'm developing a web site based on the Hyde theme for Jekyll.
This layout uses a fixed navigation bar on the left with 100% width. This is working fine in most situations.
In Safari on iOS, however, the height of the viewport changes while the user is scrolling as the browsers top navigation bar collapses. If this happens, the navigation bar's size is not updated until the scroll stops, leaving an area in the lower left corner that is not covered by the navigation bar:
(Notice the text extends below the navigation bar. This screenshot was taken while the page was in motion.)
This video shows the problem in action.
Is there any way to force Safari to update the navigation bar's height while the scroll is in progress?
its an ongoing discussion. There is no real solution for this problem. https://nicolas-hoizey.com/2015/02/viewport-height-is-taller-than-the-visible-part-of-the-document-in-some-mobile-browsers.html
What you can try for your website is the following:
.sidebar {
position: fixed;
left: 0;
bottom: 0;
width: 18rem;
text-align: left;
height: 100vh;
}
This will align the sidebar to the bottom and the text wont cut. The white bar will appear on top but it wont be too intrusive as the bottom being cut out.
Add the below styles to fix the issue
html,body{
-webkit-overflow-scrolling: touch;
}
Here you find the reference
I'm working on a live mockup page but running into issues with the navbar showing on top of the logo image. I've researched for answers and tried them but are not working as expected. How can I fix it so the navigation isn't layered on top the logo? I'd also like to either adjust the nav to the top of page when in mobile size, logo becomes hidden or keep the logo visible on the navbar in mobile size. This will also require media query breakpoints to smooth the transition of desktop to mobile. I'm kind of new bootstrap. Any help is appreciated. Thanks
link to image mockup
link to live webpage mockup
link to css override
Looking at the live webpage mockup link, you have
.navbar-fixed-bottom,
.navbar-fixed-top {
position: fixed;
right: 0;
left: 0;
z-index: 1030;
}
the z-index is overlapping all of your elements.
add
position: relative;
z-index: 99999;
to your .row-img class
I've added a sidebar tab "Subscribe" (jquery.tabSlideOut.v1.3.js) to my site (visit http://thecasket.co.uk/). Desktop browsers fine, but causes horizontal scrollbar to appear on iPad - and pages start sliding around. The tab has a negative absolute position (-290px, width + padding in my css for the slide-out-div) set in the javascript. On the iPad the scrollbar takes in the width of the slide div.
<div class="slide-out-div">
my subscribe form
</div>
.slide-out-div {
padding: 20px;
width: 250px;
background: rgb(255,255,255);
z-index: 9999;
-webkit-overflow-scrolling
}
I've tried adding: -webkit-overflow-scrolling: touch; but doesn't seem to do anything and I'm not really sure what this would do.
Any help on fixing the scroll, much appreciated.
As you don't define overflow:hidden to any parent container, the mobile devices expands the viewport to the size of the content. You you could go with this approach and set the overflow value or you can use position: fixed instead absolute on the slide-out-div. Both should do the trick.
Also note the text of the <a>-element with text-indent: -99999px; is "content", but I guess it should be "subscribe".