Problem with responsivel bootstrap menu

Question

Hello guys to problem to leave the responsivel menu of 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>