2017-09-20 55 views
-1

你好在我的项目中我有一个导航栏导航栏默认类,这个菜单重叠白衣我的内容,当我想滚动我的网站。navbar默认与内容重叠

这是我screenshot

我发现了一个脚本,固定该菜单顶部,但与我的内容仍然重叠,这是脚本

window.onscroll = changePos; 

    function changePos() { 
     var header = document.getElementById("uno"); 
     if (window.pageYOffset > 70) { 
      header.style.position = "fixed"; 
      header.style.top = "0"; 
     } else { 
      header.style.position = ""; 
      header.style.top = ""; 
     } 
    } 

我也有我的CSS代码和HTML代码导航栏菜单的,这其中的代码

.nav.navbar-nav li a{ 
    color:black; 
} 

.navbar-default{ 
    margin: auto; 
    background: rgb(178,205,73); 
    } 


.nav.navbar-nav { 
    display: inline-block; 
    left: 0; 
    right: 0; 
    text-align:center; 
    width:100%; 

} 

.nav.navbar-nav li,.nav.navbar-nav li a 
{ 
    display:inline; 
    float:none; 
    line-height:40px; 
} 

.right.carousel-control, .left.carousel-control{ 

background:linear-gradient(rgba(146,211,236,1.00) 15%, rgb(0,171,235) 150% ); 

} 


.item.active ,.carousel-inner{ 
    background-color: rgba(146,211,236,1.00) ; 
} 

这是我的菜单

<div class="row"> 
        <div class="col-md-12" id="uno"> 
        <nav class="navbar navbar-default"> 
           <div class="navbar-header"> 
              <button type="button" 
               class="navbar-toggle collapsed" 
               data-toggle="collapse" data- 
             target="#navbar" aria-expanded="false" 
              aria-controls="navbar"> 
               <span class="sr-only">Toggle 
               navigation</span> 
               <span class="icon-bar"></span> 
               <span class="icon-bar"></span> 
                <span class="icon-bar"></span> 
               </button> 
              </div> 
              <div id="navbar" class="navbar- 
               collapse collapse"> 
               <ul class="nav navbar-nav"> 
               <li><a href="#">Conozcanos</a> 
               </li> 
               <li><a href="#">Derechos y 
                Deberes Del Usuario</a> 
               </li> 
                <li><a 
                href="#">Responsabilidad 
                Social</a> 
                </li> 
                <li><a href="#">Correo 
                Corporativo</a> 
                </li> 
                </ul> 
               </div> 
              </nav> 
             </div> 
            </div> 
+0

导航栏似乎在容器后面重叠。我不明白.. –

回答

0

为了让您的菜单位于顶部,我建议您使用stickyjs。这应该可以消除你有任何其他问题。屏幕截图也将有助于了解你发出什么是

0

尝试下面的代码添加到您的CSS文件:

.navbar{ 
    z-index: 9999; /* You can add any positive number here */ 
} 

的z-index属性将让你的元素留在其他元素之上。

+0

它不起作用,我试过所有的东西 –

+0

我使用了类navbar-fixed-top,但我想要在同一个地方的导航栏。 –