How to highlight the current section

Question

When navigating in the menu bar, some of the options are not selected. I have tried to do it with JQuery but my attempts are in vain.

Briefly what I am looking for is that if the user clicks Home Page it will be marked with a color and if About Us is clicked, the above selection will suffice and it will be marked as new.

I tried using the condition {% if request.path ==" / "%} class =" weblink active mr-3 "{% else%} class =" weblink mr-3 "{% endif%} in the "Option 1 "but it didn't work. What am I doing wrong?

{% if user %}
<!--Option 1-->

<li role="none" {% if request.path=="/"%}class="weblink active mr-3" {% else %} class="weblink mr-3"{% endif %}
    <a role="menuitem" aria-label=Home page" href="/" title="Home page" >
        
        Home page
    </a>
    
</li>
    
<!--Option 2-->

<li role="none" class="weblink dropdown"
    <a role="menuitem" aria-label="Services" href="#" class="dropdown-toggle" data-toggle="dropdown" title="Services" >
        
        Services
        <span class="caret"></span>
    </a>
    
    <ul class="dropdown-menu" role="menu">
        
        <li role="none">
            <a role="menuitem" aria-label="Services" href="/services/"   title="Services" >Services</a>
        </li>
        <div class="divider"></div>
        
        
        <li role="none">
            <a role="menuitem" aria-label="Product A (example)" href="/services/product-a/"   title="Product A (example)" >
                Product A (example)
            </a>
        </li>
        
        <li role="none">
            <a role="menuitem" aria-label="Product B (example)" href="/services/product-b/"   title="Product B (example)" >
                Product B (example)
            </a>
        </li>
        
    </ul>
    
</li>
        
<!--Option 3-->

<li role="none" class="weblink"
    <a role="menuitem" aria-label="About us" href="/about-us/" title="About us" >
        
        About us
    </a>
    
</li>
        
{% endif %}
                
<!--End Options->

Answer 1

Try like this:

{% with request.resolver_match.url_name as url_name %}
<li class="nav-item {% if url_name in 'home' %}active{% endif %}">
    <a class="nav-link" href="{% url 'home' %}">
        <span class="menu-title"> Home</span>
    </a>
</li>
<li class="nav-item {% if url_name in 'about' %}active{% endif %}">
    <a class="nav-link" href="{% url 'about' %}">
        <span class="menu-title"> About</span>
    </a>
</li>
{% endwith %}

Rename home and about with your desired URL path.