Make Navigation Word Two Colors When Active

My client would like to have one link, out of the nine listed in the main navigation menu, to be two colors when it's active.

The word is STREAT and they would like the STR to be the solid gray from the site and the EAT to be a specific blue color.

Is this possible without impacting the other eight navigation items? Those, by the way, when active are all the company's redish color. We are using a Wordpress theme for this site.

Thanks for any help!


you can symply use span tag in a word and give css to a active li span here is the example :

.menu li

Here my fiddle, hope i understand your problem correct :

html :

<a href="#">
    <span class="color_one">STR</span>
    <span class="color_two">EAT</span>

css :

a {
a:active > .color_one {
a:active > .color_two {
.color_two {
Tags: Html / Css / Wordpress

Similar questions

Set title of the WordPress page with two different colors
The title in my WordPress is of two words (say "The Company" for example). Right now the default color is Blue. But I want the "The" portion in the above example to be Grey. I used the font tag and set it as <font color="grey">The</font> Company in the site title Input box. In the preview page it is showing correctly, but when I visit m...
PHP - trying to define two color stops for a gradient background area where users can select both colors with a color picker
PHP - trying to define two color stops for a gradient background to be applied to a single CSS selector. I need them to be individually selected by the user (via a color picker). I've been defining the background color with PHP (named: $color_gradient & returning: '#f7f7f7'; as the default for users to start with) so the user can choose the bas...
How to make only the valid active page of a multilevel menu active with - ".nav li.current-menu-item a"?
Why, if I write - .nav li.current-menu-item a {}, then all items in the submenu of the active page will be highlighted, how can I make sure that only the really active item is highlighted? If I write - 'li', then everything works fine - .nav li.current-menu-item {}, but I need it with the - "a" . My code variant - "a" does not w...
How to make active an item from the main navigation menu in Wordpress?
In the Main Header Navigation I have this links: Home | Events | About | Blog I want when I go to Blog page and select a post, to be able to make active in the header menu the "Blog" item. Thanks.
how to make a border on active menu in the navigation menu
hi i'm attaching part of my css code containing the menu part. i need to show a different colour box when an item is clicked. where should i change the code? Edit:: i just need to show the navigation.for that anything just an arrow or a box or border or underline etc.
Bootstrap: How do I make Dropdown navigation Parent links an active link?
I am running Bootstrap on a WP install and have an issue with the url being stripped from the parent drop down nav item. Here is the code. In menu-item-72 you can see that the href for our-team is just a # instead of a proper link. What is missing from this to make it work? I have confirmed that the item is associated with an active entry.

Also ask

We use cookies to deliver the best possible experience on our website. By continuing to use this site, accepting or closing this box, you consent to our use of cookies. To learn more, visit our privacy policy.