I have a primary menu on my Wordpress site with links to other pages within that Wordpress site. However, the last menu option is a custom link that directs the user to an external site. That link works as expected however I am having problems styling it.

I have added the class 'custom-link' to to CSS Classes box for that Custom Link and then wrote the following in the 'Additional CSS' box.

.custom-link
{

    padding:0px 5px 0px 5px;
    background-color: #000;

    color: white !important;
    font-size: 40;
}

The padding and background color took effect. But the color and size of the link font are not responding to the css. I tried a number of things like adding 'li a' before the brackets but that did not work either.

I would be very grateful if I could be given some direction on this. Thanks in advance.

I have a primary menu on my Wordpress site with links to other pages within that Wordpress site. However, the last menu option is a custom link that directs the user to an external site. That link works as expected however I am having problems styling it.

I have added the class 'custom-link' to to CSS Classes box for that Custom Link and then wrote the following in the 'Additional CSS' box.

.custom-link
{

    padding:0px 5px 0px 5px;
    background-color: #000;

    color: white !important;
    font-size: 40;
}

The padding and background color took effect. But the color and size of the link font are not responding to the css. I tried a number of things like adding 'li a' before the brackets but that did not work either.

I would be very grateful if I could be given some direction on this. Thanks in advance.

• css
• links

• I've just tried your CSS and it worked, except for the font-size because you've left the unit off. It should be "font-size: 40px". My color attribute worked fine, even without !important. If you can provide a link to the site I can check it out for you. – dyg Commented May 1, 2020 at 13:35
• Actually I did have 'px' on the end of the css that I was actually trying. It did not work. Since then I have tried '.navigation-menu li a, .mobile-navigation-menu li a .custom-link {...}'. That does work but the code in the brackets then changes the whole menu. I haven't published the site. But I guess I can if that will help sort out this issue. – phoenixson Commented May 1, 2020 at 13:46

1 Answer 1

Turns out I was making the omission of adding 'a' as the link is actually an anchor. So the working code would be as ff:

.custom-link a
{
    color: white !important;
    font-size: 40px;
}

In terms of affecting only the text of the link in question.