I need to add an off-canvas menu to the very top of my site. However, I cannot get it to work. Examples Of what I need can be seen here: www.joomlart.com/demo/#purity_iii or here www.joomlart.com/demo/#ja_magz .. where the off-canvas toggle button is on line with the logo/top bar. So, as an example. say I wanted to add an off-canvas to the right side at the top of a regular t3 framework template...let's say Purity III, for example. I would do the following:

First, i'd create a file: "off-canvas-right.php" in the /templates/purity_iii/tpls/blocks/ directory, then add this...

Code:
<?php
/**
* @package T3 Blank
* @copyright Copyright (C) 2005 - 2012 Open Source Matters, Inc. All rights reserved.
* @license GNU General Public License version 2 or later; see LICENSE.txt
*/

defined('_JEXEC') or die;
?>
<?php
if (!$this->getParam('addon_offcanvas_enable')) return ;
?>

<button class="btn btn-default off-canvas-toggle right <?php $this->_c('off-canvas') ?>" type="button" data-pos="right" data-nav="#t3-off-canvas-right" data-effect="<?php echo $this->getParam('addon_offcanvas_effect', 'off-canvas-effect-4') ?>">
<i class="fa fa-bars"></i>
</button>

<!-- OFF-CANVAS SIDEBAR -->
<div id="t3-off-canvas-right" class="t3-off-canvas <?php $this->_c('off-canvas') ?>">

<div class="t3-off-canvas-header">
<h2 class="t3-off-canvas-header-title">Sidebar</h2>
<button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button>
</div>

<div class="t3-off-canvas-body">
<jdoc:include type="modules" name="<?php $this->_p('off-canvas-right') ?>" style="T3Xhtml" />
</div>

</div>
<!-- //OFF-CANVAS SIDEBAR -->

Next..... I would go to /templates/purity_iii/tpls/blocks/header.php and add this code snippet before the </header> tag:

Code:

<!-- OFF-CANVAS-RIGHT -->
<?php if ($this->getParam('addon_offcanvas_enable')) : ?>
<?php $this->loadBlock ('off-canvas-right') ?>
<?php endif ?>
<!-- //OFF-CANVAS-RIGHT -->



Then I'd go to the file: /templates/purity_iii/css/custom.css and add CSS rule:
Code:

.btn.btn-default.off-canvas-toggle.right {
right: 0;
left: auto;
}

and then last but not least...I would go to this file : /templates/purity_iii/templateDetails.xml and I would add this code.
Code:

<position>off-canvas-right</position>


Well, I have tried and tried and tried...but cannot figure out how to do this in socializer, where, in the header-top.php block is the socilizer toolbar module.

I am simply trying to add an offcanvas toggle button/menu on this top bar...lined up with the logo/search bar/notifications....

Thank you in advance! It means a lot.

Hi, paison

You'll not find module here ROOT/templates/socialize/tpls/blocks/header-top.php :)
This file contains only position for module.

Module is here: ROOT/modules/mod_community_toolbar/tmpl/default.php

Use Joomla! template override if you want to change something in module.

if you want to add another panel below JomSocial toolbar you could try to modify header-top.php

<!-- TOP HEADER -->
<?php if ($this->countModules('top-header')) : ?>
<!-- TOP-HEADER -->
<div id="top-header" class="top-fixed <?php $this->_c('navhelper') ?>">
  <jdoc:include type="modules" name="<?php $this->_p('top-header') ?>" />
</div>
<div id="top-header" class="top-fixed header2">
  <jdoc:include type="modules" name="top-header2" style="none" />
</div>
<?php endif ?>
<!-- //TOP HEADER -->

#top-header {
    height: 38px;
    position: fixed;
    width: 100%;
    z-index: 100;
}

Thank you for the informative and fast reply. It is greatly appreciated. I cannot get the offcanvas menu to work in the toolbar module. I appreciate the precise code you gave to assist me if I were to need a menu under the toolbar. With that said, I need the offcanvas option to work on the toolbar module at the very top...again, such as here www.joomlart.com/demo/#purity_iii or here www.joomlart.com/demo/#ja_magz . just like youtube's top header/menu...with the toggle by the logo....
What I am requesting is what is the exact code I need to put within ROOT/modules/mod_community_toolbar/tmpl/default.php
and beginning on what line? Thank you in advance....I appreciate the support...

Hi, paison.

Ok, here is the easiest way :) You don't need to edit any file :) Everything is in css.
Module position for toolbar is "top-header" and you can assign any other module to it e.g menu.
Then you'll need to add some css (best way to do it is create custom.css in Socialize css folder).

#top-header - you'll need to make it a bit bigger to fit additional content so change from 38px to about 100px;
prntscr.com/2xg22h

Then you'll need to add some css values to your added module (in my case it is menu): it must be fixed = "position: fixed" and need top margin as above it is JomSocial toolbar = "top: 38px".
prntscr.com/2xg252

Rest is simple styling in css.

thanks for the reply...Im confused, I am not trying to add anything like what your examples were. I am trying to add the php block offcanvas to the jomsocial module toolbar. Thank you for your patience. I am asking...what php code goes where inside the toolbar php file for the offcanvas menu to have a toggle button within the toolbar....by the logo........................

Hi, paison.

