jinja2.exceptions.TemplateSyntaxError: expected token 'end of print statement', got 'dark'

Question

I am new in programming. I can't not understand why this error. Why have I got an error with 'Dark'.

<header id="header" class='{% if nav_style == "Light Version" %}{{ full-header }}{% endif %}
{% if nav_style == "Dark Version" %}{{ full-header dark }}{% endif %}
{% if nav_style == "Transparent" %}{{ transparent-header dark }}{% endif %}
{% if nav_style == "Semi Transparent Light Version" %}{{ full-header transparent-header semi-transparent }}{% endif %}
{% if nav_style == "Semi Transparent Dark Version" %}{{ full-header transparent-header semi-transparent dark }}{% endif %}
{% if nav_style == "Floating Version" %}{{ full-header transparent-header floating-header }}{% endif %}
{% if nav_style == "Static Sticky "%}{{ full-header }}{% endif %}
{% if nav_style == "Responsive Sticky" %}{{ full-header }}{% endif %}' {% if nav_style == "Static Sticky" %}data-sticky-shrink="false"{% endif %} {% if nav_style == "Responsive Sticky" %}data-mobile-sticky="true"{% endif %} >`

Answer 1

When you use the {{ varname }} syntax, Jinja2 expects that varname is a valid variable name, that you passed as a context variable to the render function. During the rendering Jinja2 will replace this term with varname's value. But in your template you just select some class names, which are simple strings, based on the value of nav_style. So you don't have to use the {{ ... }} syntax since they are not variables, but simple strings in the template. So something like this should work:

<header id="header"
    class='{% if nav_style == "Light Version" %} full-header {% endif %} 
        {% if nav_style == "Dark Version" %} full-header dark {% endif %} 
        {% if nav_style == "Transparent" %} transparent-header dark {% endif %} 
        {% if nav_style == "Semi Transparent Light Version" %} full-header transparent-header semi-transparent {% endif %} 
        {% if nav_style == "Semi Transparent Dark Version" %} full-header transparent-header semi-transparent dark {% endif %} 
        {% if nav_style == "Floating Version" %} full-header transparent-header floating-header {% endif %} 
        {% if nav_style == "Static Sticky "%} full-header {% endif %} 
        {% if nav_style == "Responsive Sticky" %} full-header {% endif %}'
    {% if nav_style=="Static Sticky" %}data-sticky-shrink="false" {% endif %} 
    {% if nav_style=="Responsive Sticky" %}data-mobile-sticky="true" {% endif %}>

But this is too much logic inside the template, which makes it hard to read and debug. You should put this logic inside the view function, and pass the selected class names as a simple variable, e.g. nav_style_classes:

<header id="header" class="{{ nav_style_classes }}" 
    {% if nav_style=="Static Sticky"%}data-sticky-shrink="false" {% endif %} 
    {% if nav_style=="Responsive Sticky" %}data-mobile-sticky="true" {% endif %}>