tag header
Boa tarde galera ,
Estou com um problema estou criando um layout de um site em html, css e bootstrap o problema está no topo quero que logo fique em cima do navbar mas não estou conseguindo ele ele some estou mundando a cor do navbar-default vejam o:
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
<title>AudioplanSP</title>
<link href="Content/bootstrap.css" rel="stylesheet" />
<style>
#comments header {
width: 100%;
padding: 0;
}
#header {
background: #ecf0f1;
}
#header span.nome-site {
height: 0;
margin: 0;
padding: 0;
visibility: hidden;
}
#header .navbar {
border: 0;
border-radius: 0;
margin-bottom: 0;
}
.logo{
float:left;
display:block;
background-color:#FFF;
position:relative
}
/* navbar */
.navbar-default {
background-color: #139D26;
border-color: #E7E7E7;
}
.navbar-default .navbar-brand:hover,
.navbar-default .navbar-brand:focus {
color: #139D26;
}
/* link */
.navbar-default .navbar-nav > li > a {
color: #FFF;
}
.navbar-default .navbar-nav > li > a:hover,
.navbar-default .navbar-nav > li > a:focus {
color: #333;
text-decoration:underline;
}
.navbar-default .navbar-nav > .active > a,
.navbar-default .navbar-nav > .active > a:hover,
.navbar-default .navbar-nav > .active > a:focus {
color: #fff;
background-color: #808080;
}
.navbar-default .navbar-nav > .open > a,
.navbar-default .navbar-nav > .open > a:hover,
.navbar-default .navbar-nav > .open > a:focus {
color: #555;
background-color: #139D26;
}
/* caret */
.navbar-default .navbar-nav > .dropdown > a .caret {
border-top-color: #fff;
border-bottom-color: #fff;
}
.navbar-default .navbar-nav > .dropdown > a:hover .caret,
.navbar-default .navbar-nav > .dropdown > a:focus .caret {
border-top-color: #FFF;
border-bottom-color: #FFF;
}
.navbar-default .navbar-nav > .open > a .caret,
.navbar-default .navbar-nav > .open > a:hover .caret,
.navbar-default .navbar-nav > .open > a:focus .caret {
border-top-color: #fff;
border-bottom-color: #fff;
}
/* mobile version */
.navbar-default .navbar-toggle {
border-color: #fff;
background-color:#139D26;
}
.navbar-default .navbar-toggle:hover,
.navbar-default .navbar-toggle:focus {
background-color: #fff;
background-color:#139D26;
}
.navbar-default .navbar-toggle .icon-bar {
background-color: #139D26;
}
@media (max-width: 767px) {
.navbar-default .navbar-nav .open .dropdown-menu > li > a {
color: #fff;
}
.navbar-default .navbar-nav .open .dropdown-menu > li > a:hover,
.navbar-default .navbar-nav .open .dropdown-menu > li > a:focus {
color: #139D26;
}
}
section {
padding:10px 10px;
display:block;
height:470px;
}
.wrapper {
background-color: #f5f5f5;
}
footer {
display: block;
background-color: #139D26;
color:#fff;
text-align:center
}
</style>
<asp:ContentPlaceHolder ID="head" runat="server">
</asp:ContentPlaceHolder>
</head>
<body>
<header id="header">
<div class="logo" id="logo"><a href="default.aspx">
<img src="imagens/logo.png" /></a></div>
<nav class="navbar navbar-default" role="navigation">
<div class="container-fluid">
<div class="row">
<div class="col-md-12">
<div 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>
</div>
<div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
<ul id="menu-main-menu" class="nav navbar-nav">
<li class="nav-item active">
<a class="nav-link" href="#">Home <span class="sr-only">(current)</span></a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Link</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Link</a>
</li>
<li class="dropdown">
<a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="false">Produtos <span class="caret"></span></a>
<ul class="dropdown-menu">
<li><a href="#">Aparelhos Auditivos</a></li>
<li><a href="#">Acessorios para aparelhos</a></li>
</ul>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Link</a>
</li>
</ul>
</div>
<!-- /.navbar-collapse -->
</div>
</div>
</div>
<!-- /.container-fluid -->
</nav>
</header>
<section>
<div class="container">
<asp:ContentPlaceHolder ID="ContentPlaceHolder1" runat="server">
</asp:ContentPlaceHolder>
</div>
</section>
<footer><p>© 2017 - Todos os direitos reservados.</p></footer>
<script src="scripts/jquery-1.9.1.js"></script>
<script src="scripts/bootstrap.min.js"></script>
</body>
</html>Discussão (1)
Carregando comentários...