Panel Width

Setting the Panel Width via CSS variable

Since v1.8, ShiftNav supports setting the panel width via the CSS variable --shiftnav-panel-width.

In the future, we’ll likely turn this into a setting, but for now, the width can be controlled by setting the variable in your CSS Tweaks.

/* Setting the panel width to a static value */
body{
  --shiftnav-panel-width: 320px;
}

Default Panel Width Value

The default panel width value provides a fluid panel width to maximize the menu’s responsiveness.

:root{
    --shiftnav-panel-width: clamp(min(290px,calc(100vw - 48px)), min(calc(100vw - 48px), 600px), 100vw);
}

This clamp function essentially says that the browser should render the panel width as:

Ideally, 48px less than the viewport width (leaving space for the toggle), but no more than 600px
At a minimum of 290px or 48px less than the viewport width, whichever is smaller
At a maximum of the full viewport width

It’s recommended that if you want to adjust this, you also use a clamp function to define how the panel should be sized based on the viewport width.

How to make the panel full width

This is the most likely use case for this variable

body{
  --shiftnav-panel-width:100vw;
}

If you make the panel full width, remember to switch on the close button within the panel so that the user can close the panel after opening it.

How to make the panel a static width

If you’d like to disable the fluid menu width, you can set a static width:

/* Setting the panel width to a static value */
body{
  --shiftnav-panel-width: 320px;
}

However, given that you don’t know what size device the user is viewing your site on, it’s still likely a good idea to use a clamp function:

/* Define a preferred static value, but use a clamp function for better device support */
body{
  --shiftnav-panel-width: clamp(200px, 320px, 100vw);
}

How to make the panel a relative width

If you’d like to make the panel always a specific percentage of the viewport, you likely want to use vw units. For example, making the panel 80% of the viewport:

body{
  --shiftnav-panel-width:80vw;
}

Again, a clamp function is advisable here. You probably never want the menu to be below a certain width for usability, or above a certain absolute pixel value on wider screens

body{
  --shiftnav-panel-width:clamp(300px, 80vw, 500px);
}

ShiftNav