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

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

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,

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,

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

Hi,

I tried the same, but it doesn't work. The menu items keep overlapping the arrows.