Active link color won't stay

I have a an expandable sidebar on my site with a submenu that expands and shows the tags (using ‘pluck’) used on projects. When clicking on the tag it filters the projects (…projects/tag:Example).
This all works.

Except, the active link will not take on the color I assign to it. When choosing a categorie, it will go back to its default color.
It shows on hover and click, but not when active. Which is important otherwise it is hard to know which link is active.

The sidebar template:

    <nav class="leftnav">
  
<aside>
  <nav class="sidebar-nav" role="navigation">
    <ul>
      <?php foreach($pages->visible() as $p): ?>
      <li class="group<?php e($p->isOpen(), ' sidebar-nav-active') ?>">

        <a href="<?php echo $p->url() ?>"><?php echo $p->title()->html() ?></a>

        <?php if($p->hasVisibleChildren() && $p->isOpen()): ?>
          <ul class="submenu nav-children" id="nav-collapsible-<?php echo $p->uid() ?>" aria-hidden="false">
        <?php endif ?>
        <?php if($p->hasVisibleChildren() && !$p->isOpen()): ?>
        <ul class="submenu nav-children" id="nav-collapsible-<?php echo $p->uid() ?>" aria-hidden="true">
        <?php endif ?>

        <?php if($p->hasVisibleChildren()) : ?>

            <?php $projects = $p->children()->visible(); ?>
            <?php foreach($projects->pluck('tags', ',', true) as $tags): ?>
             <li class="<?php e($p->isOpen(), 'sidebar-nav-active') ?>">
              <a href="<?php echo $p->url() . '/tags:Ontwerpelementen' ?>"><?php echo $tags ?></a>
              </li>
            <?php endforeach ?>

        </ul>
        <?php endif ?>

      </li>
      <?php endforeach ?>
    </ul>
  </nav>
</aside>

</nav>

The CSS

    .sidebar-nav ul {
        margin: 0;
        padding: 0
    }
    .sidebar-nav li {
        list-style: none;
        font-size: 18px;
        border-left: 4px solid transparent;
        overflow: hidden
    }
    .sidebar-nav li>ul li {
        font-size: 14px
    }
    .sidebar-nav li>ul li a {
        padding-left: 12%;
    }
    .sidebar-nav a {
        display: block;
        padding: 10px;
        -webkit-transition: unset;
        transition: unset
    }

    .group:before,
    .group:after {
        content: " ";
        display: table
    }
    .group:after {
        clear: both
    }
    .nav-children {
        display: block;
        max-height: none;
        opacity: 1;
        -webkit-transition: max-height .2s, opacity .2s;
        transition: max-height .2s, opacity .2s
    }
    .nav-children[aria-hidden=true] {
        max-height: 0
    }
    .expand-subnav {
        background: 0;
        border: 0;
        border-radius: 50%;
        color: #f00;
        cursor: pointer;
        display: block;
        float: right;
        font-size: 22px;
        font-weight: bold;
        height: 26px;
        line-height: 1;
        margin: 8px;
        padding-bottom: 5px;
        position: relative;
        width: 26px;
        -webkit-appearance: none;
        -moz-appearance: none;
        -o-appearance: none;
        appearance: none;
        -webkit-transition: -webkit-transform .2s;
        transition: -webkit-transform .2s;
        transition: transform .2s;
        transition: transform .2s, -webkit-transform .2s
    }
    .expand-subnav:hover {
        background-color: #f00;
        color: #fff;
        outline: 0
    }
    .expand-subnav[aria-expanded=true] {
        -webkit-transform: rotate(45deg);
        transform: rotate(45deg)
    }

And for links in general I have set:

    a {
        color: #7c7c7c;
        text-decoration: none;
        transition: color .3s, background .3s, border .3s;
    }

    a:hover, a:focus, a:active {
      color: #729b7b;
    }

Thanks in advance for the help!

Not sure if I follow you at 100% but when you write this

a:hover, a:focus, a:active {
    color: #729b7b;
}

The site live does exactly that. The link is green when you’re in over state and when is active.
To do what you want you should probably add a class somewhere

Another thing.
I think you can improve the code a bit in the first part by doing something like this

<?php if($p->hasVisibleChildren()): ?>
  <ul class="submenu nav-children" id="nav-collapsible-<?php echo $p->uid() ?>" aria-hidden="<?php e($p->isOpen() , 'false' , 'true') ?>">
<?php endif ?>

Also, to expand on my previous answer, you should probably check the current tag against the one in the second foreach loop. Something like this maybe

