Question

有没有办法让导航栏最重要？我也在修补main.css Code Igniter但没有结果。我不知道它为什么使用标题，但页面中有一个我正在使用。这是一张显示我问题的图片：

Like this

部分代码;

<div id="navbar">
    <nav class="navbar navbar-default navbar-static-top" role="navigation">
        <div class="navbar-header">
            <button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#navbar-collapse-1">
                <span class="sr-only">Toggle navigation</span>
                <span class="icon-bar"></span>
                <span class="icon-bar"></span>
                <span class="icon-bar"></span>
            </button>
            <a class="navbar-brand" href="#">Brand</a>
        </div>
        <div class="collapse navbar-collapse" id="navbar-collapse-1">
            <ul class="nav navbar-nav">
                <li class="active">
                    <a href="#">Active Link</a>
                </li>
                <li>
                    <a href="#">Link</a>
                </li>
                <li class="dropdown">
                    <a href="#" class="dropdown-toggle" data-toggle="dropdown">
                        Dropdown 
                        <b class="caret"></b>
                    </a> 
                    <ul class="dropdown-menu" data-no-collapse="true">
                        <li class="kopie">
                            <a href="#">Dropdown</a>
                        </li>
                        <li>
                            <a href="#">Dropdown Link 1</a>
                        </li>
                        <li class="active">
                            <a href="#">Dropdown Link 2</a>
                        </li>
                        <li>
                            <a href="#">Dropdown Link 3</a>
                        </li>
                    </ul>
                </li>
            </ul>
        </div>
    </nav>
</div>

Answer 1

我无法看到您当前的CSS是什么，以及下面div或部分的代码是什么......但是您应该将它添加到您的CSS中。并尝试将z-index保持在100以下。

#navbar {position:relative; z-index:50;}          /* Navbar is on top */
#idOfContentHere {position: relative; z-index:0}  /* Your content is not on top */

Answer 2

很抱歉这个烂摊子，我在stackoverflow中有点新帖。这是main.css的一部分，引用了navbar：

.navbar-default {
background-color: #fff;
background-color: rgba(255, 255, 255, 0.85);
background: -webkit-linear-gradient(#FFF, rgba(255, 255, 255, 0.8)); /* For Safari 5.1 to 6.0 */
background: -o-linear-gradient(#FFF, rgba(255, 255, 255, 0.8)); /* For Opera 11.1 to 12.0 */
background: -moz-linear-gradient(#FFF, rgba(255, 255, 255, 0.8)); /* For Firefox 3.6 to 15 */
background: linear-gradient(#FFF, rgba(255, 255, 255, 0.8)); /* Standard syntax */
border-radius: 0 0 5px 5px;
border: 0;
margin: 0;
padding: 0;
-webkit-box-shadow: 0 1px 3px 0 rgba(0,0,0,.2);
-moz-box-shadow: 0 1px 3px 0 rgba(0,0,0,.2);
box-shadow: 0 1px 3px 0 rgba(0,0,0,.2);
overflow: hidden;
}
.navbar-default .first a {
  border-radius: 0 0 0 5px;
}
.navbar-default .navbar-brand {
  margin-right: 50px;
  margin-left: 20px;
  width: 200px;
  height: 78px;
  background-image: url("img/logo-uanl.png");
  background-repeat: no-repeat; 
  background-position: 0 50%;
}
.navbar-default .navbar-nav > li {
  margin-left: 1px;
}
.navbar-default .navbar-nav > li > a {
  padding: 20px 25px;
  font-size: 16px;
  line-height: 18px;
  color: #666;
}
.navbar-default .navbar-nav > li > a > i {
  display: inline-block;
}
.navbar-default .navbar-nav > li.active > a,
.navbar-default .navbar-nav > li.active:focus > a,
.navbar-default .navbar-nav > li.active:hover > a,
.navbar-default .navbar-nav > li:hover > a,
.navbar-default .navbar-nav > li:focus > a,
.navbar-default .navbar-nav > li.active > a:focus,
.navbar-default .navbar-nav > li.active:focus > a:focus,
.navbar-default .navbar-nav > li.active:hover > a:focus,
.navbar-default .navbar-nav > li:hover > a:focus,
.navbar-default .navbar-nav > li:focus > a:focus {
background-color: #73AF01;
color: #fff;
}

标题看起来像这样：

#header
{
position: fixed;
top: 0;
left: 0;
width: 120%;
z-index: 100000;
}

Answer 3

解决了......问题是“隐藏”属性：溢出。对于像这样的未来事件，我建议使用“可见”属性或者不要使用“溢出”。

使导航栏始终可见（首先）

3 个答案: