I am trying to add a text field under my blue header. I added a div and a <p> but all it does is shift down my header with a small space above.
How can I fix this?
https://codepen.io/anon/pen/KXqGyp
As already stated, you can remove the position. Alternatively, add a padding-top value to class bio in your CSS and set it to be at least equal to the height of your header (75px seemed fine).
The problem is that position: fixed; causes the header element to not take up space, where it normally would, so you need to create a buffer of whitespace above your first element in order to take up the space your header originally would have.
Remove the position CSS attribute from the header style.
You can also change the position attribute for the header class to position: static;.
static is the default value, so just deleting the attribute makes it.
Your positioning is the problem. You're setting a fixed position but not setting where that positioning is:
header {
position: fixed;
width: 100%;
background: #4168a8;
top: 0; /* specifying where you want to place the fixed item */
}
Once you do that you'll see that your content is now fixed to the top, but the divs are now below your fixed item. You'll need to set the top margin for whatever item you want under it to be greater than the height of your navbar in order for it to show up correctly.
Here's a related SO article: Positioning a "wrapper" div underneath a fixed navigation bar?
Related
I have implemented a sticky footer on my wordpress website with this HTML code:
<style>
.footer{
position: fixed;
left: 0;
bottom: 0;
width: 100%;}
</style>
But when viewing the post, the footer goes beyond a section on the website (attaching the image below) and screws up the carousal too. Ho do i fix this?
footer going beyond the carousal section
I was trying to implement a sticky footer on my website. I was expecting it to get fixed at the bottom of the screen and not change anything else.
Try to apply z-index property.
z-index property specifies the stack order of an element.
An element with greater stack order is always in front of an element with a lower stack order.
Make sure to give a z-index property to your .footer styles. An element with a larger z-index is always stacked on top of an element with a lower z-index. Elements with the same z-index are stacked in the order they appear in the document. By default, elements have a z-index of 0. However if your footer will always be visible, better go with 100 and sure it will come on top.
Also on the picture it looks like it doesn't take the 100% width. Maybe you have margin or padding set on the parent element. But also can try to use 100vw which is gonna be the view width of the screen.
I have a navbar at the top of the page that I want to be fixed. The problem is that if I make it fixed as opposed to absolute or something, stuff that would normally be below it takes its place and it sits on top making the content invisible. Any way I can get them to notice the fixed element and position accordingly without having to position:absolute or position:relative all of them?
nav{
width: 100%;
position: fixed;
top:0;
}
Apply a margin-top or padding-top to the first non-fixed element on the page, with a value as high as the height of the fixed-position navbar. Typically that element would be main, the first section or similar, possibly also simply the first (non-fixed) div, depending on your page structure.
Example: http://jsfiddle.net/3p9urx4y/
I am trying to make mobile navigation that has to be placed under the header. But if I am specifying the next properties:
.list {
top: 50px;
overflow-y: scroll;
}
The last 50px of the content is missing because top property is not zero. I was trying to make the outer div with padding-top of 50px, but in this case scrolling appears at header area and this is not expected behavior.
We could specify the margin-bottom of the last list child and that helps:
.item:last-child {
margin-bottom: 50px;
}
But that is the trick and I am trying to find better solution.
I have found this question Scroll part of content in fixed position container but I need something different. My header has to be fixed and navigation menu has to slide from the right side when user clicks the navigation button.
Edited: http://jsfiddle.net/3p9urx4y/ new example
Your .list has height: 100vh, so it will occupie the equivalent of 100% of the screen's height no matter its position.
One solution would be setting the list height to calc(100vh - 50px). I've edited the fiddle.
The calc function allows you to execute calculation when specifying a css property. More information here.
Give the header a position of fixed, a height and a width, don't forget to give it a z-index...then your navigation below it should be fine I can toss it more suggestions it you need me #cheers
I have a long table that I don't want to show in full length, because then the footer and other elements below it are only shown after scrolling down for long.
How can I assign Header, Footer and other elements and then let the table fill up the remaining height?
By now I'm using a flexbox to distribute the free space to the table wrapper, but the table content gets shown in full length and the footer is pushed down.
I also tried to nest an overflow: auto; into an overflow: hidden; but then it's not scrollable at all.
Thanks in advance.
Have you seen w3schools - CSS Layout - The position Property guide?
Just use footer{ position:fixed } for your footer in your CSS along with other style codes.
An element with position: fixed; is positioned relative to the
viewport, which means it always stays in the same place even if the
page is scrolled. The top, right, bottom, and left properties are used
to position the element. A fixed element does not leave a gap in the
page where it would normally have been located.
(As Mentioned in the w3schools).
Hope you will get your solution.
You have to set the css specification for the footer element to position: fixed; If you want header to be fixed set the header css specification also to position: fixed;
just use position:fixed in ur footer css...and if u want to have scroll then use css overflow:scroll; if u want hide ur scroller in the page then use overflow:hidden;
I am trying to fit a progress bar into the parent, which is oddly difficult. It is done on a Jot form, but with access to custom CSS and so on, which I have utilized a lot (that could have created the problem I guess).
The progress bar is positioned fixed at the top, and is in the parent element div.form-all as the very first and second element. I have tried all the common suggestions on here about box-sizing and so on, but nothing seems to work.
My suspicion is that it is because the parent element does not have an explicitly stated width, as this fixes the problem monumentally (but breaks the responsiveness, as it goes from ≈36% width to 100% on small screens).
Any help would be greatly appreciated. The actual form can be found here, at Jot form, in Danish:
All added custom CSS should be visible by inspecting the elements, but I will mention that it has worked before.
The div containing the progress div has the following css-attributes:
.progressBarContainer.fixed {
position: absolute;
top: 0;
width: inherit;
background: #FFF;
z-index: 9999;}
The parent has by Jotform-coding the following relevant attributes, with no position attribute:
.form-all {
width: 690px;
width: 100%;
max-width: 690px;}
Thank you in advance, Kris.
Absolute Position Solution:
You said you are using position: fixed, but this won't inherit the width of the parent. You need to change .progressBarContainer.fixed to position: absolute, and then the form parent, .form-all, add position: relative.
This will then set the width of the progress bar to be the same as the form.
Fixed Position Solution:
There are a number of ways you can keep the progress bar sticky on the screen. You will either have to explicitly state the max-width of the progress bar in the CSS, or CSS with a JavaScript solution. The simple CSS solution would be to keep position: fixed assigned to .progressBarContainer.fixed, but then you have to specify max-width: 690px to .progressBarContainer.fixed.
Its position is fixed that's why it gets the whole screen's width when it's set to 100% width. See here for reference
Assuming that you want the progress bar to stick to the top and since the container element .form-all has a max-width property of 690px try applying it to the progress bar element as well to prevent it from expanding to 100% of the screen width.
Otherwise simply remove the fixed positioning from the progress bar.