You don't need the for
loop in this case. What's happening is you're looping over each option in your dropdown field, and each time it's checking the value of the dropdown and displaying white
or black
. Since you have three options, you're going to get the dropdown value displayed three times (which is why you're seeing black
black
black
).
All you need is just the if
conditional:
{% if entry.transparentMenu.value == "menuLight" %}
<h3>white</h3>
{% elseif entry.transparentMenu.value == "menuDark" %}
<h3>black</h3>
{% endif %}
Also, fwiw looks like you have a typo in your code 👆️ - you use entry.transparentMenu
twice and entry.header.transparentMenu
once. I'm guessing you want entry.transparentMenu
everywhere...
The only time you'd want to use the for
loop to get all the dropdown field's options is if you wanted to display those in the template (in a list for example or to create your own dropdown on the frontend):
<ul>
{% for option in entry.dropdownFieldHandle.options %}
<li>{{ option }}</li>
{% endfor %}
</ul>
But in your case, you just want the current value and not all the options, so just remove the for
loop.