0

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.

Improve this question
2
  • 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

Reset to default
0

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.

Improve this answer
1
  • again, your code worked in my test without the a. Adding the a will just make that css more specific, so it could be that you have some competing CSS somewhere. Inspecting in your browser should show you what was going on.
    – dyg
    Commented May 3, 2020 at 3:19

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.