Create a template / theme with a sidebar design

More and more designs are made with a side bar which contains the logo, the menu, and few other things. This sidebar shall always be visible and scrollable on desktop, and shall go on the top on mobile.

Read the few steps on how to create your sidebar design with Template Creator CK, for Joomla! or Wordpress.

STEP 1 : Create the sidebar wrapper

The sidebar will be a wrapper that can contain multiple elements : logo, menu, etc ...

In the interface you must add a new wrapper bloc on the top of your template / theme. Give the name sidebar to the wrapper. Inside this wrapper you can add a logo and a menu (you can use a vertical menu, or single menu block for this).

STEP 2 : Custom CSS

This step is easy but this is the most important part, as it will transform the wrapper into a sidebar. We will need the following CSS code

#sidebar {
  width: 150px;
  position: fixed;
  left: 0;
  top:0;
  bottom: 0;
  overflow: hidden;
}

#sidebar > .inner {
  margin-right: -20px;
  overflow-y: scroll;
  height: 100%;
}

body {
  padding-left: 150px;
}

Firstly we place the sidebar on the left of the page and give it the height of the visible screen.

Secondly we use a css technique to make it scrollable (if you put more content in the sidebar than the height of the screen, you shall be able to scroll) and hide the scrollbar to make it more beautiful.

Thirdly we tell the body of the page to move 150px from the left, to let the place for the sidebar. Then the body / content will start exactly where the sidebar ends. You can change the both 150px values in the CSS code to adapt the sidebar width.

Now we need to place this css code into the template, but not in the custom.css file ... Why ? Just because we want this sidebar only to appear like this on computers. On tablets and phones we want to have it on the top with a mobile menu.

So take this code and place it in the custom css area in the Responsive popup >> Computer / Other resolutions.

That's all ! We have now finished our sidebar design. You can continue to add some elements in your template / theme, add some other wrapper or modules like you want.

You can download the template and the gabarit to import into Template Creator CK if you want to check how it is made. You can also watch the live demo of the template / theme to check the result.

  Live demo of the Barber template / theme

  Download the template and gabarit