Hello everyone, I have a problem with leaving the menu responsible for my site, I will send the html and css so that someone can help me. vlw.
HTML:
@media(max-width: 1024px) {
body { zoom: 0.80; }
}
@media(max-width: 768px) {
body { zoom: 1; }
#middle-content,
#agenda-prefeitura,
#banner-home,
#pmf-maps,
#pmf-dom {
display: none;
}
.responsive-none { display: none; }
.news-pagination ul > li.pagination-start,
.news-pagination ul > li.pagination-end,
a.pagenav { display: none; }
.pagination-prev a.pagenav,
.pagination-next a.pagenav {
display: inline-block;
}
.colsec { margin: 0 0 16px; }
.tog-menu { display: block; }
.shadow,
header#top .radio-terradosol { display: none; }
header#top .nav-top-wrapper,
header#top .nav-main-wrapper {
height: auto;
}
header#top .nav-top,
header#top .nav-main {
width: 100%;
margin: 0 auto;
position: relative;
}
header#top nav ul {
text-align: inherit;
display: none;
width: 100%;
position: absolute;
top: 92px;
left: 0;
}
header#top .nav-top h1 {
float: none;
text-align: center;
font-weight: bold;
font-size: 16px;
}
header#top .nav-top nav {
background-color: #00928D;
}
header#top .nav-top ul {
position: inherit;
background-image: none;
background-color: #00928D;
}
header#top .nav-top nav ul li {
display: block;
margin-right: 0;
}
header#top .nav-top nav ul li a {
line-height: 40px;
}
header#top .nav-top nav ul li a:hover {
background-color: #126963;
}
header#top form.search {
position: relative;
top: auto;
right: auto;
width: 100%;
height: 48px;
margin-bottom: 0px;
}
header#top form.search input.pesquisa {
border: none;
background: none scroll 0 -164px repeat-x #FDFDFD;
float: left;
outline: 0;
width: 80%;
height: 36px;
margin: 6px 10%;
padding: 0;
text-indent: 3%;
}
header#top form.search button.submit-pesquisa {
display: block;
padding: 0 12%;
border: none;
position: absolute;
right: 0;
top: 0;
height: 48px;
background-color: transparent;
color: #FFF;
font-size: 20px;
cursor: pointer;
}
header#top form.search button.submit-pesquisa i {
line-height: 48px;
}
header#top figure.logo {
float: none;
padding: 16px;
text-align: left;
}
header#top figure.logo img {
max-height: 60px;
}
header#top .nav-main {
display: block;
}
header#top .nav-main nav {
margin-right: 0;
float: left;
width: 100%;
}
header#top .nav-main li {
display: block;
width: 100%;
}
header#top .nav-main li a {
padding: 15px 0;
font-size: 0.9em;
color: #FFF;
text-shadow: 2px 2px 0 #126963;
background: none scroll 0 0 #64A9A4;
/* Permalink - use to edit and share this gradient: http://colorzilla.com/gradient-editor/#64a9a4+1,55908c+100 */
background: #64a9a4; /* Old browsers */
background: -moz-linear-gradient(top, #64a9a4 1%, #55908c 100%); /* FF3.6-15 */
background: -webkit-linear-gradient(top, #64a9a4 1%,#55908c 100%); /* Chrome10-25,Safari5.1-6 */
background: linear-gradient(to bottom, #64a9a4 1%,#55908c 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#64a9a4', endColorstr='#55908c',GradientType=0 ); /* IE6-9 */
}
header#top .nav-main li a:hover {
background-color: #55908C;
}
header#top .nav-main li.current a,
header#top .nav-main li.current a:hover {
background: none 0 0 scroll repeat-x #4B8783;
border-bottom: none;
}
header#top .nav-main li a small {
display: none;
}
#top .radio-wrapper { display: none; }
#top .acessibilidade { display: none; }
.select2-arrow .fa-chevron-down:before {
content: "\f078" !important;
}}
<header id="top">
<div class="nav-main-wrapper">
<div class="nav-main">
<figure class="logo">
<img src="img/LOGO.png" alt="Logo da Prefeitura Municipal de Porto Grande" />
</figure>
<nav class="main">
<ul>
<li class="item-101 current active parent"> <a href="/" title="Página Inicial" >
Portal <small>Página Inicial</small> </a>
</li><li class="item-120"> <a href="/a-cidade" title="Conheça Mais" >
A Cidade <small>Conheça Mais</small> </a>
</li><li class="item-180"> <a href="/canais" title="Conheça Mais" >
Canais <small>Conheça Mais</small> </a>
</li><li class="item-121 parent"> <a href="/institucional" title="Órgãos e regionais" >
Institucional <small>Órgãos e regionais</small> </a>
</li><li class="item-122"> <a href="/noticias" title="Acompanhe" >
Notícias <small>Acompanhe</small> </a>
</li> </ul>
</nav>
<a href="#" class="tog-menu"><i class="fa fa-bars"></i></a>
</div>
</div>
<div class="nav-top-wrapper">
<div class="nav-top">
</div>
</div>
<div class="shadow"></div>
</header>