Changing wordpress menu link color through wordpress customizer control not working

Hi guys,
I ran into an issue:
I am trying to add a wordpress customizer control for the text color of my primary menu. I tried 100s of different types of menu , but even with the simple menu below, the color won’t change once the wordpress menu is attached.

So when the menu tag is attachted, the customizer control for the text-color is displayed, but does not work.
When i remove the menu tag, the customizer control for the text-control is displayed and works.
(Basic) example menu:
image
Customizer settings


Menu settings:
image
Color not changing if menu is assigned:

Color changing when menu is not assigned:

Anyone who knows a workaround? I tried setting the customizer control to text, theme mod to style instead of display theme mod, set !important in the theme mod and more.

Seperate question/remark:
Changing color of the a attribute only works when i put the customizer control directly on the a attribute.
If i for example put my unorder list above in between header tags, and add a customizer control to edit the header text color, the a link will not change, even if i have no menu added. (example below). As you can see all other tags do change color when the i change the customizer control.
Code:


Customizer control:

Customizer example with header tag

Sorry for the long wall of text and hope this makes sense!
If anybody knows a workaround i would be forever gratefull as i have been struggling with this for weeks now.

Best regards,
Dawid

Nobody? Perhaps someone with the same issue?

@RobM, can you shine your light on this?

Hi @dawidofski,
For a variety of reasons, I’m stepping away from my position at Pinegrow, but I still try to get on the forum when I can.

I think you are going to have to use some custom PHP for this. Your menu set-up and customizer control would be the same. But then, you would have to add custom PHP that grabs the option or mod and translates it into a custom styling block that over-rides the styling on the links. If you use the DevTools, where is the styling on the links coming from?

Cheers,
Bob

Good afternoon @RobM ,
Sorry to hear that, hope all is well!
i think your knowledge really helped a lot of people so thank you for that.
I wish you nothing but the best in your upcoming adventures :slight_smile:

I haven’t put any css on any of the items on purpose, so there wouldn’t be any conflict.
Looking at the dev tools i see it only inherits styles from normalize.css (part of the html template from pinegrow i started with

image

The rest of the styling comes from wordpress

Hope this is clear.
Many thanks,
Dawid

Hi @dawidofski,
Can you actually show what styling the links have with and with-out the menu being assigned like at the top of your post. Not sure what classes are added to change the end styling.
Cheers,
Bob

Hi @RobM sure,

The images in my reply above are when the customizer control is added, below are the screenshots when the customizer control is removed:

Normalize.css (same as screenshot in my other post)
image

Wordpress styling

Other (this is also the same with or without the control added)
image

As far as i can see there is no difference between the styling added with or without the controller.
I also tried to add the customizer control with custom php, and i have the same result (not working).
I have searched google for hours but nobody seems to have (the answer to) this problem.

Let me know if i can provide any more information.

Thanks again!
Dawid

Hi Dawid,
For you fourth and fifth images (colors with and without menu added), what is the computed styling difference of the links?

Two thoughts:

  1. remove the generic a:-webkit-any-link color rule from the normalize.css (not sure if this is where the color is coming from or not)
  2. For your custom php you are going to have to write out a style rule as opposed to adding inline styles. The style rules should target the link element, not the parental ul or div. Grab the theme mod or option and then add a style block to the body.
    Good Luck!
    Bob

Hi @RobM, your response lead me to this link: php - how to add color option in wordpress customize - Stack Overflow , which basically solves the problem. (if anybody else runs into this issue)

Thanks a lot for your help!

Yeah, the top answer there is my suggestion number 2.
Glad it worked out for you!