Buy me a coffee

Portfolio Active Items in Header Menu

Suppose you have a Portfolio Dropdown like this

Portfolio Active Items In Header Menu 01 Min

You want

  • Users click on Portfolio >> change its color + underline
  • Users are on Astrophotography >> change its color + underline
  • Users are on Professional >> change its color + underline
  •  …
    (like this Professional in screenshot)

Portfolio Active Items In Header Menu 02 Min

#1. First, you need to find Dropdown Item URL.
In my example, it is

  • Portfolio – /portfolio-nav
  • Astrophotography – /portfolio/astro
  •  Professional – /professional
  • Natural – /portfolio/nature
  • People – /portfolio/people
  • Places – /portfolio/places
  • Things – /portfolio/things

Portfolio Active Items In Header Menu 03 Min

Portfolio Active Items In Header Menu 04 Min

#2. Next, edit Astrophotography Page > Add a Code Block (anywhere on page)

Portfolio Active Items In Header Menu 05 Min

paste this code

<style>
header#header a[href="/portfolio/astro"] {
color: #e36b37;
border: 1px solid red;
display: inline-block;
}
</style>

Portfolio Active Items In Header Menu 06 Min

Result

Portfolio Active Items In Header Menu 07 Min

#3. Do similar with Natural Page, use this code into Code Block

<style>
header#header a[href="/portfolio/nature"] {
    color: #e36b37;
    border: 1px solid red;
    display: inline-block;
}
</style>

#4. Do similar with People, Places, Things, use this corresponding code
With People Page

<style>
header#header a[href="/portfolio/people"] {
    color: #e36b37;
    border: 1px solid red;
    display: inline-block;
}
</style>

With Places page

<style>
header#header a[href="/portfolio/places"] {
    color: #e36b37;
    border: 1px solid red;
    display: inline-block;
}
</style>

With Things page

<style>
header#header a[href="/portfolio/things"] {
    color: #e36b37;
    border: 1px solid red;
    display: inline-block;
}
</style>

#5. With Portfolio main item, you can find Page ID.
In my example, it is: #collection-66d7a1b374be9f435cd4e341

Portfolio Active Items In Header Menu 08 Min

Next, use this code to Custom CSS box

#collection-66d7a1b374be9f435cd4e341 header#header a[href="/portfolio-nav"] {
    color: #e36b37;
    border: 1px solid red;
    display: inline-block;
}

Portfolio Active Items In Header Menu 09 Min