I want to place the main slider behind main navigation so I have set navigation position to fixed and the slider position to absolute. It works fine but for some reason, the entire footer element moves below navigation and on the slider. I have tried giving min-width and display block to the slider but it did not work.
Here is my sample code.
Navigation HTML:
<nav>
Item 1
Item 2
Item 3
</nav>
Slider HTML:
<div class="slider">
Slider Items Here
</div>
Footer Html:
<footer>
</footer>
CSS Code
nav {
top: 0px;
position: fixed;
z-index: 99999;
}
.slider {
position: absolute;
top: 0;
width: 100%;
bottom: 0;
min-height: 600px;
display: block;
}
footer {
display: block;
}
Here is how it looks right now:
As said in comment, you shoud set the header and footer position to absolute (the former at the top and the latter at the bottom), and remove the absolute from the slider.
Then your slider will be full-page, and header and footer will always be at the right position.
.wrapper {
height: 100vh;
display: flex;
flex-direction: column;
}
header,
footer {
height: 30px;
}
main {
flex: 1;
}
body {
margin: 0;
}
header {
background-color: #2ecc71;
}
main {
background-color: #ecf0f1;
}
footer {
background-color: #2c3e50;
color: white;
}
<div class="wrapper">
<header>I'm a 30px tall header</header>
<main>I'm the main-content filling the void!</main>
<footer>I'm a 30px tall footer</footer>
</div>
Like This ......You want!!
at the top of Header and inside header Nav Bar ... In Main Section Slider And Below Footer !
http://codepen.io/enjikaka/pen/zxdYjX
Related
Hi,
Its My Fixed Header and Footer When i am scrolling Browser. Browser Header is Hidden that time my Footer is jumping How Can i Fix it.. I have attached jumping ScreenShot Below :
..
#header {
width: 100%;
background: #fff transition: top .5s ease;
display: flex;
position: fixed;
left: 0;
top: 0;
height: 50px z-index: 999;
}
#main {
padding-top: 50px;
transition: padding-top .2s ease;
}
.fullContainer {
min-height: calc(100vh - 50px);
display: flex;
flex-direction: row;
flex-wrap: nowrap;
}
#footer {
width: 100%;
height: 50px;
position: fixed;
bottom: 0;
left: 0;
right: 0;
background-color: #fff;
z-index: 999;
}
<div id="root">
<header id="header"></header>
<footer id="footer"></footer>
<main id="main">
<div class="fullContainer">
</div>
</main>
</div>
Thanks
Add this css for your header and footer.
.fixed-header{
position: fixed;
top: 0;
width: 100%;
}
.fixed-footer{
position: fixed;
bottom: 0;
width: 100%;
}
While scrolling the page, if your content overlaps on the header and footer means please add a z-index for both header and footer as required
This will work:
body {
margin: 0;
}
#root {
height: 100vh;
display: flex;
flex-direction: column;
}
#root > * {
width: 100%;
}
#header, #footer {
flex: 0 0 auto;
}
#main {
flex: 1 1 100%;
overflow-y: auto;
}
<div id="root">
<header id="header">fixed header</header>
<main id="main">
<div class="fullContainer">
your content here
...
<hr>
let's test with something tall
....
<div style="height: 400vh"></div>
</div>
</main>
<footer id="footer">fixed footer</footer>
</div>
It also works with short content:
body {
margin: 0;
}
#root {
height: 100vh;
display: flex;
flex-direction: column;
}
#header, #footer {
flex: 0 0 auto;
}
#main {
flex: 1 1 100%;
overflow-y: auto;
}
<div id="root">
<header id="header">fixed header</header>
<main id="main">
<div class="fullContainer">
your content here
...
<hr>
let's test with something small
....
</div>
</main>
<footer id="footer">fixed footer</footer>
</div>
Cross browser, cross device, no jumping guaranteed, as it doesn't rely on positioning.
The only problem it might have, on some designs, is that the #header, #main and #footer don't actually overlap and this can be a problem if you want the header (and/or footer) to be displayed over the background (or contents) of #main.
To tackle this rare edge case, you have at least a couple of solutions:
a) don't place the background on #main, place it on #root or even body. problem solved.
b) if, for some design reason (let's say header and footer are semi-transparent and they make stuff under them blurry - which is a cool effect) you actually want the content of #main to scroll under them, so it gets blurred as you scroll, you will have to use JavaScript.
You want to give #main a top negative margin (and a matching positive top padding) equal to #header's height and a bottom negative margin (matched with a positive bottom padding) equal to the #footer's height. And, obviously, give both #header and #footer a higher z-index value than #main's.
The JS would be used to update the margins/paddings when header/footer change height.
I started writing on how to tackle this (again there are a couple of options) but at some point I realized the answer is getting too long, all because of trying to solve an edge case. If you have this particular edge case, ask it as another question and I'll answer there.
Im building a website based on a Horizontal Scroll View, this is made by an move interaction and a sticky section. Inside this sticky section i want to put an sticky div,then, when you scroll horizontaly, one div remains sticky meanwhile you scroll horizontally.
There is an example:
https://studiochevojon.com/
In this website you can horizontal scroll and have a sticky div in determinate moment.
There is my webflow project: https://preview.webflow.com/preview/designfeelings?utm_medium=preview_link&utm_source=dashboard&utm_content=designfeelings&preview=1bd0bbb81feac58ef0d75e3ee82d61d0&mode=preview
Can someone explain me how this works? I try all horizontal scroll tutorials but i dont know how to make this works.
Thank you all.
to be sticky a div needs the style: position: sticky;. Then it needs a broder where ti actually should stick to (top, bottom, left and/or right) and the distance (%, vw/vh, px...). Like in this example
body {
margin: 0;
padding: 0;
}
#wrapper {
position: absolute;
top: 0;
bottom: 0;
width: 500vw;
display: flex;
background-color: red;
}
.page {
width: 100vw;
padding: 5px;
}
#one {
background-color: yellow;
}
#two {
background-color: green;
}
#three {
background-color: grey;
}
#sticky {
display: flex;
position: sticky;
left: 0;
width: 100vh;
background-color: blue;
padding: 5px;
}
<div id="wrapper">
<div class="page" id="one">I'm page 1</div>
<div class="page" id="two">I'm page 2</div>
<div id="sticky">I'm the Sticky Box</div>
<div class="page" id="three">I'm page 3</div>
</div>
I'm trying to get my footer displayed at the bottom of the page. Usually it's just position: fixed and bottom: 0. However I want my footer positioned inside a container (section element), so when the size of my sidebar at the left changes, I want my footer be also moved to the right or left.
I thought I could get use of position: sticky instead of width, but when there's not enough content inside of section element, it is displayed at the bottom of the section, but not at the bottom of the page.
Is there a pure CSS solution for this or have I add some javascript?
body {
margin: 0;
}
.page-body {
display: grid;
grid-template-columns: 7rem calc(100vw - 7rem);
}
.sidebar {
background-color: yellow;
}
section {
position: relative;
width: 100%;
min-height: 100vh;
background-color: green;
}
.content {
padding-top: 400px;
}
footer {
position: -webkit-sticky;
position: sticky;
bottom: 10px;
background-color: blue;
z-index: 999;
padding: 0;
}
<html>
<head>
</head>
<body>
<div class="page-body">
<div class="sidebar">
</div>
<section>
<div>
<div class="content">
Content
</div>
</div>
<footer>
Footer
</footer>
</section>
</div>
</body>
</html>
Remove the padding-top on the .content class add height 100vh to it and remove the bottom:10px on footer can solve your problem
.content {
height:100vh;
}
I want to extend the left side of a navigation menu within a centered container. I tried position: absolute but the menu overlapped the logo,
is there another solution? If not, how can I stop an absolute element overlapping other elements?
Here is an image of what I'm trying to do
extended div
If you want to keep your menu elements inside the container, you can go with an absolute ::before pseudo-element.
section {
max-width: 300px;
margin: 0 auto;
background-color: #eaeaea
}
header {
display: flex;
line-height: 30px;
}
nav {
background-color: rgba(255,0,0,.2);
position: relative;
}
nav::before{
content:'';
position: absolute;
display: block;
width: 100vw;
height: 100%;
right: 100%;
background-color: rgba(255,0,0,.2);
}
<section>
<header>
<nav>navigation menu</nav>
<span>logo</span>
</header>
container
</section>
I have a navigation bar under a header div tag
and a slideshow div afterwards ... as the code shows
<div class="header">
<div id="navbar">
content
</div>
</div>
<div class="container">
<div class="slideshow" id="slideshow">
slideshow content
</div>
</div>
the header and navbar have a fixed position to stay on top of the page when scrolling , the problem is when I scroll my "slideshow" appears on top of the navbar but the rest of the page content does not, how can I fix this ?
CSS styles
.slideshow {
position: relative;
margin-bottom: 10px;
padding: 50px 0 0 0 ;
}
Different CSS sheet for header and navbar
.header {
background: #2f3036;
height: 51px;
position:fixed;
width: 100%;
}
#ime-nav {
position: fixed;
width: 100%;
z-index: 10000;
background:#FF9900;
}
apparently I just needed to add a z-index to the header, completely overlooked it
.header {
background: #2f3036;
height: 51px;
position:fixed;
width: 100%;
z-index: 1;
}