Alternate Nav Image depending on page

1

Hello!

I am trying to get a different image to display in my nav depending on the page I am currently on.

    <ul class="nav-links">
    {% for page in pages.children.visible %}
        {% set current_page = (page.active or page.activeChild) ? 'active' : '' %}
        <li class="{{ current_page }}">
            {% if page.header.title == 'Home' %}
                <a href="{{ page.url }}" class="navlogolink">
                    {% if page.slug == '' %}
                        <img src="../images/symbol_white.png" class="navlogo" />
                    {% else %}
                        <img src="../images/symbol_red.png" class="navlogo" />
                    {% endif %}
                </a>
            {% else %}                
                <a href="{{ page.url }}" class="navlink">
                    {{ page.menu|upper }}
                </a>
            {% endif %}
        </li>
    {% endfor %}
    {% for mitem in site.menu %}
        <li>
            {% if page.header.title == 'Home' %}
                <a href="/" class="navlogolink">
                    <img src="../images/symbol_white.png" class="navlogo" />
                </a>
            {% else %}
            <a href="{{ mitem.url }}" class="navlink">
                {{ mitem.text }}
            </a>
            {% endif %}
        </li>
    {% endfor %}
</ul>

In the code above if I am at the root ‘/’ it should display the white image, otherwise the red. I would also like to be able to add more pages to have the white image with an OR in the if check.

Any help would be appreciated.

Thanks!

2

Why you don’t add a variable for logo image in your page’s header?
If there is no logo selected, no logo is shown, otherwise the selected logo is shown.

        {% if page.header.logo !=  '' %}
            <a href="{{ page.url }}" class="navlogolink">
                   <img src="{{ url("theme://" ~ page.header.logo) }}" class="navlogo" />
            </a>
        {% else %}                
            <a href="{{ page.url }}" class="navlink">
                {{ page.menu|upper }}
            </a>
        {% endif %}

You need to change the line

<img src="{{ url(“theme://” ~ page.header.logo) }}" class=“navlogo” />

Right now it loads the images in the root folder of your theme, so you need to adjust it based on where your logos are stored.

1 Like
3

I don’t want to not display an image, I would like to have a different image for the link depending the page displayed.

I have a base.html.twig which has an include for navigation.html.twig. In navigation.html.twig, I have the standard macro loop that comes with the Antimatter theme that builds a nav bar from all pages.

For one of the pages, I use an image instead of text and this image is either white when on certain pages (because the nav bar is styled red, and red on others because the nav bar is style white.

4

I’ve managed to sort it out using your advice but changed it a bit, probably not the most efficient way but it works :slight_smile:

I added

{% if page.header.nav_logo == 'white' %}

over the whole nav and created a seperate nav in the {% else %} block.

5

I’m not sure I understand the flow of the navigation.html.twig file in Antimatter…

First there is:

{% macro loop(page) %}

and then there is

<nav class="{{ page.header.nav_classes }}">

and in this nav there are two for loops:

{% for page in pages.children.visible %}

and

{% for mitem in site.menu %}

Could someone explain this to a beginner?

6

The mitem is basically if you want some custom links like external links or register link. You can add them is user/config/site.yaml with:

menu:
  - title:
     url:

{{ for page in pages... }}

is the main menu loop to iterate over the menu links including the children.

The macro is there to not have to write more code than necessary. It will run if there is a page with children and dropdown is enabled.

1 Like