Foros del Web » Creando para Internet » CSS »

[SOLUCIONADO] ¿Cómo agregar un campo en un menú responsive?

Estas en el tema de ¿Cómo agregar un campo en un menú responsive? en el foro de CSS en Foros del Web. Hola a todos, tengo un menú en la web en el que caben 5 elementos, pero si pongo un sexto elemento éste se muestra en ...
  #1 (permalink)  
Antiguo 22/10/2014, 09:38
 
Fecha de Ingreso: julio-2010
Mensajes: 298
Antigüedad: 13 años, 8 meses
Puntos: 8
¿Cómo agregar un campo en un menú responsive?

Hola a todos, tengo un menú en la web en el que caben 5 elementos, pero si pongo un sexto elemento éste se muestra en la segunda linea.
¿Cómo puiedo hacer para solucionar esto? La web es www.sureact.com
El código css que se aplica en este punto es el siguiente:
Código:
.sf-menu, .sf-menu * {margin:0;padding:0;list-style:none;}
#main-menu{ width:940px; position:relative; margin:0 auto; padding-bottom:37px; z-index:99;}
	.nav-left{ background:url(../images/nav-left.png) 0 0 no-repeat; width:6px; height:25px; margin-left:-6px;}
	.nav-right{ background:url(../images/nav-right.png) 0 0 no-repeat; width:5px; height:25px; margin-right:-5px;}
