Jump to content

[Share] Portfolio Active Items in Header Menu

Recommended Posts

Suppose you have a Portfolio Dropdown like this

image.png.30a8acdb86b7002c015a3ecf692fe696.png

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)

image.png.46ec0891617185b2fedaa8959db101ca.png

#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

image.png.46ec0891617185b2fedaa8959db101ca.png

image.png.95d6f392523f93080658d94b4c2517e4.png

image.png.6304e1b2e746dd82d4af8621669648b0.png

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

image.thumb.png.9fd40facef4de42979ec6ded3a543e3d.png

Paste this code into Code Block

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

image.png.b5ad1cf3bea0633006c212535cf755bb.png

Result

image.png.35394bd84ee3fe3be03fb62465d3b25b.png

#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 page, you can find Page ID.

In my example, it is: #collection-66d7a1b374be9f435cd4e341

image.png.7f6e1822961014c8cefae9e22b12f1a8.png

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;
}

image.png.49eafb1e3585b31530945228d0d0f8a7.png

Email me if you have need any help (free, of course.). Answer within 24 hours. 
Or send to forum message

Contact Customer Care - Learn CSS - Buy me a coffee (thank you!)

Link to comment
  • Replies 0
  • Views 111
  • Created
  • Last Reply

Top Posters In This Topic

Popular Days

Top Posters In This Topic

Posted Images

Create an account or sign in to comment

You need to be a member in order to leave a comment


×
×
  • Create New...

Squarespace Webinars

Free online sessions where you’ll learn the basics and refine your Squarespace skills.

Hire a Designer

Stand out online with the help of an experienced designer or developer.