Menu itens desaparecem na resolução de celular/tablet

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