-1
Warum das soziale Symbol nicht angezeigt nicht
body{
font-family:Montserrat;
}
.navbar, .dropdown-menu{
background:#44c763;
border:none;
border-radius:10px;
}
.nav>li>a, .dropdown-menu>li>a:focus, .dropdown-menu>li>a:hover, .dropdown-menu>li>a, .dropdown-menu>li{
border-bottom: 4px solid transparent;
}
.nav>li>a:focus, .nav>li>a:hover,.nav .open>a, .nav .open>a:focus, .nav .open>a:hover, .dropdown-menu>li>a:focus, .dropdown-menu>li>a:hover{
border-bottom: 3px solid transparent;
background: none;
}
.navbar a, .dropdown-menu>li>a, .dropdown-menu>li>a:focus, .dropdown-menu>li>a:hover, .navbar-toggle{
color: #fff;
}
.dropdown-menu{
-webkit-box-shadow: none;
box-shadow:none;
}
.nav li:hover:nth-child(8n+1), .nav li.active:nth-child(8n+1){
border-bottom: #4011E8 5px double;
}
.nav li:hover:nth-child(8n+2), .nav li.active:nth-child(8n+2){
border-bottom: #F3937D 5px double;
}
.nav li:hover:nth-child(8n+3), .nav li.active:nth-child(8n+3){
border-bottom: #FC3665 5px double;
}
.nav li:hover:nth-child(8n+4), .nav li.active:nth-child(8n+4){
border-bottom: #F9D86F 5px double;
}
.nav li:hover:nth-child(8n+5), .nav li.active:nth-child(8n+5){
border-bottom: #0FFA08 5px double;
}
.nav li:hover:nth-child(8n+6), .nav li.active:nth-child(8n+6){
border-bottom: #D1F9DF 5px double;
}
.nav li:hover:nth-child(8n+7), .nav li.active:nth-child(8n+7){
border-bottom: #FF748C 5px double;
}
.nav li:hover:nth-child(8n+8), .nav li.active:nth-child(8n+8){
border-bottom: #FFF078 5px double;
}
.navbar-toggle .icon-bar{
color: #fff;
background: #fff;
}
.social {
width: 90%;
float: left;
text-align: left;
}
ul.social-icons li {
display: inline-block;
}
ul.social-icons li a {
display: inline-block;
width: 50px;
height: 50px;
background: url("../images/img-sprite.png") no-repeat 0px 0px;
}
ul.social-icons li a.facebook {
background-position: 0px 0px;
}
ul.social-icons li a.facebook:hover {
background-position: 0px -50px;
}
ul.social-icons li a.instagram {
background-position: -150px 0px;
}
ul.social-icons li a.instagram:hover {
background-position: -150px -50px;
}<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.0/jquery.min.js"></script>
<script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>
<link href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet"/>
<div class="navbar-wrapper">
<div class="container-fluid">
<nav class="navbar navbar-fixed-top">
<div class="container">
<div class="navbar-header">
<button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#navbar"
aria-expanded="false" aria-controls="navbar">
<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="#">Company</a>
</div>
<div id="navbar" class="navbar-collapse collapse">
<ul class="nav navbar-nav">
<li class=" dropdown">
<a href="#" class="dropdown-toggle " data-toggle="dropdown" role="button" aria-haspopup="true"
aria-expanded="false">About us <span class="caret"></span></a>
<ul class="dropdown-menu">
<li class=" dropdown">
<a href="#" class="dropdown-toggle " data-toggle="dropdown" role="button" aria-haspopup="true"
aria-expanded="false">Residential</a>
</li>
<li><a href="#">Office</a></li>
<li><a href="#">Mixed Use</a></li>
</ul>
</li>
<li><a href="#" class="">Products</a></li>
<li><a href="#" class="">Gallery</a></li>
</li>
</ul>
<ul class="nav navbar-nav pull-right">
<li class=""><a href="#">[email protected]</a></li>
<li class=""><a href="#">984987454225</a></li>
<li class="connect-social">
<li><a href="https://www.facebook.com/deshaengineers" class="facebook" title="Go to Our Facebook Page"></a></li>
<li><a href="https://www.linkedin.com/company/desha-engineers-india-pvt-ltd" class="linkedin" title="Go to Our Linkedin Page"></a></li>
</li>
</li>
</ul>
</div>
</div>
</nav>
</div>
</div>Ich habe den Code hinzugefügt soziale Symbole in der Navigationsleiste zu zeigen, aber das Bild für die Symbole nicht angezeigt wird, wenn auf dem Gebiet schwebt es zeigt, dass es anklickbar ist, aber das Bild nicht lädt. Jede mögliche Hilfe würde
Es funktioniert jetzt, ich akzeptiere diese Antwort. Kannst du mir aber sagen, wie das Bild beim Schweben ist? –
Es tut mir leid, aber ich verstehe nicht ganz, wonach Sie fragen. – bonzo
Ich frage nach dem Hover-Effekt, ich möchte das Bild überrollen –