Why is my header not fixed to the column.
<div class="container-fluid full-ht">
<div class="row full-ht">
<div class="col-sm-4 full-ht">
<div class="patient-column full-ht">
<div class="fixed-header">
Fixed Header
</div>
Some content follows
</div>
</div>
</div>
</div>
I want my header to be fixed inside the column when the vertical-scrolling happens.
http://www.bootply.com/tducyvW5u1
you should use
position:fixed.
for fixed header,to achieve fixed header while scrolling
CSS
.fixed-header {
position: fixed; // changed position:absolute to fixed
width: 100%;
top: 0;
padding: 15px;
}
In your CSS I would add !important and make the absolute a fixed as well as make it a priority.
.fixed-header {
position: fixed; !important
width: 100%;
top: 0;
padding: 15px;
}
Related
This question already has answers here:
How to create a fixed sidebar layout with Bootstrap 4?
(5 answers)
Closed 3 years ago.
I have a left div with id sideNav and a right main div like this
#sideNav {
background-color: #012d20;
position: fixed;
z-index: 1;
top: 0;
left: 0;
overflow: hidden;
border-right-style: groove;
height: 100vh;
}
<div class="row">
<!-- navigation sidebar -->
<div class="col-2 pt-5" id="sideNav">
...
</div>
<!-- main content area -->
<main class="col-10">
...
</main>
</div>
The code works but the left part of main is now inside behind the sideNav. When I remove the position property of the sideNav css, my divs are displayed correctly again but sideNav is no longer fixed and scrolls with the page.
How do I keep sideNav fixed and my divs properly displayed?
The reason this isn't working for you, is because row has display type flex, so that all the cols below fit into that row.
Your cols are then blocks spaced via their given value e.g. col-3 col-4 etc
By changing the column display type (to fixed in your example) your removing it from the flex spacing, and so your main nav will move left because you haven't offset it.
To fix this, don't add padding as others have suggested, BootStrap has classes that handle this. Instead, add offset-2 to your main nav, and leave everything else as is.
Example Snippet
#sideNav {
background-color: #012d20;
position: fixed;
z-index: 1;
top: 0;
left: 0;
overflow: hidden;
border-right-style: groove;
height: 100vh;
}
<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">
<div class="row">
<!-- navigation sidebar -->
<div class="col-2 pt-5" id="sideNav">
...
</div>
<!-- main content area -->
<main class="col-10 offset-2">
...
</main>
</div>
Thats because fixed gets "ignored" by other containers. It is handelt as if it was absolute. You can give your sidebar a fixed width and your main a padding.
#sideNav {
background-color: #012d20;
position: fixed;
z-index: 1;
top: 0;
left: 0;
overflow: hidden;
border-right-style: groove;
height: 100vh;
width: 350px;
}
main {
padding-left: 350px;
}
Codepen
Lets try this,
iam adding width for sideNav about 40px;the same padding-left iam put #main-content.
html
<div class="row">
<!-- navigation sidebar -->
<div class="col-2 pt-5" id="sideNav">
<p>paragraph...</p>
</div>
<!-- main content area -->
<main class="col-10" id="main-content">
<p>paragraph...</p>
<p>paragraph...</p>
</main>
</div>
css
#sideNav {
background-color: #012d20;
position: fixed;
z-index: 1;
top: 0;
left: 0;
overflow: hidden;
border-right-style: groove;
height: 100%;
width:40px;
}
#main-content{
width:100%;
float:left;
padding:0 0 0 40px;
background:yellow;
}
I saw you are using bootstrap grid, so to keep the grid working I recommend putting your fixed container in the .col-2 div
#sideNav {
background-color: #012d20;
position: fixed;
z-index: 1;
top: 0;
left: 0;
overflow: hidden;
border-right-style: groove;
height: 100vh;
}
<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" rel="stylesheet"/>
<div class="row">
<!-- navigation sidebar -->
<div class="col-2 pt-5">
<div id="sideNav">
...
</div>
</div>
<!-- main content area -->
<main class="col-10">
...
</main>
</div>
how to sticky div on scroll
see my screenshoot :
this screenshoot if sticky on top :
and this screenshoot sticky on scroll :
i mean like this, if sticky go to top the div back to normal (i mean without css sticky)
see this screenshoot, i want like this, if div stick go to the top back to normal (without css sticky) :
this my sticky :
#media screen and (min-width: 768px) {
.sticky {
position: fixed;
z-index: 9999;
display: block;
background-color: #2069e8;
width: 100%;
padding: 10px;
margin-top: -10px;
padding-top:10px
}
}
<div class="sticky">
<div class="col-sm-2">
<h2 style="margin:0px; width:250px;"><span class="smallnav menustater" onclick="openNav()"><i class="fa fa-th-list"></i></span> MY WEB</h2>
</div>
</div>
Please Help
Thanks before
The easiest solution is to keep your div always sticky but increase the padding-top of the div that is below it to make sure that the content can't go under the sticky div.
This will avoid this:
By moving the page content to the bottom.
Demo: https://jsfiddle.net/g9nhq3up/
You have to set padding-top: to the content (not to the nav)
See code:(JSFiddle:https://jsfiddle.net/0fp1qsw3/)
.sticky {
position: fixed;
z-index: 9999;
display: block;
background-color: #2069e8;
width: 100%;
padding: 10px;
margin-top: 15px;
padding-top:10px
}
.content{
padding-top: 50px;
}
<div class="sticky">
<div class="col-sm-2">
<h2 style="margin:0px; width:250px;"><span class="smallnav menustater" onclick="openNav()"><i class="fa fa-th-list"></i></span> MY WEB</h2>
</div>
</div>
<div class="content">
<img src="https://material.angular.io/assets/img/examples/shiba1.jpg"/>
</div>
I do not know how is that space coming. I do not want fixed footer but only want fixed navbar. My navbar is working fine but footer is having some white space below it.
body {
padding-top: 4.5rem;
min-height:100%;
}
.footer {
position: relative;
bottom: 0;
width: 100%;
/* Set the fixed height of the footer here */
left: 0;
height: 60px;
line-height: 60px; /* Vertically center the text there */
background-color: #000000;
}
This is the CSS for footer. I am using Bootstrap 4.
<body>
<div class="container-fluid">
<nav ..... #code for navbar
</nav>
<div class="row justify-content-center">
<div class="col-6">
<div class="card">
~~~~MY CONTENT~~~
</div>
</div>
</div>
<div class="row">
<footer class="footer">
<div class="container">
<span class="text-muted">Place sticky footer content here.</span>
</div>
</footer></div>
</div>
</div>
However, when I change the CSS to position:fixed. It works fine but I do not want that. Thank you in advance.
Your content element's height is not the screen's height. Therefore your footer will be like that, you can do it with JavaScript or just put content in your container.
I have a fairly complex layout that I am building, it relies on a is affected by height, and min-height's so the usual tricks to position the footer at the bottom aren't working.
Given my JSFiddle how can I position the footer at the bottom when the content is a lot or minimal?
Here is some of the css I am currently using:
body, html, #wrapper {
height: 100%;
min-height: 100%;
}
.header {
height: 30%;
background-color: aliceblue;
}
.main {
background-color: antiquewhite;
}
.main .content {
height: 2000px;
background-color: aquamarine;
padding-bottom:80px;
}
.footer {
position: absolute;
bottom: 0;
left: 0;
right: 0;
height: 80px;
background-color: beige;
}
If I understand your requirement correctly, you want the footer to sit at the bottom of the content box.
One solution is to make the content box position:relative and move the footer inside it, so that its position:absolute will bind it to the content box, and the bottom:0 will achieve the desired effect of having it sit against the bottom of said content box.
See http://jsfiddle.net/wn6uvske/5/.
HTML:
<div id="wrapper">
<div id="sidebar"></div>
<div id="body-content">
<div class="header">
<div class="navbar navbar-default" role="navigation">
<div class="container">
<ul class="nav navbar-nav navbar-right">
<li>Toggle Menu
</li>
</ul>
</div>
</div>
</div>
<div class="main">
<div class="content container">
<p>Content</p>
<div class="footer"> <!-- moved up into content container -->
<p>Footer</p>
</div>
</div>
</div>
</div>
</div>
(relevant) CSS:
.main .content {
height: 2000px;
background-color: aquamarine;
padding-bottom:80px;
position:relative;
}
.footer {
position: absolute;
bottom: 0;
left: 0;
right: 0;
height: 80px;
background-color: beige;
}
you can use the sticky footer trick. Wrap all of your content in a wrapper excluding the footer, set min-height:100% and margin: -(footer height) on said wrapper to keep it at the bottom:
FIDDLE
UPDATE
You can take the header section out and use CSS calc() to adjust the height:
NEW FIDDLE
Using Bootstrap for a responsively designed web-app, I am looking to replicate the typical mobile-app layout:
Fixed Navbar + Overflowing Body + Fixed Footer
Check out the Smartphone preview (right-side icon) of: http://www.bootply.com/124373
I have the following CSS, which is close, but the fixed footer cuts-off the body - instead of the body scrolling:
html {
position: relative;
min-height: 100%;
}
body {
/* Margin bottom by footer height */
margin-bottom: -60px;
}
#footer {
position: absolute;
bottom: 0;
width: 100%;
/* Set the fixed height of the footer here */
height: 60px;
background-color: #f5f5f5;
}
body > .container {
padding: 60px 15px 0;
}
.boxes {
margin-bottom: 22px;
}
.middle {
margin-top: 4%;
overflow: auto;
}
And here's the HTML:
<!-- Fixed navbar -->
<div class="navbar navbar-default navbar-fixed-top" role="navigation">
<div class="container">
<div class="navbar-header">
<a class="navbar-brand" href="#">Mobile App Format Replication</a>
</div>
</div>
</div>
<!-- Begin page content -->
<div class="container middle">
<div class="row boxes">
<div class="col-xs-6 col-md-6"><img src="http://placehold.it/125"></div>
<div class="col-xs-6 col-md-6"><img src="http://placehold.it/125"></div>
</div>
...
<div class="row boxes">
<div class="col-xs-6 col-md-6"><img src="http://placehold.it/125"></div>
<div class="col-xs-6 col-md-6"><img src="http://placehold.it/125"></div>
</div>
</div>
<!-- Fixed Footer -->
<div id="footer">
<div class="container">
<p class="text-muted">Fixed Footer Content</p>
</div>
</div>
What about using position: fixed on the footer element, and removing the negative margin on the body (instead, use 60px bottom padding instead):
#footer {
position: fixed;
bottom: 0;
width: 100%;
height: 60px;
background-color: #f5f5f5;
}
body > .container {
padding: 60px 15px;
}
See fork here: Bootply
If you are trying to replicate the mobile app layout, you should try Ratchet:
http://goratchet.com/
And here are some of the examples: http://goratchet.com/examples/
You can use "Tab bar" to have a fixed footer on there. Hope this helps
Just add .bar-nav~.content{padding-top: 44px;padding-bottom: 44px;} in your styles.
It's completely done!