All the menu items are white. I would like to change the color of one of the words for each item to orange, as in the attached image "Home desktop contrera.jpg" (look at the vertical menu, the background is different from the current homepage). How can I get the same result?
I tried several methods, but none of them seem to work on your template: 1) I added this code in Customize > Additional CSS: li#menu-item-3798 a:after {content: "schermo";color: #ff8c00;} li#menu-item-3798 a {color: white !important;} It doesn't work. 2) I tried to directly modify the Wordpress menu item like this: iPhone <span style="color: #ff8c00;">schermo</span> repair Palermo But it doesn't work either.
What method is necessary to use with your theme to color a specific word in orange, in each menu item?
Sorry, but you basically suggested solution #2 that I listed in the previous message among those I tried. And of course it doesn't work, as you can see from the attached screenshot. Since you have the login credentials, try it yourself and you'll see. What method is necessary to use with your theme to color a specific word in orange, in each menu item? Thank you. Best regards
Thanks. At the end of the previous message I asked: And how can I distance the arrow from the link? Although the correct question would actually be: How can I distance the links from the arrows?
Hi,
In the first slide of the Homepage I added a vertical menu, with the items:
Riparazione schermo iPhone Palermo
Riparazione batteria iPhone Palermo
Riparazione microfono iPhone Palermo
Riparazione connettore ricarica iPhone Palermo
All the menu items are white.
I would like to change the color of one of the words for each item to orange, as in the attached image "Home desktop contrera.jpg" (look at the vertical menu, the background is different from the current homepage). How can I get the same result?
I tried several methods, but none of them seem to work on your template:
1) I added this code in Customize > Additional CSS:
li#menu-item-3798 a:after {content: "schermo";color: #ff8c00;}
li#menu-item-3798 a {color: white !important;}
It doesn't work.
2) I tried to directly modify the Wordpress menu item like this:
iPhone <span style="color: #ff8c00;">schermo</span> repair Palermo
But it doesn't work either.
What method is necessary to use with your theme to color a specific word in orange, in each menu item?
Thank you.
Best regards
Giuseppe Di Baudo
Attached files: Home desktop contrera.jpg
Hi,
You can add html markup directly to a menu item and use CSS to change its color.
Attached files: Screenshot_299.png
Hi,
Sorry, but you basically suggested solution #2 that I listed in the previous message among those I tried.
And of course it doesn't work, as you can see from the attached screenshot.
Since you have the login credentials, try it yourself and you'll see.
What method is necessary to use with your theme to color a specific word in orange, in each menu item?
Thank you.
Best regards
Giuseppe Di Baudo
Attached files: screencapture-nuovo-websicily-it-wp-admin-nav-menus-php-2025-07-01-21_14_51.jpg
You need to disable this CSS:
Attached files: Screenshot_302.png
Hi,
thank you, it works!
Now I'd like to add an arrow before every item of the menù, like in this screenshot:
https://drive.google.com/file/d/1dRRvzOdYAL9S92mVtCGRG-cDvOZOdTKh/view?usp=sharing
I added the css class "menu-arrow" to every menu item, and in the personalized css i added this:
.menu-arrow a::before {
content: "";
display: inline-block;
width: 12px;
height: 12px;
margin-right: 8px;
background-image: url('https://www.nuovo.websicily.it/wp-content/uploads/freccia.svg');
background-repeat: no-repeat;
vertical-align: middle;
}
But it doesn't work.
And the same with:
li#.menu-arrow {
Why?
Thank you
Best regards
Giuseppe Di Baudo
Hi,
li#.menu-arrow a::before is incorrect code.
This is correct code:
https://www.nuovo.websicily.it/wp-admin/admin.php?page=thegem-theme-options#/custom-css-js/custom-css
Hi,
Thanks, it works. But the arrow disappears when you hover over it.
I try adding this:
li.menu-arrow a:hover:before {
content: "" !important;
display: inline-block !important;
width: 20px;
height: 20px;
background-image: url(https://www.nuovo.websicily.it/wp-content/uploads/freccia.svg);
background-repeat: no-repeat;
vertical-align: middle;
opacity: 1 !important;
position: absolute !important;
left: 0px !important;
}
but it doesn't work.
How is the arrow always visible, even when you hover over it?
And how can I distance the arrow from the link?
Thank you
Best regards
Giuseppe Di Baudo
Hi,
fixed.
Hi,
Thanks. At the end of the previous message I asked:
And how can I distance the arrow from the link?
Although the correct question would actually be:
How can I distance the links from the arrows?
Thank you
Please use this CSS:
Hi,
I tried the same, but it doesn't work. The menu items keep overlapping the arrows.
Sorry, please try this CSS: