Agregar sección de menú en otro color en mi web

  • Autor Autor Gruponichero
  • Fecha de inicio Fecha de inicio

Gruponichero

Eta
SEO
Verificación en dos pasos activada
Verificado por Whatsapp
Buenas chicos!!. Llevo tiempo intentando hacer esto pero no lo consigo con el maldito css. Alguien que me pueda ayudar?. Adjunto la captura.

- Lo que necesito hacer es poner en mi menú una sección en otro color como tiene esta web con google speed en verde.
 

Adjuntos

  • esto.webp
    37,9 KB · Visitas: 77
Creo que con esto te puedes guiar, espero que el inglés no sea problema:

How to change individual menu button colors

en WordPress.com Forums How to change individual menu button colors How to change individual menu button colors realagenda · Member · Mar 19, 2012 at 6:09 pm Copy link Add topic to favori…
wordpress.com

En resumen: cada botón del menú tiene un ID único, tendrías que asignar en CSS el estilo que quieres para ese botón concreto. Sería el mismo formato que para una clase, pero las clases empiezan con un punto y los IDs con una almohadilla (#). Guíate por el ejemplo de ese link, sería esto:
CSS: 
#menu-item-1255 {
background: goldenrod;
}

Después de la almohadilla va el ID de tu botón (lo puedes ver inspeccionando el código de tu web, la abres, pulsas F12 y localizas la línea). Dentro de las llaves pones el estilo que quieras y a rodar.

Un saludo
 
Joder que de puta madre!! muchas gracias compañero,lo acabo de hacer. Pero una cosa, mira como queda, necesitaría que quedara el botón entero.

Muchas gracias compañero!!
 

Adjuntos

  • Sin título.webp
    20,3 KB · Visitas: 40
Eso es por el tamaño en si mismo, tienes que cambiarle el alto (height).
 
O que el botón tiene un borde !
 
Genial lo conseguir!!, lo único que ahora en el móvil aparece como con un fondo diferente jajaja, si solo quisiera que apareciera en esos colores en el ordenador y en el móvil tal y como estan?
 
Proba meter el código que agregaste acá adentro

<b:if cond='data:blog.isMobile == &quot;false&quot;'>
Código
</b:if>
 
flowxd dijo:
Proba meter el código que agregaste acá adentro

<b:if cond='data:blog.isMobile == &quot;false&quot;'>
Código
</b:if>
Hacer clic para expandir...
Así no me deja amigo. El código quedó así .
<b:if cond='data:blog.isMobile == &quot;false&quot;'>
#menu-item-1072 {
background-color: #f98f06;
border: none;
padding: .4em;
color: white;
padding-top: .1em;
margin-left: -6px;
}
#menu-item-1068 {
background-color: #074d89;
border: none;
padding: .4em;
color: white;
padding-top: .1em;
margin-left: -4px;

}
</b:if>

Pero con no me deja, se borra si meto lo último
 
O sea, tenes que tener el código duplicado. Uno dentro del if y otro fuera. El que este fuera es el que se vería en el mobil, el que está dentro el que se vería en una pc.
 
Ostia esto último no lo entendí, me lo puedes poner con el código que te mandé por favor?
 
Proba así, está duplicado. Pero el verde solo se ve en la pc, mientras que el azul se ve en el mobil. Ahora lo que deberías hacer es volver a modificar el código para que se vea como quieres en el mobil.

<b:if cond='data:blog.isMobile == &quot;false&quot;'>
#menu-item-1072 {
background-color: #f98f06;
border: none;
padding: .4em;
color: white;
padding-top: .1em;
margin-left: -6px;
}
#menu-item-1068 {
background-color: #074d89;
border: none;
padding: .4em;
color: white;
padding-top: .1em;
margin-left: -4px;

}
</b:if>

<b:if cond='data:blog.isMobile == &quot;true&quot;'>
#menu-item-1072 {
background-color: #f98f06;
border: none;
padding: .4em;
color: white;
padding-top: .1em;
margin-left: -6px;
}
#menu-item-1068 {
background-color: #074d89;
border: none;
padding: .4em;
color: white;
padding-top: .1em;
margin-left: -4px;

}
</b:if>
 
