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ąć.