Nie mogę klikać w przyciski na navbarze gdy na stronie próbuję użyć bootstrapowej klasy col-lg-xx.

0

Hej,

chciałem sobie zrobić chowające się logo, przy przesuwaniu strony w dół, jednocześnie z przyklejającym się navbarem, wszystko super śmiga, dopóki nie próbuję robić strony responsywnej korzystając z bootstrapa i klasy "col-lg-xx". W kodzie użyłem diva z klasą row, w którym zagnieździłem dwa kolejne divy, jeden z klasą "col-lg-8" a drugi z klasą "col-lg-4", te dwie klasy sprawiają, że przyciski w moim navbarze są przeźroczyste, przez co nie mogę w nie klikać. Czy ktoś wie, jak sprawić, żeby moje przyciski nie prześwitywały i żeby można było w nie klikać?

tutaj jest kod html:

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <title>page title</title>

    <link href="css/styles.css" type="text/css" rel="stylesheet">
      
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
    
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
      
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap-theme.min.css" integrity="sha384-rHyoN1iRsVXV4nD0JutlnGaslCJuC7uwjduW9SVrLvRYooPp2bWYgmgJQIXwl/Sp" crossorigin="anonymous">

    <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js" integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa" crossorigin="anonymous"></script>
  </head>
  <body>
    <div class="container-fluid logo">
      <h1>Here will be some awesome logo</h1>
    </div>
      
    <nav class="navbar navbar-inverse" data-spy="affix" data-offset-top="197" style="border-radius: 0px;">
      <div class="container-fluid">
        <div class="navbar-header">
          <a class="navbar-brand" href="#">HOME</a>  
        </div>
        <div class="container-fluid">
          <div class="nav navbar-nav navbar-right">
            <ul class="nav navbar-nav">
              <li><a href="#"><strong>Przycisk1</strong></a></li>
              <li><a href="#"><strong>Przycisk2</strong></a></li>
              <li><a href="#"><strong>Przycisk3</strong></a></li>
              <li><a href="#"><strong>Przycisk4</strong></a></li>
            </ul>  
          </div>
        </div>
      </div>
    </nav>
      
    <div class="container" style="height:1000px">
      <div class="row">
        <div class="col-lg-8" style="word-wrap: break-word;">
          <h1>Some text to enable scrolling long verse Some text to enable scrolling long verse Some text to enable scrolling long verse</h1>
          <h1>Some text to enable scrolling long verse Some text to enable scrolling long verse Some text to enable scrolling long verse</h1>
          <h1>Some text to enable scrolling long verse Some text to enable scrolling long verse Some text to enable scrolling long verse</h1>
          <h1>Some text to enable scrolling long verse Some text to enable scrolling long verse Some text to enable scrolling long verse</h1>
          <h1>Some text to enable scrolling long verse Some text to enable scrolling long verse Some text to enable scrolling long verse</h1>
          <h1>Some text to enable scrolling long verse Some text to enable scrolling long verse Some text to enable scrolling long verse</h1>
          <h1>Some text to enable scrolling long verse Some text to enable scrolling long verse Some text to enable scrolling long verse</h1>
          <h1>Some text to enable scrolling long verse Some text to enable scrolling long verse Some text to enable scrolling long verse</h1>
          <h1>Some text to enable scrolling long verse Some text to enable scrolling long verse Some text to enable scrolling long verse</h1>
          <h1>Some text to enable scrolling long verse Some text to enable scrolling long verse Some text to enable scrolling long verse</h1>
          <h1>Some text to enable scrolling long verse Some text to enable scrolling long verse Some text to enable scrolling long verse</h1>
          <h1>Some text to enable scrolling long verse Some text to enable scrolling long verse Some text to enable scrolling long verse</h1>
          <h1>Some text to enable scrolling long verse Some text to enable scrolling long verse Some text to enable scrolling long verse</h1>
          <h1>Some text to enable scrolling long verse Some text to enable scrolling long verse Some text to enable scrolling long verse</h1>
          <h1>Some text to enable scrolling long verse Some text to enable scrolling long verse Some text to enable scrolling long verse</h1>
        </div>
        <div class="col-lg-4" style="word-wrap: break-word;" style="">
          <h1>Some text to enable scrolling long verse Some text to enable scrolling long verse Some text to enable scrolling long verse</h1>
          <h1>Some text to enable scrolling long verse Some text to enable scrolling long verse Some text to enable scrolling long verse</h1>
          <h1>Some text to enable scrolling long verse Some text to enable scrolling long verse Some text to enable scrolling long verse</h1>
          <h1>Some text to enable scrolling long verse Some text to enable scrolling long verse Some text to enable scrolling long verse</h1>
          <h1>Some text to enable scrolling long verse Some text to enable scrolling long verse Some text to enable scrolling long verse</h1>
          <h1>Some text to enable scrolling long verse Some text to enable scrolling long verse Some text to enable scrolling long verse</h1>
          <h1>Some text to enable scrolling long verse Some text to enable scrolling long verse Some text to enable scrolling long verse</h1>
          <h1>Some text to enable scrolling long verse Some text to enable scrolling long verse Some text to enable scrolling long verse</h1>
          <h1>Some text to enable scrolling long verse Some text to enable scrolling long verse Some text to enable scrolling long verse</h1>
          <h1>Some text to enable scrolling long verse Some text to enable scrolling long verse Some text to enable scrolling long verse</h1>
          <h1>Some text to enable scrolling long verse Some text to enable scrolling long verse Some text to enable scrolling long verse</h1>
          <h1>Some text to enable scrolling long verse Some text to enable scrolling long verse Some text to enable scrolling long verse</h1>
          <h1>Some text to enable scrolling long verse Some text to enable scrolling long verse Some text to enable scrolling long verse</h1>
          <h1>Some text to enable scrolling long verse Some text to enable scrolling long verse Some text to enable scrolling long verse</h1>
          <h1>Some text to enable scrolling long verse Some text to enable scrolling long verse Some text to enable scrolling long verse</h1>
        </div>
      </div>
    </div>
  </body>
</html>

a tu CSS:

.logo {
    background-color:#000000;
    color:#fff;
    height:200px;
}

.inline-block {
    display: inline-block;
}

.breadcrumb > li + li:before {
    color: #ccc;
    content: "/ ";
    padding: 0 5px;
}

.affix {
      top: 0;
      width: 100%;
  }

.affix + .container-fluid {
  padding-top: 70px;
}

Oczywiście przyciski, które są wyświetlone za obszarem moich dwóch kolumn, bez problemu można kliknąć.

0

Rozwiązałem swój problem, wystarczyło użyć tylko z-index, ja to zrobiłem dodając następująca klasę do swojego pliku css:

.nav {
  z-index:9999;
}

1 użytkowników online, w tym zalogowanych: 0, gości: 1