如何使SB管理员置顶并修复菜单
[英]How make Menu top and fixed for SB Admin
问题描述
I would like to make menu top and fixed for SB Admin, 
我想将菜单设置为顶部并针对SB Admin进行修复，
The template here. 这里的模板。 http://ironsummitmedia.github.io/startbootstrap-sb-admin-2/pages/index.html 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 个解决方案
解决方案1
2 2015-12-31 08:11:56
Take out the inline navbar-fixed-top . 取出内联navbar-fixed-top 。 Reference .navbar in your custom style sheet and give it the position of fixed. 在自定义样式表中引用.navbar并为其指定固定位置。
.navbar {
position: fixed;
}
解决方案2
0 2015-12-31 08:05:22
只需使用HTML的position属性。
<nav class="navbar navbar-default navbar-fixed-top" style="position:fixed">
解决方案3
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! 在SB Admin中，您具有navbar-static-top类，更改为navbar-fixed-top并解决您的问题！ but than you have to add padding-top to <body> , because <navbar> has it's own height: 但是您不必将padding-top添加到<body> ，因为<navbar>具有它自己的高度：
HTML 的HTML
<nav class="navbar navbar-default navbar-fixed-top">
...
</nav>
CSS 的CSS
body {
padding-top: 50px; // height of navbar
}
解决方案4
0 2015-12-31 09:07:11
Your class navbar-fixed-top will work only if you have included required bootstrap css for this. 仅当您包括为此所需的引导CSS时，您的navbar-fixed-top类才能工作。 Better use CDN from official bootstrap site. 最好从官方引导站点使用CDN。 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;
}
解决方案5
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 还有一个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>
声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.