Suppose you have a Portfolio Dropdown like this
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)
#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
#2. Next, edit Astrophotography Page > Add a Code Block (anywhere on page)
paste this code
<style> header#header a[href="/portfolio/astro"] { color: #e36b37; border: 1px solid red; display: inline-block; } </style>
Result
#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
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; }