Então, sou uma iniciante na área de Web Design, e estou tendo alguns problemas com css num site que estou desenvolvendo.
Eu tenho que fazer um menu fixo, que nada mais é que uma barra normal, mas que tenha uma figura de um trapézio no seu centro e dentro dele, uma caixa de pesquisa, como na foto. Minha dúvida é a seguinte:
Como eu poderia fazer isso da forma mais certa, para ficar responsivo? Inicialmente, eu deixei o menu fixed
, e criei uma div pro trapézio e deixei como absolute
, mas se for diminuindo a tela, o input
da pesquisa "foge" do centro do trapézio. Alguém poderia me ajudar ou me dar uma dica de como eu poderia fazer?
<html>
<head>
<meta charset="utf-8"/>
<title>Site</title>
<link rel="stylesheet" type="text/css" href="dist/css/bootstrap-theme.min.css">
<link rel="stylesheet" type="text/css" href="dist/css/bootstrap.css">
<script type="text/javascript" src="dist/js/jquery-1.9.1.js"></script>
<script type="text/javascript" src="dist/js/bootstrap.min.js"></script>
<style>
header {
background-color: #017338;
height: 60px;
padding: 0.5em;
position: fixed;
top:0;
width: 100%;
}
header p {
color: #fff;
}
.navbar-brand img {
margin-top: 5px !important;
}
#navbar li, #navbar a, .navbar-brand img {
padding:0 !important;
line-height: 60px;
color: #fff;
}
#navbar li input {
line-height: 10px;
width:15em;
margin-top:1.5em;
border:0;
}
#jogos button {
margin-top:5em;
}
#thumbs {
margin-top:11em;
}
#thumbs img {
height:200px;
width:300px;
}
@media (min-width: 1000px) {
#trapezio {
background-image:url('../img/trapezio.png');
width: 350px;
height:100px;
position:absolute;
left: 550px;
}
.nav input[type=search] {
height: 2em;
margin-left: 9.5em;
}
#bemvinda a {
margin-left:10em;
}
}
</style>
</head>
<body>
<header>
<!-- Fixed navbar -->
<nav class="navbar navbar-default navbar-fixed-top" role="navigation">
<div class="container">
<span id="trapezio"></span>
<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="#"><img src="logo.png" alt="SENAI BLUMENAU"/></a>
</div>
<div id="navbar" class="navbar-collapse collapse">
<ul class="nav navbar-nav">
<li>Slogan</li>
<li><input type="search" placeholder="pesquise um jogo"/></li>
<li id="bemvinda"><a href="#contact">Bem vinda, Beatriz</a></li>
</div><!--/.nav-collapse -->
</div>
</nav>
</header>
</body>
</html>