In this week’s iThemes Builder 101, we take a closer look at the latest Builder theme — Easton. More specifically, we delve into the unique off-canvas navigation system featured in Easton and how you can utilize it for your site.
New Off-Canvas Navigation
One of the most noteworthy features about the Easton theme is its unique off-canvas navigation system. What this effectively does is position the navigation off to the right of what appears in the browser, regardless of what size the viewport is.
This is helpful for freeing up some extra real estate on your site, but is also extremely useful for catering to mobile users who are viewing your site on devices with much smaller screens than desktop users.
The only way to pull in the navigation is to click the menu button on the top right, which will cause the navigation to be pulled in. There is also a button within the navigation itself to close the navigation, pushing it back outside the browser. This is done by using jQuery to add and remove classes when the menu button is pressed.
There are many different ways to customize the Easton theme. One of the most simple is changing out the default site header and/or subheader. To do this, simply go into the Customize option in your Appearance menu to visit the Customizer page. Here you’ll find options which allow you to quickly and easily replace the header and subheader text, or replace them with an image logo.
You can also use the classes that Easton calls to pull in the off-canvas navigation to style it. In the case of the “Nav with Logo” style, this class is called “.nav-with-logo ul”. This will allow you to do a lot more styling, but remember that much of the CSS here needs to exist for the off-canvas navigation to work.
Experiment with Adding a Sidebar to the Navigation
So sure you can change basic styling fairly easily, but what about adding a widget area? Since it’s a navigation system, you can’t really add a widget bar.
It is possible to add a sidebar, but as of right now, it’s highly experimental. So much so, that the theme will tell you so itself. To even enable the option, you’ll need to go into your functions.php file and add a line of code that will enable support for sidebars.
Now when you go to edit your Navigation Module settings, you’ll see a new dropdown for Sidebars, along with a message stating that they are still experimental for this module. If you do enable them, you’ll notice that they won’t actually appear on the page. You will need to style them yourself, which will require a lot of custom CSS. You can find more info on how to do that in the iThemes Codex.