Jump to content


Photo

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

Menu CSS Celular

  • Faça o login para participar
Nenhuma resposta neste tópico

#1 sfonseca45

sfonseca45

    Normal

  • Usuários
  • 80 posts
  • Sexo:Masculino

Posted 03/02/2019, 10:23

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 alguem tem alguma idéia de como consertar isso ... o site não é responsivo ... mas o menu deveria aparecer inteiro no navegador do celular


Resolvido






1 user(s) are reading this topic

0 membro(s), 1 visitante(s) e 0 membros anônimo(s)

IPB Skin By Virteq