Nada bro, me pone que no se permite el marcado dentro de CSS
 
Ese mismo código cortalo y pegalo fuera de las etiquetas <skin>, es decir dentro del body entre las etiquetas <body></body> y agregale las etiquetas <style> que le puse.

<head>
<skin>
el código ahora está acá
</skin>
</head>
<body>
debe estar acá
<b:if cond='data:blog.isMobile == &quot;false&quot;'>
<style>
#menu-item-1072 {
background-color: #f98f06;
border: none;
padding: .4em;
color: white;
padding-top: .1em;
margin-left: -6px;
}
#menu-item-1068 {
background-color: #074d89;
border: none;
padding: .4em;
color: white;
padding-top: .1em;
margin-left: -4px;

}
</style>
</b:if>

<b:if cond='data:blog.isMobile == &quot;true&quot;'>
<style>
#menu-item-1072 {
background-color: #f98f06;
border: none;
padding: .4em;
color: white;
padding-top: .1em;
margin-left: -6px;
}
#menu-item-1068 {
background-color: #074d89;
border: none;
padding: .4em;
color: white;
padding-top: .1em;
margin-left: -4px;

}
</style>
</b:if>
</body>
 
Me dice error de sintaxis. El archivo es el siguiente:

?>
<!DOCTYPE html>
<html <?php language_attributes(); ?>>
<head>
<meta charset="<?php bloginfo('charset'); ?>">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="profile" href="http://gmpg.org/xfn/11">
<?php wp_head(); ?>
</head>
<body <?php body_class(); ?>>
<a class="screen-reader-text" href="#content"><?php _e('Skip to content', 'orbital'); ?></a>

<?php get_template_part('template-parts/header/header', 'image'); ?>

<?php get_template_part('template-parts/navbar/navbar', 'top'); ?>

<?php
if (orbital_customize_option('orbital_layout_search_navbar')) {
get_template_part('template-parts/search/content-search', 'navbar');
}


Cuando lo coloco en la parte de abajo pone error de sintaxis y no me deja guardarlo. Ya lo borré del css extra que tiene la plantilla..
 
Ahí ya no sabría... fijate bien cuando dice error, debería decir "line 72(cualquier numero)" este número indicaría la línea concreta que tiene el error.
 
Abandono bro, jajaja no soy capaz de dejar para el ordenador un color y para el móvil otro.. gracias por todo!
 
Lo de b:if es para blogger xD normal que no le funcione al compañero si usa wp. Con lo siguiente bastaría para que solo se vea en pc.
CSS: 
@media screen and (min-width: 60em) {
#menu-item-1255 { background: goldenrod; }
}
 
LuisPariona dijo:
Lo de b:if es para blogger xD normal que no le funcione al compañero si usa wp. Con lo siguiente bastaría para que solo se vea en pc.
CSS: 
@media screen and (min-width: 60em) {
#menu-item-1255 { background: goldenrod; }
}
Hacer clic para expandir...
AJAJAJAJAJAJAJAJAJAJJAJAAJAJJAJAJAJAJAJAJAJAJA me cago en la puta!!!!!! ARREGLADO.....no digo más jajaja te quiero :$ jajajaj
 
Hay que estar conectado o registrado para responder aquí.

Temas similares

I
Cómo agregar sección de descargas en WordPress
Respuestas
4
Visitas
179
DiosDelSeo
D
A
Agregar sección de fotos personalizada a un tema WP-script
Respuestas
6
Visitas
348
50gratis
5
Cómo agregar icono de Twitter al Menú de una web
Respuestas
7
Visitas
306
JulianSorel
C
¿Cómo agregar subpestañas ocultas en un menú con HTML y CSS?
Respuestas
4
Visitas
577
emaria01
E
A
Cómo agregar líneas al menú de navegación en WordPress
Respuestas
2
Visitas
266
AdrianT95
A
Menú
Acceder
Registro