-1

hello in my project i have a navbar navbar-default class, this menu is overlapping whit my content when i want to scroll my website.

this is my screenshot

i found a script that fixed this menu to the top but still overlapping with my content, this is the script

 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 = "";
        }
    }

also i have my css code and html code of the navbar menu, this it the code

.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) ;
}

this is my menu

 <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>
1
  • the navbar appears to overlap behind the container. i don't understand how.. Commented Sep 20, 2017 at 17:06

2 Answers 2

1

Try to add below code to your CSS file:

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

z-index property will make your element stay on top of other elements.

1
  • i used the class navbar-fixed-top, but i want the navbar in the same place. Commented Sep 20, 2017 at 19:31
0

To keep your menu at the top, I suggest you use stickyjs. That should probably eliminate any other problem you have. A screenshot would also help to know what exactly you issue is

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.