currently I have troubles with bootstrap5 and modal respectively glightbox.
when switching back from these applications, the static navbar shakes horizontaly.
the same with glightbox, additional to that the sticky footer also slides up when the screen is grayed out.
deliberate specific features: sticky footer, vertical scrollbar always on
fullscreen sample: https://codepen.io/manu_g/full/dyZOdbV
Inspecting your codepen, I observed that the margin-left and margin-right of the child element of the #header increases, when the modal opens.
When you leave modal, margin-left and margin-right are returning back to their initial values, causing the shake.
The fixed position seems to be the root of cause. Thus, I would go with position: sticky instead and add some margin top in the .inner-pages.
For example,
.fixed-top {
position: sticky;
top: 0;
right: 0;
left: 0;
z-index: 1030;
}
.inner-page {
margin-top: 50px;
}
Related
Design question here. How can I make the #main-wrapper slide over the #single-carousel on the following page: http://duijnisveld.wpengine.com/
Right now it moves up when scrolling, I need the carousel to stay put and make the main wrapper slide over it when scrolling down.
giving .header-foto-wrapper position: fixed and #main-wrapper position: relative gives unexpected behaviour for me, I'm clearly missing something important.
*note, in the url, the .header-foto-wrapper does not have the position fixed as it breaks the layout and it's a live site for the client to see.
Thanks!
You'll need to apply width. Things go a little wonky when a container calculates width once you pull it out of the content flow. A width:100% will fill the page width. You'll also want to move the content area down and apply a background color.
.header-foto-wrapper {
position: fixed;
width: 100%;
}
#main-wrapper {
position: relative;
top: 100%;
background: #fff;
}
By setting the position as absolute.
.wrapper {
position: absolute;
left: 100px;
top: 150px;
}
http://www.w3schools.com/cssref/pr_class_position.asp
a client has asked if he can have the header area of his site static so it is always visible?
I am using the Eris template: http://hogash-demos.com/themeforest/?theme=eris_joomla
My site is: http://www.negotiumrecruitment.co.uk/dev
The top area with the logo, contact info and navigation plus the line below all wants to stay where it is and when scrolled, the whole site moves up and the top area always remains visible.
Thank you in advance.
Paul Walker
You can try:
#rt-header {
position: fixed;
top: 0;
width: 100%;
}
An element with a fixed position is positioned relative to the browser
window, and will not move even if the window is scrolled
Source: http://www.w3schools.com/css/css_positioning.asp
Edit: seeing the website you proveided, you will also need to change your #rt-logo CSS rule. It's currently 'absolute' and should be 'fixed' instead:
#rt-logo {
display: block;
position: fixed; /* Instead of 'absolute' */
left: 50%;
top: 0;
margin-left: -470px;
z-index: 9999;
}
This is because your logo stays outside your header in your template. Normally it would be inside the header and you wouldn't need this.
The title says it all. I have an image with height: 100% inside each of a couple display: inline-block <li> elements. When their container is position: static. All is peachy. But when I change it to position: absolute/fixed, the <li> elements get width of the original image, not the scaled down width even though the image itself has correct dimensions.
This behaves as expected in Chrome, but breaks in Firefox.
Did anyone encounter this behaviour? More importantly, is it possible to fix it without JS?
Background: I am making a responsive position: fixed gallery that fits the screen with image thumbnails covering bottom 20% of the viewport.
Isolated Demo (click the button to toggle position: static/fixed ):
http://jsfiddle.net/TomasReichmann/c93Xk/
Whole gallery
http://jsfiddle.net/TomasReichmann/c93Xk/2/
I finally got it working. It seems that when you declare something with
Position:fixed, left: 0; top: 0; right: 0; bottom: 0;
Only chrome recognizes that as "explicitly defined dimensions". Once I added height: 100%; Other browsers caught up. Fortunately the height 100% didn't break the layout even when the content underneath overflowed viewport.
http://jsfiddle.net/c93Xk/3/
It still breaks uniformily across all browsers when you try to resize the window. I guess, I'll have to calculate the widths by hand with JS
DEMO
Check the demo, is that what you are looking for?
I have added these 2 lines of css to make it work like that:
/* Keep Position fixed at bottom */
#gallery:not(.toggle) { width: 100%; bottom: 0; top: auto; height: 20%; background: transparent; }
#gallery:not(.toggle) .gallery-thumbs{ height: 100%; }
Setting the height to 100% on my web page is messing things up. The footer is not staying on the main page, it's going past the main viewable area.... how do I prevent this from happening so that it stays on the bottom of the page?
see example: [URL_REMOVED]
Try putting the footer inside the <div id="bdy"></div> and positioning it on the bottom.
Since the #bdy has min-height: 100%, it pushes the footer down.
If you place the footer inside the #bdy, give it the style position: absolute; bottom: 0;.
UPDATE:
Ah, that is because the position: absolute; on the footer makes the instruction bottom: 0; stick it to the closest ancestor which does have not position: static(which is default). You can fix the issue by applying position: relative; to #bdy.
Please see this UI sketch image, I have this div in sidebar (black box) on a certain site and as I scroll down or scroll up, I don't want it to hide...I want it to move itself down as I scroll down and move itself up as I scroll back up so that it never hides out. Can you recommend me some jQuery that can get this done? or something else. Please help, thanks.
Don't use jQuery for this please; it's pure CSS.
#MyDiv
{
position: fixed;
top: 10px;
left: 10px;
}
Adjust the exact position to your liking by adjusting top and left. Maybe you want it centered vertically like in the image (if the sketch is accurate in that aspect), in which case you have to deal with all the fun tricks necessary for vertical centering; hopefully in your case something like this would work:
#MyDiv
{
position: fixed;
top: 50%; /* This places the _top_ of the div in the middle of the page. */
left: 10px;
height: 500px;
margin-top: -250px; /* This moves the div upward by half of its height,
thus aligning the middle of the div with the middle
of the page. */
}