CMS Development

FloStu
Contributor | Gold Partner
Contributor | Gold Partner

Custom Menu Active Page

Hi,

 

how do i get it done that the current page is always highlighted from my custom menu? In another post it was mentioned that the "custom-menu-primary" automatically activates the status "active", but unfortunately this didn't work out

 

 

 <div id="navbar" class="navbar-collapse collapse">
	<ul class="nav navbar-nav navbar-right">
		<li><a href="/link-1">Link 1</a></li>  
		<li><a href="/link-2">Link 2</a></li>
		<li><a href="/link-3">Link 3</a></li>
		<li><a class="btn-info" href="/button-link">Button</a></li>
	</ul>
</div>

 

Thanks

Flo

0 Upvotes
4 Replies 4
dennisedson
HubSpot Product Team
HubSpot Product Team

Custom Menu Active Page

@FloStu, did you check the code? 

You need to add styles for the active state.  I dont believe that is out of the box.

 

do you have a preview link you could share?

Thanks,

Dennis




HubSpot Community Developer ShowMake sure to subscribe to our YouTube channel
where you can find the HubSpot Community Developer Show
0 Upvotes
mIIwaukee
Contributor | Diamond Partner
Contributor | Diamond Partner

Custom Menu Active Page

Here's another approach for anyone that's interested. Create a module for editing navigation. When including it in a template:

 

{% for item in module.nav_item %}
<li class="nav-item">
<a class="nav-link {%if content.id == item.link_to.url.content_id %}active{% endif %}" href="{{item.link_to.url.href}}">{{ item.link_title }}</a>
</li>
{% endfor %}

John
Top Contributor | Platinum Partner
Top Contributor | Platinum Partner

Custom Menu Active Page

You need js.

$("#navbar a").each(function() {
    if ((window.location.pathname.indexOf($(this).attr('href'))) > -1) {
        $(this).parent().addClass('active');
    }
});

 



I like kudos almost as much as cake – a close second.

0 Upvotes
FloStu
Contributor | Gold Partner
Contributor | Gold Partner

Custom Menu Active Page

Hey @John,

 

thanks a lot for the help and the fast support. The JS works, but Home "/" is always set to active (sorry, I forgot to mention home), how do I manage that it is not always set to active?


Would it also be possible to activate the home "/" when subpages are opened from the content? These subpages cannot be accessed via navigation.

Home Subpages

Pillar 1 > /home/pillar-page-1

Pillar 2 > /home/pillar-page-2

Pillar 3 > /home/pillar-page-3

 

@dennisedsonYes, I know that I need additional css for the active status.

 

Thanks

Flo

0 Upvotes