0
現在、ウェブサイトを構築していて、ナビゲーションバーに問題があります。 私はスライダを持っており、スライダの上にナビバーを配置したい。しかし、私のnavはスライダーを押し下げています。 navbarはスライダー画像の上に透明でなければならないので、navbarとその背後の画像を見ることができます。スライダーの上にあるナビゲーションバー
私は、ブートストラップを使用して、いくつかのスタイルを変更して、それらを見たいように見せるようにしています。
ここにHTMLとCSSがありますが、変更する必要はありますか？
$(document).ready(function() {
$('.intro-slider').slick {
dots: false,
arrows: false,
autoplay: true,
autoplaySpeed: 2000,
infinite: true,
slidesToShow: 1,
adaptiveHeight: false
});
});.intro-slider {
width: 100%;
height: 1080px;
overflow: hidden;
padding: 0;
}
.navbar-default,
.container-fluid,
.navbar-default .navbar-collapse,
.navbar-default .navbar-form,
.navbar-collapse.collapse,
.navbar navbar-default {
background-color: #000;
}
.navbar {
position: relative;
min-height: 50px;
margin-bottom: 0px;
border: 0px;
}
hr {
margin-top: 0px;
margin-bottom: 0px;
border: 0;
border-top: 1px solid #2f2f2f;
}
img {
max-width: 600px;
height: auto;
}<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link href="https://fonts.googleapis.com/css?family=Montserrat:100,100i,200,200i,300,300i,400,400i,500,500i,600,600i,700,700i,800,800i,900,900i" rel="stylesheet">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet"/>
<script src="https://cdn.jsdelivr.net/jquery.slick/1.6.0/slick.min.js"></script>
<link href="http://kenwheeler.github.io/slick/slick/slick.css" rel="stylesheet"/>
<link href="//netdna.bootstrapcdn.com/font-awesome/4.0.3/css/font-awesome.min.css" rel="stylesheet"/>
<link rel="stylesheet" type="text/css" href="css/stylesheet.css">
<body>
<div style="" class="collapse navbar-collapse">
<ul class="nav navbar-nav navbar-right">
<li class="navfont2">
<p><i class="fa fa-phone-square" aria-hidden="true"></i> +1 809 974 7826</p>
</li>
<li class="navfont2">
<p><i class="fa fa-envelope" aria-hidden="true"></i> [email protected]</p>
</li>
</ul>
</div>
<hr>
<!-- navbar start -->
<nav class="navbar navbar-default">
<div style="" class="container-fluid">
<!-- Brand and toggle get grouped for better mobile display -->
<div style="" class="navbar-header">
<button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1" aria-expanded="false">
<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="#"><img style="width: 175px;" src="images/mintech.png"></a>
</div>
<!-- Collect the nav links, forms, and other content for toggling -->
<div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
<ul class="nav navbar-nav navbar-right">
<li class="navfont"><a href="#">Inicio</a></li>
<li class="navfont"><a href="#">Nosotros</a></li>
<li class="navfont"><a href="#">Servicios</a></li>
<li class="navfont"><a href="#">Proyectos</a></li>
<li class="navfont"><a href="#">Equipo</a></li>
<li class="navfont"><a href="#">Contacto</a></li>
</ul>
</div>
<!-- /.navbar-collapse -->
</div>
<!-- /.container-fluid -->
</nav>
<!-- navbar end -->
<div class="intro-slider col-xs-12">
<div><img src="https://www.almanac.com/sites/default/files/birth_month_flowers-primary-1920x1280px_pixabay.jpg"></div>
<div><img src="http://balconygardenweb.com/wp-content/uploads/2015/08/most-poisonous-flowers-3_mini.jpg"></div>
<div><img src="http://data.whicdn.com/images/57613434/large.jpg"></div>
</div>
あなたはナビゲーションバーのスライダーを押し下げているとはどういう意味ですか？スライダを高くしますか？あなたは達成しようとしていることをより具体的にすることができますか？ – basement
私は、スライダーの画像の上に、透明で、navbarを望むので、navbarとその背後にある画像を見ることができます。 – arolleunam
この[Fiddle]（https://jsfiddle.net/wne5qq5q/1/）を変更して問題を再現してください。エラーを理解できません。 –