[Motacore] Mobile Sidebar

This add-on that transforms your forum sidebar into an off-canvas menu when using a small screen device, such as a mobile phone. Without this add-on, when a user views a page that has a sidebar, that sidebar is pushed to the bottom below the main page content, often missed. This add-on provides easy access to the sidebar without having to scroll at all.


XenForo 2.0 & 2.1 (Manual Installation)

Upload the contents of the upload folder to the root of your XenForo installation. Finally, install the add-on from the Add-ons page of the admin panel.

XenForo 2.1 (Upload Installation)

If you've enabled installing add-ons by uploading them through the admin panel, you can simply install this like you would any other installed that way. Updates to newer versions of this add-on can be installed the same way.


All of this add-ons configuration is done through style settings. If you're site supports multiple styles, this lets you customize it based on each style.

In style settings, you'll find a new section (most likely at the very bottom), titled [Motacore] Mobile Sidebar. All properties are contained within here.


  • FontAwesome Icon
    This is the icon that's displayed on the sidebar handle when the sidebar is hidden. Keep in the mind that XenForo 2.1 has access to different icons than XenForo 2.0. By default, the icons pre-populated only work with XenForo 2.1. You can find the list of icons at FontAwesome: Icons for XenForo 2.0, Icons for XenForo 2.1. Clicking an icon takes you to a new page which has the icon information you'll need. For XenForo 2.0, this will look like: fa fa-arrow-left. For XenForo 2.0 this will look like: fas fa-arrow-left (the fas may also be far, among others, depending on the style you wish to use).
  • FontAwesome Icon Active
    Similar to above, this is the icon that's displayed when the sidebar is shown.
  • Sidebar Handle Position
    This determines where on the page the sidebar handle is shown. By default (50%), this places it in the vertical middle of the page. This setting should be in either percentage from the top or pixels from the top (such as 100px).
  • Animation Speed
    This setting controls how fast the sidebar slides open in seconds (or fractions of a second). Be sure to include the s at the very end.

Sidebar Handle

This provides various settings that control what the handle looks like, including background color and padding.

Sidebar Handle Active

This provides various settings that control what the handle looks like when the sidebar is open, including background color and padding.

Sidebar Container

This provides various settings regarding the container of the sidebar, such as the background color of the sidebar. The background color is important because without it, you'll see through the sidebar.

Sidebar Container Blocks

This provides various settings that are useful for how the widgets are displayed, such as padding. Without padding the widgets are pushed directly to the edges of the screen. Settings here are used to provide some padding and margins to make it display better.