Tips: Showing Active Page in a Custom Header

1 Kudo

We've had a few folks on GeoNet ask about how to show the active page in a Custom Header navigation menu. Due to the nature of Custom Headers being custom code, we cannot automatically detect active page. We can only do it for our out-of-the-box layouts, because we control the code and know what to expect. Furthermore, as you may have discovered using Bootstrap, placing the .active class on a page doesn't work because you write the header HTML at the site level for brand consistency, and you cannot modify your header HTML on the individual pages themselves to move the class to the now active page. However, the clever folks at Esri UK were able to find a CSS solution using the a[href] attribute. In this post, I'm going to break apart their CSS to illustrate how you can use the same techniques for your own Custom Header. Before we begin, it'll be useful if you already have a site created and a few pages.

(view in My Videos)

Custom Header HTML
First, you need to lay out the groundwork for your Custom Header. I'm going to use a basic Bootstrap 3 layout. In the Header panel of your site, under the Appearance accordion, select the Custom HTML/CSS radio option. Then in the Custom HTML/CSS accordion, in the HTML textarea, paste in my code or use your own. (If you use your own, consider using relative URLs in your page links and don't forget to check your mobile layout. If you remove Bootstrap's button that handles responsive layouts automatically, you'll probably want to compensate with media queries.)

<nav class="navbar navbar-inverse navbar-static-top">
  <div class="container">
    <div class="navbar-header">
      <!-- Don't remove button, it ties into the ID below and is what collapses your navigation automatically in mobile layouts. -->
      <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1" aria-expanded="false">
        <span class="sr-only">Toggle navigation</span>
        <!-- ^ This text is visible only to assistive technologies -->
        <span class="icon-bar"></span>
        <span class="icon-bar"></span>
        <span class="icon-bar"></span>
      </button>
      <a href="https://css-monster-qa-pre-hub.hubqa.arcgis.com/">
        <img alt="Logo" src="https://user-images.githubusercontent.com/7389593/71588103-42d41600-2aee-11ea-91a3-927ed21f3b57.png">
      </a>
    </div>
    <div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
      <ul id="highlight-hub-pages" class="nav navbar-nav navbar-right">
        <li class="hp-subitem"><a href="/pages/resources">Resources</a></li>
        <li class="hp-subitem"><a href="/pages/blog">Blog</a></li>
        <li class="hp-subitem"><a href="/pages/contact-us">Contact Us</a></li>
      </ul>
    </div>
  </div>
</nav>‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍

On line 1, I used the class navbar-inverse instead of navbar-default. This is mostly because we have more styling attached to navbar-default because it's used in our out-of-the-box patterns. To avoid any unnecessary style collisions, I'm going to use navbar-inverse, but I tested this with navbar-default and that worked just as well. navbar-inverse is by default, a dark themed navbar, although it's hard to tell with my site since I also use a dark theme, but you can style it however you'd like in your CSS panel.

On line 17, I have added a unique ID called highlight-hub-pages. This could be anything, but it's useful to have a unique name on the unordered-list (ul) that contains your menu links. I have also added a class on each one of the child list items (lines 18-20) called hp-subitem.

Lines 18-20 also contain our page links. These are relative URLs because we're not putting the whole URL, we're just putting the path we want appended to the end of our site URL. (To see an example of an absolute URL, look at line 12 for comparison, which is my site's homepage. Line 12 does not have to be absolute, I simply did it for reference.)

Custom Header CSS
In your Custom HTML/CSS accordion, scroll down to the CSS textarea. I removed all the CSS that came with the default site template so that I could show a barebones example for this post, but if you're using your own code for your header, you'll likely have more in this block.

.navbar-inverse .navbar-nav > li > a {
  background-image: none;
  background-color: transparent;
  padding-left: 0;
  padding-right: 0;
  margin-left: 15px;
  margin-right: 15px;
  color: #ffffff;
}

#highlight-hub-pages .hp-subitem a:hover,
#highlight-hub-pages .hp-subitem a:focus {
  background-image: linear-gradient(to bottom, transparent 80%, #ffffff 81%, transparent 82%);
}‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍

Line 1 targets the necessary navbar-nav menu and its children and lines 2-8 reset the existing styles. If you're content with the solid bottom border that comes with our sites by default, then you don't need lines 2-8, and you'd replace line 13 with:

background-image: linear-gradient(to bottom, transparent 92%, #ffffff 93%, #ffffff 100%);‍‍‍

Lines 11-14 set our hover and focus states, which mimic the same visual pattern that we'll be using for the active page indicator.

Save your site and we'll continue onto the pages.

Styling Active Page Menu Item

Return to your Customize panel and select the Pages icon in the corner, adjacent to the panel title. Find one of the pages that you linked to in your Custom Header HTML and select the title to open it. Once your page is open, select Layout and drag a Text Card onto your page. Select the Gear icon to edit your Text Card. Then select the brackets </> icon from the toolbar, which opens Code View. Paste the following Embedded CSS into the Code View and update the relative URL to that of your page.

<style>
#highlight-hub-pages .hp-subitem a[href="https://community.esri.com/pages/resources"] {
    background-image: linear-gradient(to bottom, transparent 80%, #ffffff 81%, transparent 82%);
}
</style>‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍

If you don't remember the slug for this page, you can return to Customize and select Page Info and your relative URL be listed at the end of the Page Slug section. Once you have updated your a[href] attribute with the URL for the current page, toggle the code view bracket </> icon back off, and Save your changes.

Also, if you were using our default active styling as previously mentioned, simply use that linear-gradient (92%-93%-100%) instead.

You will need to add this style section via the Text Card to each page you featured in your Custom Header and you will need to update the a[href] attribute to the active page's URL each time, but after you complete those steps, you essentially have a custom header that displays active page markers.

BrittanyZucchetto2 · ‎11-08-2021

Really helpful article, thank you @KlaraSchmitt .

Just one thing to note since I had to figure this out: the a[href] component in each page needs to be consistent with your header a href link, e.g. if relative path is used in header, then in the style of each page, it needs to be relative path as well.