I'm sorry, I misunderstood. I tough that you want to add something below toolbar... and you want to add only a button there to show/hide panel at right...

Ok, it will be not so easy to achieve. I I'll point you to direction and you'll need more than only paste some code.

To add new div to template you could edit ROOT/templates/Socialize/tpls/default.php. You can create new block (you'll need to create appropriate file in "blocks" folder) or add it straight to that file.

Then you'll need to modify JomSocial toolbar view. Copy ROOT/modules/mod_community_toolbar/tmpl/default.php to ROOT/templates/Socialize/html/mod_community_toolbar. There you have two situations:

- view for logged in and
- view for guests

In first case you'll need add button code right under line 260, below this code:

<div class="navbar-inner">

I really appreciate your time and effort on this matter...thank you. So, I am not able to get it working...and So, I wanted to break down what you advised...and then answer with what I did...and hopefully we can solve this...

To add new div to template you could edit ROOT/templates/Socialize/tpls/default.php. You can create new block (you'll need to create appropriate file in "blocks" folder) or add it straight to that file.
So, I added the block 'off-canvas' to socializer tpls/blocks code:

<?php
/**
* @package T3 Blank
* @copyright Copyright (C) 2005 - 2012 Open Source Matters, Inc. All rights reserved.
* @license GNU General Public License version 2 or later; see LICENSE.txt
*/

defined('_JEXEC') or die;
?>
<?php
if (!$this->getParam('addon_offcanvas_enable')) return ;
?>

<button class="btn btn-primary off-canvas-toggle <?php $this->_c('off-canvas') ?>" type="button" data-pos="left" data-nav="#t3-off-canvas" data-effect="<?php echo $this->getParam('addon_offcanvas_effect', 'off-canvas-effect-4') ?>">
<i class="fa fa-bars"></i>
</button>

<!-- OFF-CANVAS SIDEBAR -->
<div id="t3-off-canvas" class="t3-off-canvas <?php $this->_c('off-canvas') ?>">

<div class="t3-off-canvas-header">
<h2 class="t3-off-canvas-header-title">Sidebar</h2>
<button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button>
</div>

<div class="t3-off-canvas-body">
<jdoc:include type="modules" name="<?php $this->_p('off-canvas') ?>" style="T3Xhtml" />
</div>

</div>
<!-- //OFF-CANVAS SIDEBAR -->


then I added it to the layout as a position...and I added it to the xml, making it a module position

Then you'll need to modify JomSocial toolbar view. Copy ROOT/modules/mod_community_toolbar/tmpl/default.php to ROOT/templates/Socialize/html/mod_community_toolbar. There you have two situations:
- view for logged in and
- view for guests

I need the off-canvas for logged in users only, which is a bonus at this point...


In first case you'll need add button code right under line 260, below this code:
<div class="navbar-inner">

But, I am not sure what you mean by this...I have tried several things... So assuming I am taking the code from the basebs3 t3 template ....Do you mean something like this?

<?php if ($this->getParam('addon_offcanvas_enable')) : ?>
<?php $this->loadBlock ('off-canvas') ?>
<?php endif ?>

</div>

<?php if ($this->getParam('navigation_collapse_enable')) : ?>
<div class="t3-navbar-collapse navbar-collapse collapse"></div>
<?php endif ?>

<div class="t3-navbar navbar-collapse collapse">
<jdoc:include type="<?php echo $this->getParam('navigation_type', 'megamenu') ?>" name="<?php echo $this->getParam('mm_type', 'mainmenu') ?>" />
</div>


And on the end the hardest part: you'll need a js script to open/close panel at left.
You could use altered collapse script from Bootstrap.
do you mean this? <?php if ($this->getParam('navigation_collapse_enable', 1) && $this->getParam('responsive', 1)) : ?>
<?php $this->addScript(T3_URL.'/js/nav-collapse.js'); ?>
<button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".t3-navbar-collapse">
<i class="fa fa-bars"></i>
</button>
<?php endif ?>

Again, thank you...and if you are unsure, can you please ask the socializer developer for me...it is important I figure this out...I hope, from the looks of it, that it is knowing what php to put where and what js to put where....with perhaps a little css custom....Thanks Michal...

Hi, paison.

We do not support customizations, I'm sorry.

What we can support:

Simple CSS tweaks - If you have problems with colors, backgrounds or borders, or if HTML elements overlap the menu dropdowns, for example, we can help.
Fast code adjustments - A quick code example to show what you need to change to achieve minor customization, HTML element removal or a layout position change is fine.
Minimal changes to core files - Although this is not recommended and has proven many times to be very bad practice if you're not a developer, we will assist with very minimal core code changes. (Example 1)

What we won't support:

Layout overhauls and making your site pixel-perfect - If the component works fine but you're not satisfied with the overall look and feel, you’ll need to hire a professional designer to customize the layout.
Changing the current functionality - JomSocial is delivered as is. All of its functions have been tested to work in common Joomla environments.
Changing the current functionality to achieve different behavior is not something we recommend. We don’t support it.
Adding new functionality - No matter how trivial, adding anything to the current base always requires time.
Moving HTML elements - Moving HTML elements in the layout is really not as easy as it sounds. What you’d think would be a ten-minute fix is more likely to be a ten-hour all-nighter. We’d really rather not.
Everything else that is not specifically mentioned in the "what can we support" list.