Adminlte: Fixed content header and fixed footer

Created on 20 Aug 2015 · 4Comments · Source: ColorlibHQ/AdminLTE

Hi,

first want to tell you I like your dashboard a lot. Thanks for the great work.

I have just two questions:

How can I set the content header fixed?
How can I set the footer fixed at the bottom no matter what how long the content is?

Thanks in advance and best regards,
Fabian

Source

fromberg100

Most helpful comment

Hello Fromberg

I have the same problem..
I was able to fix the footer by using this style:
.main-footer {
background: #fff;
padding: 5px;
color: #444;
border-top: 1px solid #d2d6de;
bottom: 0;
left: 0;
position: fixed;
right: 0;
z-index: 999;
}
But I was no success to fix the content header.
Have You solved?

ymycorp on 26 Aug 2015

👍3

All 4 comments

Hello,

Currently those options are not available. You can set the .main-header and the .main-sidebar fixed by adding the class fixed to the <body> tag.

Thanks!

almasaeed2010 on 24 Aug 2015

Hello Fromberg

ymycorp on 26 Aug 2015

👍3

Hi,

thanks for your replies and help.

Regarding fixed content header, this is how I fixed it, surely it is not the best way to do it but I managed it somehow:

<div class="content-wrapper">
<section class="content-headerFixed">
<h1>
Dashboard
<small>Version 2.0</small>
</h1>
<ol class="breadcrumb">
<li><a href="#"><i class="fa fa-dashboard"></i> Home</a></li>
<li class="active">Dashboard</li>
</ol>
</section>
<section class="content" id="contentSection" style="margin-top:35px;">
</section>
</div>

Style:
.content-headerFixed
{
position:fixed;
background-color: #ecf0f5;
margin-left:230px;
left:0;
right:0;
padding: 15px 15px 0 15px;
}

.content-headerFixed > h1
{
margin: 0;
font-size: 24px;
}

@media (max-width: 767px)
{
.content-headerFixed
{
margin-left: 0;
}
}

.content-headerFixed > .breadcrumb
{
float: right;
background: transparent;
margin-top: 0;
margin-bottom: 0;
font-size: 12px;
padding: 7px 5px;
position: absolute;
top: 15px;
right: 10px;
border-radius: 2px;
}

Hope it helps!

Regards,
Fabian

fromberg100 on 26 Aug 2015

hi every one

i was have the same

but i just edit your css by adding z-index: 1000; to be like that

.content-headerFixed {
position: fixed;
background-color: #ecf0f5;
margin-left: 230px;
left: 0;
right: 0;
padding: 15px 15px 0 15px;
z-index: 1000;
}

its give me fixed heaer