All Collections
Website
Theming
Template updates
Add fixed control panel navigation to custom themes
Add fixed control panel navigation to custom themes

Public themes are equipped with fixed control panel nav, but custom themes created prior to this feature rollout must be manually upgraded.

Updated over a week ago

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.

The editor will look like this when you are logged-in and looking at your front facing website.

For example, we have Admin access to nationbuilder.com and on a live page we see this:

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

Add fixed control panel nav

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:

{% if request.current_user.is_intern? %}
{% include "cp_nav" %}
{% endif %}

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.

Did this answer your question?