Joomla Templates Club 406,261 posts

[cnventures Friend cnventuresJoin date: November 2015Posts: 13Downloads:8Uploads:1 Thanks: 3]

#782851

Hi, we’ d like:

• The off canvas menu of our site to be displayed only in mobile devices.
• Positioned next to the logo, to avoid confusions to our users with the green button on the right of the screen.

How could we do that?

Thanks in advance,

Tomas

[Adam M Moderator Adam MJoin date: May 2014Posts: 5159Downloads:33Uploads:66 Thanks: 95 Thanked: 1271 times in 1235 posts]

#791722

Hi @cnventures,

Please follow these steps :

1. Open file templatesuberacmheadertmplstyle-5.php and move this block :

<?php if ($tplparams->get('addon_offcanvas_enable')) : ?>
    <?php $t3doc->loadBlock ('off-canvas') ?>
<?php endif ?>

then search for the logo part :

<?php if($logoImage): ?>
<div class="logo-image">
    <a href="<?php echo $logourl ?>" title="<?php echo strip_tags($sitename) ?>">
            <img class="logo-img" src="<?php echo $logoImage; ?>" alt="<?php echo strip_tags($sitename) ?>" />
        <span><?php echo $sitename ?></span>
    </a>
    <small class="site-slogan"><?php echo $slogan ?></small>
</div>
<?php else: ?>

and place it before the logo as below :

<?php if ($tplparams->get('addon_offcanvas_enable')) : ?>
    <?php $t3doc->loadBlock ('off-canvas') ?>
<?php endif ?>
<?php if($logoImage): ?>
<div class="logo-image">
    <a href="<?php echo $logourl ?>" title="<?php echo strip_tags($sitename) ?>">
            <img class="logo-img" src="<?php echo $logoImage; ?>" alt="<?php echo strip_tags($sitename) ?>" />
        <span><?php echo $sitename ?></span>
    </a>
    <small class="site-slogan"><?php echo $slogan ?></small>
</div>
<?php else: ?>

1. Create new folder templatesuberlocaltplsblocks and copy file templatesubertplsblocksoff-canvas.php then place it in new folder. Open the file and have a look at the first line of code :

<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') ?>">
  <span><?php echo JText::_( 'TPL_MENU' ); ?></span> <i class="fa fa-bars"></i>
</button>

change attribute data-pos="right" to data-pos="left".

1. Open file templatesubercsscustom.css (if you don’t have this file, just create a new one) then add this code :

@media (min-width: 768px) {
     .off-canvas-toggle {
          display: none;
     }
}
@media (max-width: 768px) {
     .off-canvas-toggle {
          float: left;
          border: none;
          margin-right: 20px;
     }
}

[Author]

Posts