Nav Block: not possible to style Current Page

Fixed Bugs
1

Description:

Styling the current page is only possible when using a WP Menu. Then the li-element gets the class current and therefore can be styled. When using Nav Links and Drop Downs the class current does not get applied so the styling has no effect.

In this screenshot you see first the li-element that is a result of a Nav Link. After that you see a li-element that comes from a WP Menu. Both have the exact same url but only the WP Menu one gets the class current.

Bildschirmfoto 2023-05-30 um 16.27.57
Bildschirmfoto 2023-05-30 um 16.27.571170×756 182 KB

Environment info

  • WordPress version: latest
  • Gutenberg Plugin version: -
  • Cwicly Plugin version: latest
  • Cwicly Theme version: latest
2

Also I noticed that the attribute aria-current="page" is missing in the a-element from the Nav Link.

3

Hello @Jonas,

Thanks for the report and apologies for the inconvenience.

Indeed, the current class is not being added to the nav links.
This will be fixed in the next update.

As for the aria-current="page" missing, can you confirm that you are adding the link as an internal link and not as a URL, as I can’t reproduce this.

Thanks in advance.

4

Hi @Louis,

you are right, this only happens when I add the link as an URL.
When add the link as an internal link it works fine.

5

Hello @Jonas,

Thanks for the report once again.

This should be addressed in 1.2.9.7.

Cheers,

1 Like
6

Hi @Louis,

there still seems to be an issue. While the Class .current get’s applied now the styling is missing it’s target.

The .current class gets applied to the cc-nav-item like so:

<ul class="cc-nav-items">
    <li class="cc-nav-link">
        <a class="cc-nav-item current">About us</a>
    </li>
</ul>

But the style generated by Cwicly targets li-elements with the class current:

.nav-class .cc-nav-items li.current .cc-nav-item {
    color: var(--cc-color-11);
}

So styling is still not possible.

7

Definitely an issue.

I’m sure this must just be a glitch that will be fixed in the next version, because the li should get the current class not the a tag, otherwise the current li can’t be styled.

1 Like
8

Hello @Jonas,

Sorry about the trouble here.
Indeed, the Nav link is having an issue with the placement of the .current class. Nav dropdown and Nav menu blocks should not pose a problem.

This will be fixed in the next update.

Cheers,

9

Thank you for your patience on this, @Jonas!

This should be fixed with 1.2.9.7.2.

Please don’t hesitate to let me know if you encounter any issue with this.

1 Like