Boa tarde
 
Estou com um problema que está me deixando careca .... por que cabelos brancos eu já tenho .... 
Vamos ao problema ...
Num site tive que aumentar um item no menu e acrscentar palavras em inglês no que estavam lá ...
No meu computador em resolução de 1920px ele aparece normal .... mas quando vou diminuindo a resolução os itens do final vão desaparecendo .... já fiz várias alterações no tamanho mas nada resolveu ... então resolvi pedir ajuda .... 
O código html é esse
<div id="header"> <div> <div id="logo"> <a href="index.htm"><img src="images/logoEcoNutteste.png" alt="Logo" /></a> </div> <div id="navigation"> <div style="width: 100%;"> <ul> <li class="current"><a href="index.htm">Home</a></li> <li><a href="CastanhaDoBrasil.php">Castanha do Brasil/Brazil Nut</a></li> <li><a href="Qualidade.php">Qualidade/Quality</a></li> <li><a href="produtos.php">Produtos/Products</a></li> <li><a href="SistemaDeVendas.php">Como Comprar/Shopping</a></li> <li><a href="Agradecimentos.php">Agradecimentos/Acknowledgements</a></li> <li><a href="Clipping.php">Clipping</a></li> <li><a href="Contato.php">Contato/Contact</a></li> </ul> </div> </div> </div> </div> e o CSS é esse:
body { background: url(../images/bg-body.gif) repeat center; color: #80662b; font-family: 'AndikaRegular'; font-size: 14px; margin: 0; min-width: 950px; padding: 0; } a { outline: none; } img { border: 0; cursor: pointer; } p a { color: #80662B; font-style: italic; } #header { background: url(../images/bg-header.gif) repeat-x top center; height: 106px; overflow: hidden; width: 100%; } #header div { /*margin: 0 auto;*/ margin-left: 1%; overflow: hidden; width: 100%; } #header div div#logo { float: left; width: auto; margin: 20px 55px 0 0; } #header div div#navigation { /*background: url(../images/bg-navigation-right-curve.gif) no-repeat right top;*/ font-family: 'CarterOneRegular'; float: left; height: auto; padding-right: 4px; line-height: 50px; margin-top: 27px; /*text-transform: lowercase;*/ width: 80%; } #header div div#navigation div { /*background: url(../images/bg-navigation-left-curve.gif) no-repeat left top;*/ padding-left: 4px; height: 63px; width: auto; } #header div div#navigation div ul { background: url(../images/bg-navigation.gif) repeat-x; clear: both; float: left; height: 63px; list-style: none; margin: 0; padding: 0; min-width: 700px; } #header div div#navigation div ul li:first-child { background: none; } #header div div#navigation div ul li { background: url(../images/separator-navigation.gif) no-repeat center left; float: left; padding: 0 5px; } #header div div#navigation div ul li a { color: #b99b5f; text-decoration: none; text-shadow: 1px 1px 0 #efd9c4; } #header div div#navigation div ul li.current a, #header div div#navigation div ul li a:hover { color: #2e5306; text-shadow: 1px 1px 0 #f2fcd9; } Será que alguém tem alguma ideia de como consertar isso ... o site não é responsivo ... mas o menu deveria aparecer inteiro no navegador do celular

Olá! Preciso urgentemente de ajuda, para desenvolver um estilo de busca avançada, como a do Zap Imóveis (no modo mobile). É possível fazer no CSS puro ou há FrameWorks? Fico no aguardo!
 
Não consegui enviar a imagem por erro no site deste fórum.

Menu lateral retrátil apenas com CSS.
Aprenda nessa vídeo aula a fazer um menu lateral retrátil usando apenas CSS, sem usar nenhum script ou plugin.
Dicas no vídeo de como usar ícones do Font Awesome.
Download dos arquivos: https://github.com/thiagofranchin/menuLateralCss