Robert
Reputation: 10390
How to make panel heading 'fixed' at the top in Bootstrap?
I want to have the panel heading 'fixed' at the top. I tried:
.panel-heading {
position: fixed;
width: 100%;
z-index: 99999;
top: 0;
}
It works perfectly for anything below 768px but for anything above it goes way out of range. Any ideas as to why this happens?
.glyphicon-user {
font-size: 25px;
color: #3399ff;
margin-left: 15px;
}
.panel-heading {
position: fixed;
width: 100%;
z-index: 99999;
top: 0;
}
.panel-heading h1 {
padding-bottom: 0.65em;
color: #3399ff;
font-weight: bold;
}
.panel-body {
padding: 0;
}
.col-xs-12 {
padding-left: 0;
padding-right: 0;
}
.chats {
list-style-type: none;
margin: 0;
padding: 0;
}
.chats li {
border-bottom: 2px solid #eee;
}
.chats a {
display: block;
color: #000;
text-decoration: none;
height: 85px;
padding: 15px 0;
}
.chats a:hover,
.chats a:hover .glyphicon-user,
.chats a:hover .text-muted {
background-color: #3399ff;
color: white;
}
.chats .sender {
margin-left: 10px;
}
.chats .timestamp {
margin-right: 15px;
}
.chats .chat-sample {
clear: right;
margin-left: 50px;
padding-top: 5px;
margin-right: 15px;
}
.chats li:last-child {
border-bottom: none;
}<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>
<div class='container'>
<div class='row'>
<div class='col-sm-6 col-xs-12 col-centered'>
<div class='panel panel-default'>
<div class='panel-heading'>
<div class='btn-group pull-left'>
<div class='dropdown'>
<button class='btn btn-default btn-xs dropdown-toggle' data-toggle='dropdown' type='button'>
<span class='glyphicon glyphicon-cog'</span>
</button>
<ul class='dropdown-menu'>
<li><a href='#'>Delete All Chats</a></li>
<li><a href='#'>Log Out</a></li>
</ul>
</div>
</div>
<div class='btn-group pull-right'>
<div class='dropdown'>
<button class='btn btn-default btn-xs dropdown-toggle' data-toggle='dropdown' type='button'>
<span class='glyphicon glyphicon-plus'></span>
</button>
<ul class='dropdown-menu dropdown-menu-right'>
<li><a href='#'>New Chat</a></li>
</ul>
</div>
</div>
<h1 class='panel-title text-center'>FunChat</h1>
</div>
<div class='panel-body'>
<ul class='chats'>
<li>
<a href=''>
<div class='chat-img pull-left'><span class='glyphicon glyphicon-user'></span></div>
<div class='sender pull-left'><strong>John Appleseed</strong></div>
<div class='timestamp text-muted pull-right'><small><span class='glyphicon glyphicon-time'></span> Thursday</small></div>
<p class='chat-sample text-muted'>What time is it?</p>
</a>
</li>
<li>
<a href=''>
<div class='chat-img pull-left'><span class='glyphicon glyphicon-user'></span></div>
<div class='sender pull-left'><strong>Verizon Wireless</strong></div>
<div class='timestamp text-muted pull-right'><small><span class='glyphicon glyphicon-time'></span> Thursday</small></div>
<p class='chat-sample text-muted'>Your bill is due on 12/12/2012. Please pay before the due date to avoid service interuption. ...</p>
</a>
</li>
<li>
<a href=''>
<div class='chat-img pull-left'><span class='glyphicon glyphicon-user'></span></div>
<div class='sender pull-left'><strong>Sergey Brin</strong></div>
<div class='timestamp text-muted pull-right'><small><span class='glyphicon glyphicon-time'></span> Thursday</small></div>
<p class='chat-sample text-muted'>Come down to the Googleplex for an interview. We would like to talk to you about some exciti...</p>
</a>
</li>
<li>
<a href=''>
<div class='chat-img pull-left'><span class='glyphicon glyphicon-user'></span></div>
<div class='sender pull-left'><strong>John Appleseed</strong></div>
<div class='timestamp text-muted pull-right'><small><span class='glyphicon glyphicon-time'></span> Thursday</small></div>
<p class='chat-sample text-muted'>What time is it?</p>
</a>
</li>
<li>
<a href=''>
<div class='chat-img pull-left'><span class='glyphicon glyphicon-user'></span></div>
<div class='sender pull-left'><strong>Verizon Wireless</strong></div>
<div class='timestamp text-muted pull-right'><small><span class='glyphicon glyphicon-time'></span> Thursday</small></div>
<p class='chat-sample text-muted'>Your bill is due on 12/12/2012. Please pay before the due date to avoid service interuption. ...</p>
</a>
</li>
<li>
<a href=''>
<div class='chat-img pull-left'><span class='glyphicon glyphicon-user'></span></div>
<div class='sender pull-left'><strong>Sergey Brin</strong></div>
<div class='timestamp text-muted pull-right'><small><span class='glyphicon glyphicon-time'></span> Thursday</small></div>
<p class='chat-sample text-muted'>Come down to the Googleplex for an interview. We would like to talk to you about some exciti...</p>
</a>
</li>
<li>
<a href=''>
<div class='chat-img pull-left'><span class='glyphicon glyphicon-user'></span></div>
<div class='sender pull-left'><strong>John Appleseed</strong></div>
<div class='timestamp text-muted pull-right'><small><span class='glyphicon glyphicon-time'></span> Thursday</small></div>
<p class='chat-sample text-muted'>What time is it?</p>
</a>
</li>
<li>
<a href=''>
<div class='chat-img pull-left'><span class='glyphicon glyphicon-user'></span></div>
<div class='sender pull-left'><strong>Verizon Wireless</strong></div>
<div class='timestamp text-muted pull-right'><small><span class='glyphicon glyphicon-time'></span> Thursday</small></div>
<p class='chat-sample text-muted'>Your bill is due on 12/12/2012. Please pay before the due date to avoid service interuption. ...</p>
</a>
</li>
<li>
<a href=''>
<div class='chat-img pull-left'><span class='glyphicon glyphicon-user'></span></div>
<div class='sender pull-left'><strong>Sergey Brin</strong></div>
<div class='timestamp text-muted pull-right'><small><span class='glyphicon glyphicon-time'></span> Thursday</small></div>
<p class='chat-sample text-muted'>Come down to the Googleplex for an interview. We would like to talk to you about some exciti...</p>
</a>
</li>
<li>
<a href=''>
<div class='chat-img pull-left'><span class='glyphicon glyphicon-user'></span></div>
<div class='sender pull-left'><strong>John Appleseed</strong></div>
<div class='timestamp text-muted pull-right'><small><span class='glyphicon glyphicon-time'></span> Thursday</small></div>
<p class='chat-sample text-muted'>What time is it?</p>
</a>
</li>
<li>
<a href=''>
<div class='chat-img pull-left'><span class='glyphicon glyphicon-user'></span></div>
<div class='sender pull-left'><strong>Verizon Wireless</strong></div>
<div class='timestamp text-muted pull-right'><small><span class='glyphicon glyphicon-time'></span> Thursday</small></div>
<p class='chat-sample text-muted'>Your bill is due on 12/12/2012. Please pay before the due date to avoid service interuption. ...</p>
</a>
</li>
<li>
<a href=''>
<div class='chat-img pull-left'><span class='glyphicon glyphicon-user'></span></div>
<div class='sender pull-left'><strong>Sergey Brin</strong></div>
<div class='timestamp text-muted pull-right'><small><span class='glyphicon glyphicon-time'></span> Thursday</small></div>
<p class='chat-sample text-muted'>Come down to the Googleplex for an interview. We would like to talk to you about some exciti...</p>
</a>
</li>
</ul>
</div>
</div>
</div><!--end column-->
</div><!--end row 1-->
</div><!--end container-->Upvotes: 1
Views: 3323
Answers (1)
Muhammad Russell
Reputation: 393
Change The CSS for .panel-heading from:
.panel-heading {
position: fixed;
width: 100%;
z-index: 99999;
top: 0;
}
to this:
.panel-heading {
position: sticky;
width: 100%;
z-index: 99999;
top: 0;
}
Upvotes: 4
Related Questions
- Bootstrap 3 / CSS: How to properly vertically align in panel heading
- Vertical Bootstrap Panel Heading
- Vertical bootstrap panel header
- Position components inside a bootstrap panel-heading
- How to make panel-heading fixed with Bootstrap?
- bootstrap panel-header change height
- Bootstrap - Align Content in Panel Header
- Panel heading is not full
- Bootstrap Panel Headings
- Twitter Bootstrap: Fixed top header and sidebar