Add option to only apply at certain breakpoint / screen width

Created on 28 March 2024, 8 months ago
Updated 28 August 2024, 3 months ago

Problem/Motivation

On the site I'm working on the nav turns into a burger menu at 1000px.
When the viewport is wider than this everything works great.
When the viewport is narrower than this stickynav just causes the page to jump around.

Steps to reproduce

Setup sticky nav so the Selector is for an element that is hidden at a certain breakpoint.
View the behavior after the element is hidden.

Proposed resolution

My first thought was just checking if the target element was visible.
But the target element may still be visible at smaller breakpoints, just styled as a burger instead of a full menu.

So instead I think the config screen needs a minimum and maximum width fields.

Remaining tasks

Write the patch

User interface changes

Add minimum and maximum width fields to StickynavSettingsForm.

API changes

None

Data model changes

None

Feature request
Status

Needs review

Version

1.4

Component

Code

Created by

🇬🇧United Kingdom dahousecat

Live updates comments and jobs are added and updated live.
Sign in to follow issues

Merge Requests

Comments & Activities

Production build 0.71.5 2024