How make Menu top and fixed for SB Admin
Question
I would like to make menu top and fixed for SB Admin,
The template here. http://ironsummitmedia.github.io/startbootstrap-sb-admin-2/pages/index.html
I tried with following navbar,
<nav class="navbar navbar-default navbar-fixed-top">
When am using this, there one scroll bar adding in the bottom of page.
I am a developer but not designer and is there any best method for that?
5 answers
solution1
2 2015-12-31 08:11:56
Take out the inline navbar-fixed-top . Reference .navbar in your custom style sheet and give it the position of fixed.
.navbar {
position: fixed;
}
solution2
0 2015-12-31 08:05:22
只需使用HTML的position属性。
<nav class="navbar navbar-default navbar-fixed-top" style="position:fixed">
solution3
0 2015-12-31 08:30:07
in SB Admin you have navbar-static-top class, change to navbar-fixed-top and resolve your issue! but than you have to add padding-top to <body> , because <navbar> has it's own height:
HTML
<nav class="navbar navbar-default navbar-fixed-top">
...
</nav>
CSS
body {
padding-top: 50px; // height of navbar
}
solution4
0 2015-12-31 09:07:11
Your class navbar-fixed-top will work only if you have included required bootstrap css for this. Better use CDN from official bootstrap site. Please ensure this first.
In case you are not using bootstrap you can simply set these rules.
.navbar{
min-height: 50px;
margin-bottom: 20px;
}
.navbar-fixed-top {
position: fixed;
top:0;
right: 0;
left: 0;
z-index: 1030;
}
body {
padding-top: 70px;
}
solution5
0 2016-11-28 17:26:41
.navbar-default{
position: fixed;
width: 100%;
margin: 0 0 405px 0;
}
@media (min-width: 768px) {
#page-wrapper {
position: inherit;
margin: 0 0 0 250px;
padding: 70px 30px 30px 30px;
border-left: 1px solid darken(@gray-lightest, 6.5%);
}
.ocular-en-ipad-o-superior {
display: none;
}
}
and one more html
<metis-menu></metis-menu>
<div class="container-fluid" id="page-wrapper">
<div class="ocular-en-ipad-o-superior" style="margin-bottom: 115px;"></div>
<div ui-view=""></div>
</div>
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.