<?php
$currentTag = param('tag');
foreach($projects->pluck('tags', ',', true) as $tags): ?>
<li class="<?php e($p->isOpen(), 'sidebar-nav-active') ?>">
    <a href="<?php echo $p->url() . '/tags:Ontwerpelementen' ?>" class="<?php e($currentTag == $tag) , 'is-active' ?>"><?php echo $tags ?></a>
</li>
<?php endforeach ?>

I never used tags in url so I’m not 100% sure if this is the best way to solve the problem though.

EDIT : also looks like you have an hardcoded tag in the url so no matter what link I click I always get the tags:Ontwerpelementen page

so for me it looks like you have to also set:

.sidebar-nav-active > a:first-child {
  color: #729b7b;
}

but also you overuse .sidebar-nav-acive so what I usually do is set a specific active tag to the child and to the parent I want to highlight in css

if it helps here is my navigation snippet (different classes but similar idea):

<ul>
  <?php foreach($pages->visible() as $item): ?>
    <?php if(!$item->hasVisibleChildren()): ?>
      <li class="<?php e($item->isOpen(), 'active'); ?>">
        <a class="" href="<?php echo $item->url() ?>">
          <?php echo $item->title()->html();?>
        </a>
      </li>
    <?php else: // dropdown needed ?>
      <li class="<?php e($item->isOpen(), 'active'); ?>">
        <a aria-expanded="false" href="<?php echo $item->url() ?>">
          <?php echo $item->title()->html();?>
        </a>
        <ul class="menu vertical">
          <?php foreach ($item->children()->visible() as $child): ?>
            <li>
              <a href="<?php echo $child->url(); ?>"><?php echo $child->title()->html(); ?></a>
            </li>
          <?php endforeach; ?>
        </ul>
      </li>
    <?php endif; ?>
  <?php endforeach ?>
</ul>

Sorry the hardcoded tag was an error.

Exactly what I want is:
When clicking on ‘Projecten’, the title ‘Projecten’ gets highlighted in color (as active link). The catagories expand but are just grey, once you click on a category that category opens and the color of it turns green as long as you stay are on that tags page. This way, you know which tag you clicked on and visited. Seems so simple…yet I can not get it to work.

I’ve improved the code as suggested. Also tried @mxst his suggestion but neither work. I’m a new at Kirby, so maybe I am just not understanding it properly.

Whatever I do; it just makes all the tags the same color. Hover works. I’m starting to think it has something to do with using the pluck method for the tags…

It has nothing to do with the pluck() method. Check out this post how to check if a tag is active: Tagcloud with active class on current tag?

Thank you, tried that as well - but it still doesn’t change anything… What am I doing wrong?

        <?php $projects = $p->children()->visible(); ?>
        <?php foreach($projects->pluck('tags', ',', true) as $tags): ?>
        <li>
          <a <?php ecco($p->isActive(), ' class="active"') ?> href="<?php echo $p->url() . '/tags:' . $tags ?>"><?php echo $tags ?></a>
          </li>
        <?php endforeach ?>

You check if the page is active, but you have to check if the parameter is active. The example I linked to should work for you as well. In your example, $p refers to the page, in the example, $p refers to the parameter, and then checks if the tag is the same as the URL parameter.

I guess that just goes beyond my understanding of it all.
I’ve tried everything within my knowledge.

Thank you for your help.

Try this:

<?php 
$param = kirby()->request()->params()->tag();
$projects = $p->children()->visible();
foreach($projects->pluck('tags', ',', true) as $tags): ?>
  <li>
     <a <?php ecco($tags == $param, ' class="active"') ?> href="<?php echo $p->url() . '/tags:' . $tags ?>">       <?php echo $tags ?></a>
 </li>
<?php endforeach ?>

Then check in dev tools if only one link gets the active class.

Thank you, but unfortunately, it does not add the class (I’ve uploaded the recent version):
http://studiolake.nl/kokmeuleman/projects

EDIT
$param = kirby()->request()->params()->tag();

had to be

$param = kirby()->request()->params()->tags();

I tested it in a Starterkit and this code worked for me:

<?php 
$param = kirby()->request()->params()->tag(); 
$projects = $page->children()->visible();
$tags = $projects->pluck('tags', ',', true);
?>
<ul>  
<?php foreach($tags as $tag): ?>
  <li>
     <a <?php ecco($tag == $param, ' class="active"') ?> href="<?php echo $page->url() . '/tag:' . $tag ?>">       <?php echo $tag ?></a>
 </li>
<?php endforeach ?>
</ul>

Note that I changed $tags to $tag because I found the plural irritating.

1 Like

Do you have a repository where I can fix it?

The issue is with php not with kirby