Home tab always active

08-14-2019 04:21 PM
New Contributor II

I've added pages to my hub site and added links to the second-tier header via custom html/css. However, no matter what page I'm currently on, the home navigation tab (<li>) is still set to active. Am I doing something wrong to link to these pages? Or how can I overwrite this css class?

0 Kudos
3 Replies
Esri Contributor

Hello Chandra,

Unfortunately, having an active page marked in a custom Header/CSS implementation is not possible. This is because pages inherit the site's branding to maintain consistency. You may have noticed that you don't have the ability to customize header/footer/theme at the page level and so if you're setting an active class on the homepage for a link, it will stay that way on all other pages because you set it from the homepage.

If you were building a static HTML website, you'd paste the header code section at the top of the page and change the active menu item manually, or you'd use Javascript to change it for you. However, Hub does not support static website creation and due to security vulnerabilities and also past issues where customers would import additional Javascript frameworks that would collide with our own code and break their sites, we no longer permit Javascript customizations. If you choose to use one of our two dynamic header options though, the active page will automatically highlight for you as you move around your pages.

Occasional Contributor

Hi Klara,

Are there any plans to make this possible?  It greatly reduces the benefits of a custom header if you can't easily highlight to the user what page they are currently on.



0 Kudos
Esri Contributor

Hi Colin,

As of now, there are not any plans on our side for adding WYSIWYG (What You See Is What You Get) controls to custom headers. We make custom headers an available option, but we do prefer you use our suggested layouts if you want us to manage mobile and active states for you. If you, the author, of a custom header can achieve a CSS only solution for active pages - then it's entirely possible. You might look into using a[href] as an attribute selector in your CSS.

0 Kudos