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

Gruponichero · 16 Abr 2020

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.

igiadas · 16 Abr 2020

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

Gruponichero · 16 Abr 2020

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!!

flowxd · 16 Abr 2020

Eso es por el tamaño en si mismo, tienes que cambiarle el alto (height).

yosoyjolly · 16 Abr 2020

O que el botón tiene un borde !

Gruponichero · 16 Abr 2020

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?

flowxd · 16 Abr 2020

Proba meter el código que agregaste acá adentro

<b:if cond='data:blog.isMobile == "false"'>
~~Código~~
</b:if>

Gruponichero · 16 Abr 2020

flowxd dijo:
Proba meter el código que agregaste acá adentro

<b:if cond='data:blog.isMobile == "false"'>
~~Código~~
</b:if>

Así no me deja amigo. El código quedó así .
<b:if cond='data:blog.isMobile == "false"'>
#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

flowxd · 16 Abr 2020

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.

Gruponichero · 16 Abr 2020

Ostia esto último no lo entendí, me lo puedes poner con el código que te mandé por favor?

flowxd · 16 Abr 2020

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 == "false"'>
#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 == "true"'>
#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>

Gruponichero · 16 Abr 2020

Nada bro, me pone que no se permite el marcado dentro de CSS

flowxd · 16 Abr 2020

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 == "false"'>
<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 == "true"'>
<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>

Gruponichero · 16 Abr 2020

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..

flowxd · 16 Abr 2020

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.

Gruponichero · 16 Abr 2020

Abandono bro, jajaja no soy capaz de dejar para el ordenador un color y para el móvil otro.. gracias por todo!

LuisPariona · 16 Abr 2020

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; }
}

Gruponichero · 16 Abr 2020

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; } }

AJAJAJAJAJAJAJAJAJAJJAJAAJAJJAJAJAJAJAJAJAJAJA me cago en la puta!!!!!! ARREGLADO.....no digo más jajaja te quiero :$ jajajaj

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

Gruponichero

Adjuntos

igiadas

How to change individual menu button colors

Gruponichero

Adjuntos

flowxd

yosoyjolly

Gruponichero

flowxd

Gruponichero

flowxd

Gruponichero

flowxd

Gruponichero

flowxd

Gruponichero

flowxd

Gruponichero

LuisPariona

Gruponichero

Temas similares