滑块上方的导航栏

时间：2017-08-04 18:26:48

标签： html css navbar bootstrap-4

我目前正在建立一个网站，并且导航栏出现问题。 我有一个滑块，我希望导航栏位于滑块上方。但是，我的导航正在按下滑块。导航栏应位于滑块图像上方，具有透明度，因此我可以看到导航栏及其背后的图像。

我使用bootstrap并更改了一些样式，使元素看起来像我希望它们看起来一样。

这是HTML和CSS，我应该更改或添加什么？

＆＃13;
＆＃13; 
$(document).ready(function() {
  $('.intro-slider').slick {
    dots: false,
    arrows: false,
    autoplay: true,
    autoplaySpeed: 2000,
    infinite: true,
    slidesToShow: 1,
    adaptiveHeight: false
  });
});
＆＃13; 
.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;
}
＆＃13; 
<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> orestes@mintech.do</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>
＆＃13;
＆＃13;
＆＃13;

1 个答案:

答案 0 :(得分：0)

您可以将导航栏放在滑块上方。我不得不使用相对定位来将滑块向上推一点。我的所有代码都经过评论，以帮助您关注。最后，我使导航栏变得透明。

＆＃13;
＆＃13; 
$(document).ready(function() {
  $('.intro-slider').slick {
    dots: false,
    arrows: false,
    autoplay: true,
    autoplaySpeed: 2000,
    infinite: true,
    slidesToShow: 1,
    adaptiveHeight: false
  });
});
＆＃13; 
.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;
}


/* \\\\\\\\\\\\\\\\\\\\\\\\ new styles below ///////////////////////////// */
hr {
  display: none; /* margins on hr were pushing gallery down */
}
body .navbar { /* place navbar atop slider */
  width: 100%;
  opacity: 0.75;
  position: absolute;
  top: 0;
  left: 0;
  z-index: 5;
}
.intro-slider { /* move slider up */
  position: relative;
  top: -3rem;
}
＆＃13; 
<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> orestes@mintech.do</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>
＆＃13;
＆＃13;
＆＃13;

相关问题
最新问题