Menu option "active-branch"

[jmgonzalez67]

I have one menu in this blog:

https://blog.strands.com/

I need to mark the "All" option as active when we access the site and then deactivate it when we access any of the other options.

Thank you very much and best regards.

[cathalhopper · Accepted solution]

Hi @jmgonzalez67 !
The ideal way to do this would be to edit your current function that does this to accomodate the All button too!

If for any reason you can't do that one quick way of doing this would be by using the following code in your blog listing template, in the Additional markup before </body> box on the right pane in the design manager.

<script>

{% if content.absolute_url == "https://blog.strands.com" %}

document.querySelector('#hs_menu_wrapper_module_1603711816926175_').children[1].children[0].className += "active active-branch";

{% endif %}

</script>

It's important to add this in the "before </body>" tag, or otherwise to use a function that waits for the DOM elements to load, otherwise onload the styling would be overwritten.

After checking your page I saw that the styling is applied by appending the active active-branch to your class - there's probably a few better ways of doing this, but that should work for now!

Edit: as per @piersg reply below they list an ideal way to do this if you're editing your blog template or creating a new one using the blog_tags function - the fix above is specifically used as the set up uses a menu and no blog tag functions which I should have mentioned 🙂 Thanks for the advice @piersg !

[jmgonzalez67]

Hi @cathalhopper ,

I have tried what you tell me and I understand what your code has to do, but it still doesn't work.

Right now I have the code before the body, but as you can see, it does not work correctly.

Thank you very much!

[jmgonzalez67]

Hi @cathalhopper 

I have finally been able to fix the problem.

I have modified your code a bit and now it works correctly.

<script>

{% if content.absolute_url == "https://blog.strands.com" %}

document.querySelector('#hs_menu_wrapper_module_1603711816926175_ ul').children[0].className += "active active-branch";

{% endif %}

</script>

Thank you very much and best regards!

[piersg]

Hey @jmgonzalez67, it looks like you solved this, but for anyone else viewing this question you can do something like the below. The advantage of this is that it requires no additional JS/jQuery, it can be all be done using HubL.

{% set my_tags = blog_tags('default', 250) %}
<a href="{{ group.absolute_url }}" class="button{% if request.full_url == group.absolute_url %} active{% endif %}">All</a>
{% for item in my_tags|sort(False, False, 'name') %}
  <a href="{{ blog_tag_url(group.id, item.slug) }}" class="button{% if page_meta.html_title|split(' | ')|last == item %} active{% endif %}">{{ item }}</a>
{% endfor %}

Edit: sorry, forgot to add "All" button