.sf-menu{border-top:6px solid #1d1d1d; box-shadow:0 1px 2px rgba(0,0,0,.2); border-radius:0 0 5px 5px;}
.sf-menu li {position:relative; float:left;  font-size:14px; line-height:18px; background:url(../images/menu-line.jpg) 0 0 no-repeat; padding-left:1px;}
.sf-menu li:first-child{ background:none; padding-left:0;}
	.sf-menu li a {display:block;position:relative; color:#2e2e2e;background:url(../images/menu.png) 0 -50px repeat-x #e8e8e8; padding:15px 65px 17px;}
	.sf-menu li:first-child a,.sf-menu li:first-child a strong{ border-radius:5px 0 0 5px;}
	.sf-menu li.last a,.sf-menu li.last a strong{ border-radius:0 5px 5px 0;}
	.sf-menu li a strong{ display:block; width:100%; height:100%; top:0; left:0; position:absolute; opacity:0;-webkit-transition:all 0.5s ease;-moz-transition:all 0.5s ease;-o-transition:all 0.5s ease;transition:all 0.5s ease; z-index:1;
	background: #21d7ff;
	background: -webkit-gradient(linear, 0 0, 0 bottom, from(#21d7ff), to(#0FA1FF));
	background: -webkit-linear-gradient(#21d7ff, #0FA1FF);
	background: -moz-linear-gradient(#21d7ff, #0FA1FF);
	background: -ms-linear-gradient(#21d7ff, #0FA1FF);
	background: -o-linear-gradient(#21d7ff, #0FA1FF);
	background: linear-gradient(#21d7ff, #0FA1FF);}
	.sf-menu li a span{ position:relative; z-index:2;}
		.sf-menu li.sfHover a,.sf-menu li.current a{color:#fff;
		background: #21d7ff;
		background: -webkit-gradient(linear, 0 0, 0 bottom, from(#21d7ff), to(#0FA1FF));
		background: -webkit-linear-gradient(#21d7ff, #0FA1FF);
		background: -moz-linear-gradient(#21d7ff, #0FA1FF);
		background: -ms-linear-gradient(#21d7ff, #0FA1FF);
		background: -o-linear-gradient(#21d7ff, #0FA1FF);
		background: linear-gradient(#21d7ff, #0FA1FF);}
		.sf-menu li a:hover strong{ opacity:1;}
		.sf-menu li a:hover{color:#fff;}
.sf-menu ul {
	position:		absolute;
	top:			-999em;
	z-index:		99;
	width:			188px; 
	display:none;
	background:none;
}
.sf-menu li li{width:100%;padding:0;}
	.sf-menu li li a,.sf-menu li.sfHover li a,.sf-menu li.current li a{color:#fff; background:url(../images/submenu.png) 0 0 repeat-x !important; border-radius:0; padding:15px 0 17px; text-align:center}
		.sf-menu li li a:hover,.sf-menu li li.sfHover a,.sf-menu li li.current a{background:url(../images/submenu.png) 0 -50px repeat-x !important;}
.sf-menu ul ul {
	position:		absolute;
	top:			-999em;
	z-index:		99;
	width:			188px; 
	display:none;
	background:none;
}
	.sf-menu li li li{}
	.sf-menu li li li a,.sf-menu li li.sfHover li a,.sf-menu li li.current li a{background:url(../images/submenu.png) 0 0 repeat-x !important;}
		.sf-menu li li li a:hover,.sf-menu li li li.current a{background:url(../images/submenu.png) 0 -50px repeat-x !important;}
.sf-menu li:hover ul,
.sf-menu li.sfHover ul {
	left:			0px;
	top:			50px; /* match top ul list item height */
}
ul.sf-menu li:hover li ul,
ul.sf-menu li.sfHover li ul {
	top:			-999em;
}
ul.sf-menu li li:hover ul,
ul.sf-menu li li.sfHover ul {
	left:			188px; /* match ul width */
	top:			0px;
}
ul.sf-menu li li:hover li ul,
ul.sf-menu li li.sfHover li ul {
	top:			-999em;
}
ul.sf-menu li li li:hover ul,
ul.sf-menu li li li.sfHover ul {
	left:			10em; /* match ul width */
	top:			00px;
}
.sf-menu li a span.arrow{ display:block; background:url(../images/arrow.png) 0 0 no-repeat; width:10px; height:7px; position:absolute; top:43%; left:68%;}
.sf-menu li a:hover span.arrow,.sf-menu li.current a span.arrow,.sf-menu li.sfHover a span.arrow{background:url(../images/arrow-white.png) 0 0 no-repeat;}
.sf-menu li li a span.arrow{ background:url(../images/arrow-white.png) 0 0 no-repeat;}
@media only screen and (min-width: 768px) and (max-width: 979px) {
	#main-menu{ width:748px;}
	.sf-menu li a{ display:block;padding:15px 46px 17px;}
	.sf-menu li a span.arrow{left:75%;}
	.sf-menu li li a span.arrow{left:65%;} 
}
@media only screen and (max-width: 767px) {
	#main-menu,.sf-menu{ width:300px; box-shadow:none;}
	.sf-menu li{ padding:0;float: none; background:none; margin-bottom:5px;}
	.sf-menu li a{ display:block; width:280px;border-radius:5px !important; padding:15px 0 17px 20px; box-shadow:0 0 2px rgba(0,0,0,.2);}
	.sf-menu li a strong{border-radius:5px;}
	.sf-menu li li{ margin:0;}
	.sf-menu li li a{ text-align:left !important;width:270px;padding:15px 0 17px 30px !important;}
	.sf-menu li li li a{width:260px;padding:15px 0 17px 40px !important;}
	.sf-menu ul,.sf-menu ul ul{ min-width:100%; padding:0;position: relative; left: 0 !important; top:0px !important;}
	.sf-menu li a span.arrow,.sf-menu li li a span.arrow{left:90px; padding:0;}
}
@media only screen and (min-width: 480px) and (max-width: 767px) {
	#main-menu,.sf-menu{ width:420px;}
	.sf-menu li a{ width:400px;}
	.sf-menu li li a{ width:390px;}
	.sf-menu li li li a{ width:380px;}
}
No veo donde tengo que modificar los valores para que se me ajuste a 6 elementos.

Muchas gracias

Etiquetas: responsive
Atención: Estás leyendo un tema que no tiene actividad desde hace más de 6 MESES, te recomendamos abrir un Nuevo tema en lugar de responder al actual.
Respuesta




La zona horaria es GMT -6. Ahora son las 04:47.