Unable to Style Active Link As it Looks on Hover in Studio Theme

Store Design
, ,

Topic summary

A user is experiencing styling issues with a custom liquid navigation section in the Studio Theme. The problem has two parts:

Current Issues:

  • When a link is active, only the <span> element receives styling instead of the entire <div>, unlike the hover state which styles correctly
  • Active link styling only applies to the current page, but the user wants it to persist across multiple related pages

Technical Context:

  • Custom liquid code creates navigation from a linklist called ‘tab-menu’
  • CSS includes hover and active states with matching styles (white background, rgba color)
  • The code appears to have formatting issues (reversed/garbled CSS in the post)

Status: The discussion remains open with no responses or solutions provided yet. The user is seeking help with CSS selector specificity and potentially liquid logic to maintain active states across page groups.

Summarized with AI on November 12. AI used: claude-sonnet-4-5-20250929.
1

I’ve added a custom liquid navigation section to my pages in the Studio Theme, but have been unable to figure out how to write the code so when the link is active it’s styled like it is on hover. Currently only the span is being styled when active instead of the entire div. I’d also like the link to stay active on multiple pages instead of just the current page, but am unsure how to code that.

Here is my current liquid code:


{% for link in linklists['tab-menu'].links %}
 

{{- link.title | escape -}}

{% endfor %}

And here is the CSS styling for it:

.tab-menu {
  display: flex;
  align-items: center;
  padding-left: 10%;
  margin: 0;
}
.tab-menu-link {
  padding: 2%;
  line-height: calc(1 + 0.3 / var(--font-body-scale));
  font-size: 1.4rem;
  font-family: inherit;
}
div a {
  text-decoration: none;
  color: rgba(var(--color-foreground), 0.75);
}
.tab-menu-link:hover {
  background: white;
  color: rgba(var(--color-background), 0.75);
}
.tab-menu-link-active {
  background: white;
  color: rgba(var(--color-background), 0.75);
}