How to add a fixed control panel navigation to custom themes

The popularity of single-column layouts has lead to the creation of many great websites. However, this design also limits usability for control panel users and authorized users, who often interact with the site more directly. In two-column layouts, a logged-in user has options to edit a page and publish a new blog post through the support column. Adding a fixed control panel navigation is a great way to extend two-column usability to single-column layouts.

Public themes are equipped with this feature; however, custom themes created prior to this feature rollout will need to be manually upgraded.

To add a fixed control panel nav, you will need to:

  1. Set permission logic in layout.html
  2. Style nav in theme.scss
  3. Upload assets

First, add the partial template and logic to layout.html. Since the partial file is available to public themes, it is accessible for custom themes as well. To include the partial, add the following to layout.html within the body of the document:



This logic may look familiar as it is the same check used for the supporter nav side column. Here, we're checking to see if the current request has a permission level, and if so, we're including the _cp_nav.html partial. Since _cp_nav.html is part of the public theming system, you don't need to recreate the file. However, if you'd like to view the file or alter the code, a _cp_nav.html file is included in the upgrade kit.

Secondly, the fixed control panel nav needs styling. You can find the style sheet bundled in the upgrade kit below. Simply add the styles to the theme's theme.scss file.

Lastly, upload fader-controls.png. The image must be uploaded at the theme level and not the page level at Website > Theme > Current custom theme > Files.

Once completed, you should see the fixed control panel navigation button toward the bottom right of your screen.

If you’re unclear on how this feature works, please ask a question. If you would like to see changes to this feature, please submit a suggestion.