Navbar über einem Schieberegler

Ich baue gerade eine Website und habe ein Problem mit der Navigationsleiste. Ich habe einen Schieberegler, und ich möchte die Navigationsleiste über einem Schieberegler sein. Mein Navigationsgerät drückt jedoch den Schieberegler nach unten. Die Navbar sollte oberhalb der Schieberegler Bilder mit Transparenz sein, so dass ich die Navbar und das Bild dahinter sehen kann.Navbar über einem Schieberegler

Ich benutze Bootstrap und einige Stile ändern, um die Elemente so aussehen zu lassen, wie ich sie aussehen soll.

Hier ist das HTML und CSS, was soll ich ändern oder hinzufügen?

$(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>

Quelle

2017-08-04 arolleunam

Was meinen Sie die navbar den Slider nach unten gedrückt wird? Soll der Slider höher sein? Können Sie genauer beschreiben, was Sie erreichen möchten? – basement

Ich möchte die Navbar über den Schieberegler Bildern mit Transparenz, so dass ich die Navbar und das Bild dahinter sehen kann. – arolleunam

Bitte ändern Sie dies [Fiddle] (https://jsfiddle.net/wne5qq5q/1/) und replizieren Sie Ihr Problem, ich kann den Fehler nicht verstehen. –

Sie können absolut Ihr navbar über dem Schieberegler positionieren. Ich musste die relative Positionierung auch verwenden, um den Schieber etwas nach oben zu schieben. All mein Code ist kommentiert, um Ihnen zu helfen, zu folgen. Zuletzt habe ich die Navbar transparent gemacht.

$(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; 
 
} 
 

 

 
/* \\\\\\\\\\\\\\\\\\\\\\\\ 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; 
 
}

<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>

Quelle

2017-08-04 20:08:49 basement

Navbar über einem Schieberegler

Antwort

Verwandte Themen