I want to add to my site based on Bootstrap 3 Affix feature for bottom navigation links. These links fixed on the bottom and added offset for the footer.
But when I scroll to the footer I see the navigation do some small "jump".
All work as need, even if I toggle to a mobile panel in Google Chrome. But excluding real mobile devices. In any case, I tried on three Android devices.
I added a link to a short video from the phone screen for clarifying: https://imgur.com/a/lcBASRD.
Please see to the bottom of the screen.
CSS:
#nav_affix {
left: 50%;
margin-left: -70px;
width: 140px;
z-index: 99999;
}
.affix {
position: fixed;
bottom: 0;
}
#nav_affix.affix-bottom {
position: absolute;
}
#nav_affix div.next {
float: right;
}
#nav_affix div.prev {
float: left;
}
#nav_affix div.next,
#nav_affix div.prev {
width: 60px;
height: 60px;
border-radius: 10px;
}
JS:
$('#nav_affix').affix({
offset: {
bottom: $('.footer_wrap').outerHeight(true)
}
});
Any ideas?
Thx for any answer.
Best.
You should place footer in a wrapper with same height as footer. Thus, when footer placing its original position, it will not make a jump.
I have done this with dynamically but also static height will solve the problem.
$('#nav_affix').on('affix.bs.affix', function () {
$('#footer-wrapper').height($('#nav_affix').outerHeight(true))
});
Related
How do i get a fixed navigation for my website? i want the menu on my site to remain stick to the page as the user scroll downs to see the content.
The navigation disappears as the user scroll down at the very bottom of the page. How do i make it stay? I tried using this but it doesn't work.
/* The sticky class is added to the navbar */
.sticky {
position: fixed;
top: 0;
width: 100%;
}
Here's the link of my site.
https://kickthebuddyapk.com/
Thank you!
Try to remove
.nav-secondary {
margin-top: -100px;
padding-top: 100px;
}
and replace with
.nav-secondary {
position: sticky;
top: 0;
background: white;
}
Try to add:
#genesis-mobile-nav-secondary{top:0; position:sticky;}
I have a Wordpress site and I wanted to display two vertical banners outside of the main container. I am using this css and it works on Firefoxs and IE. On Chrome however only the left one is shown. Any ideas?
#media only screen and (min-width: 1100px){
div.side-image-left {
position: absolute;
z-index: 98;
left: -840px;
top: -24px;
}
div.side-image-right {
position: absolute;
z-index: 99;
left: 342px;
top: -24px;
}
}
you can try floating the image not positioning. Now, as I have seen you used absolute positioning, so in this approach you also won't get always get the banners when scrolling down.
.side-left-image{
float:left; }
.side-right-image{
float: right; }
but z-index won't work!
Hey Stackoverflow Community,
I have a simple lightbox script with a few images on the page, but it somehow doesn't work as it should. When I use position:fixed on then the overlay, then it is full and the image sticks to the top, but when I use position:absolute, then it is cut half way through page and the image is gone to the top.
There must be something really easy I am missing, right? Maybe my HTML structure is wrong?
The error can be found here live - http://kriskorn.eu/lightbox-error/
Thank you for all the help!
Kris
here are two issues
1) you are using padding-top: 700px; in .main p which force the images to go down the page . and with position absolute the images can never display with overlay. the overlay div will go up with scroll .here position:fixed can work .Reason is with position fixed the content will move upside and the overlay will stay on fixed position.
2) you should use opacity:0.* or any light color .you are using 0.95 which will not display the content below the div.
this should work please check
#overlay {
background-color: rgba(255,255,255,0.3);
position: fixed;
width: 100%;
height: 100%;
top: 0;
left: 0;
text-align: center;
/* display: none; */
}
with position absolute it will not cover all the page.
this is surprising. Why you are using this ??
.main p {
padding-top: 700px;
}
this can also be an option.
.main p {
padding-top: 10px;
}
#overlay {
background-color: rgba(255,255,255,0.3);
position: absolute;
width: 100%;
height: 100%;
top: 0;
left: 0;
/* display: none; */
text-align: center;
}
It seems that the answer I was looking for is, that you can't have position:absolute without some kind of JavaScript code. I used position:fixed after all, because that was already working for me.
I'm trying to get a background working with a sticky footer and I've hit a brick wall. For some reason, the blank space underneath body seems to stop at an elastic height above the bottom depending on the window height.
I can't see anything which could cause this and would really appreciate a pointer.
The demo site is at http://myfitzeek.lime49.com
According to your link, you just change
html {
height: 100%;
margin: 0;
padding: 0;
}
#footer{
position: absolute;
....
}
to
html {
margin: 0;
padding: 0;
}
#footer {
position: fixed;
....
}
I'm having issues with the margins in browsers (other than Firefox) on this page:
http://jumpthru.net/newsite/commentary/
Here is the CSS:
#container3 {
float: right;
margin: 0 -240px;
width: 100%;
}
#content3 {
margin: 0 210px 0 -45px;
width:500px;
}
#primary, #secondary {
left:920px;
overflow: hidden;
padding-top: 40px;
position:absolute;
width: 220px;
}
Kind of a strange way to build up the page..
I recommend you to create a 2 column layout in main2..
Left for menu and right for the comments header, with beneath that the content and the recent comments div..
And, start using clearfix: http://www.positioniseverything.net/easyclearing.html
I fixed the issue in Chrome by changing this CSS:
#primary, #secondary {
left: 980px; /*was 920px*/
overflow: hidden;
padding-top: 40px;
position: absolute;
width: 220px;
}
I see you're using absolute position on #primary, this is based on the window so when i resize the window the "Recent Comments" section moves. So depending on the resolution of the users screen and the size of their browser this will move.
add position relative to the main2 div. Then change the left value on the #primary to right with a value of 0. this will keep it on the right side and always in the same place.
#main2 {
position: relative;
...
}
#primary, #secondary {
right: 0;
...
}
EDIT: The reason this works is when you use position: absolute the value is absolute the nearest relative parent element. if the element as no parent elements with position: relative it will be absolute to the browser window. Hope that makes sense.