A–Z Index Styles (SCSS)
Styles the [az_index] letter bar as a row of buttons that stays visible while scrolling, and lays out each letter's entries in columns.
Opens WPIDE on
Code
$sticky-top: 0;
$chip-bg: color-mix(in srgb, currentColor 8%, transparent);
.az-index-nav {
position: sticky;
top: $sticky-top;
z-index: 5;
padding: 0.5rem 0;
background: var(--wp--preset--color--base, Canvas);
a {
min-width: 2rem;
border-radius: 4px;
background: $chip-bg;
text-align: center;
text-decoration: none;
}
}
.az-index {
section {
scroll-margin-top: 4rem;
}
ul {
columns: 3 12rem;
padding-left: 1.2em;
}
}
html {
scroll-behavior: smooth;
}
@media (prefers-reduced-motion: reduce) {
html {
scroll-behavior: auto;
}
}Notes
Set $sticky-top to the height of a fixed header if your theme has one.
How to add this snippet
- Install WPIDE on your WordPress site (it is free) and open Code Snippets.
- Use snippet above adds it from the library in one click. Or copy the code into a new snippet with the same code type.
- It is added inactive: review the code and settings, then switch it on.