Take your website
To the next level
Discover our newly launched customization services and elevate your web projects to new heights.
Delegate tasks, save time, and unlock the power of professional WordPress outsourcing.

Okay
  Public Ticket #4105727
Change the color of a word in menu items
Open

Comments

  •  2
    giuseppedb started the conversation

    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

  •  5,018
    Michael replied

    Hi,

    You can add html markup directly to a menu item and use CSS to change its color.

    1845883030.png

    Attached files:  Screenshot_299.png

  •  2
    giuseppedb replied

    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

  •  5,018
    Michael replied

    You need to disable this CSS:

    2514679003.png

    Attached files:  Screenshot_302.png

  •  2
    giuseppedb replied

    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

  •  5,018
  •  2
    giuseppedb replied

    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

  •  5,018
  •  2
    giuseppedb replied

    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


  •  5,018
    Michael replied

    Please use this CSS:

    .thegem-menu-custom ul.nav-menu-custom li a {
        padding-left: 50px;
    }
  •  2
    giuseppedb replied

    Hi,

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

  •  5,018
    Michael replied

    Sorry, please try this CSS:

    body .thegem-menu-custom ul.nav-menu-custom li a {
        padding-left: 50px;
    }