Too many links cause horizontal overflow

UX
1

Any chance a break-point may be implemented so that when the horizontal screen space is below a certain threshold, the custom header links will disappear? Currently it remains on screen and is just cut off when you shrink to the screen within a certain threshold.

2 Likes
2

If not available directly in the component, it is easily doable with CSS in a custom theme/component, especially since each link has a unique class name.

Example, where I hide the first link at a defined breakpoint.

.most-liked-custom-header-links {
    @include breakpoint('extra-large') {
        display: none;
    }
}

You can find the breakpoints list here:

2 Likes