Home > Enterprise >  Django Conditional to remove css class if not on main url
Django Conditional to remove css class if not on main url

Time:11-22

Im wondering if someone could help me figure this out; Working on a web app using the django framework and for my navbar, I have a css class that makes it transparent on the main page. This of course worked on a static website, but does not in django. How can i write an if statement to only apply this class on a specific url - the home page?

{% load static %}
<header id="home">
    <!-- Navbar -->
    <nav id="navbar" >
        <a href="{% url 'home' %}"><img src="{% static 'images/farmec-logo-2.png' %}" alt="" id="logo"></a>
        <ul>
            <li><a href="{% url 'home' %}" >Home</a></li>
            <li><a href="{% url 'teams' %}">About</a></li>
            <li><a href="blog.html">Blog</a></li>
            <li><a href="suppliers.html">Suppliers</a></li>
            <li><a href="parts.html">Spare Parts</a></li>
        </ul>
    </nav>
</header>
#navbar {
    display: flex;
    justify-content: space-between;
    padding-top: 1rem;
    position: absolute;
    background: transparent;
    width: 100vw;
    z-index: 1;
    background: var(--dark-color);
    transition: 0.5s ease-in;
}

#navbar.main-page {
    background: transparent;
}

CodePudding user response:

In Django, you can check active URL like this...

I put code for if the home URL is active and then applied id="navbar" else not.

{% load static %}
<header id="home">
    <!-- Navbar -->
    <nav {% if request.resolver_match.url_name == 'home' %}id="navbar"{% endif %}  >
        <a href="{% url 'home' %}"><img src="{% static 'images/farmec-logo-2.png' %}" alt="" id="logo"></a>
        <ul>
            <li><a href="{% url 'home' %}" >Home</a></li>
            <li><a href="{% url 'teams' %}">About</a></li>
            <li><a href="blog.html">Blog</a></li>
            <li><a href="suppliers.html">Suppliers</a></li>
            <li><a href="parts.html">Spare Parts</a></li>
        </ul>
    </nav>
</header>
  • Related