Off-Canvas menu icon

ptwd

For some reason, when I have Development Mode = ON in the T3 bs3-blank template, the off-canvas menu icon is the usual "hamburber" style icon (blue square with 3 white bars). But when I turn Development Mode = OFF, it becomes just a blue square (no white bars). As near as I can tell, it's because it's using different CSS style sheets in each case. When Dev Mode is ON, it uses [site]/templates.t3_bs3_blank.less.off-canvas.less.css but when Dev Mode is OFF, it uses [site]/off-canvas.css. Off-canvas.css doesn't seem to have the styles to produce the white bars, whereas the template css does.

It's not the end of the world, and I could override it from custom.css probably, but I don't understand why it's behaving this way. I'm not sure if I'm doing something wrong or if it's a quirk/bug, and I'd rather not override the CSS if the template will do it itself.

Thanks in advance for help with this. 🙂

Ninja

ptwd

Hi
Your custom theme is missing the style for the icon.
Add this code in custom.css file to fix it.


.off-canvas-toggle span.bar-first {
  top: 18px;
}
.off-canvas-toggle span.bar-mid {
  top: 24px;
}
.off-canvas-toggle span.bar-last {
  top: 30px;
}
.off-canvas-open .off-canvas-toggle span.bar-mid {
  display: none;
}
.off-canvas-open .off-canvas-toggle span.bar-first {
  top: 24px;
  transform: rotate(45deg);
}
.off-canvas-open .off-canvas-toggle span.bar-last {
  top: 24px;
  transform: rotate(-45deg);
}

.off-canvas-toggle span {
    background-color: #ffffff;
    display: block;
    height: 2px;
    position: absolute;
    left: 15px;
    width: 20px;
    transition: all 0.25s;
}

Regards

ptwd

Hi Pankaj. Yes, I'm aware that it's not in my custom.css, but it is a built-in style in the template's css. That means it should be available to the template, but for some reason when I turn Dev Mode OFF, it's not there. It doesn't quite make sense to me that (a) the icons are different whether Dev Mode is on or off, and (b) that I should have to manually add something that is already there in the template's css. It seems to me something isn't working right. Do you see what I mean? I'm aware that I can add it manually, but I'm concerned that when I add something manually that's already in the template's css, I'm inviting complication. Does this make sense? In other words, why isn't the classic icon available in the off-canvas.css when it is there in the template's css?

aman204

ptwd Have tried replicating the same and appears like some coding changes in specific template file /templates/t3_bs3_blank/tpls/blocks/off-canvas.php with latest T3 Package i.e. 2.7.1 has changed the view output of particular icon and the css rule-sets to display the same arent appearing in responsive mode with core css file output. It had appeared fine with older T3 version in both modes - development mode (on/off)

For fix, You can change this :

<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 class="bar-first"><span class="hidden">bar</span></span>
  <span class="bar-mid"><span class="hidden">bar</span></span>
  <span class="bar-last"><span class="hidden">bar</span></span>
</button>

<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>

in file reference given above or either add the suggested css snippet by Pankaj. This will work fine in both modes - development mode (on/off)

Will also share this with JA Dev. Team so as to include the fix in next version update, either ways 🙂

ptwd

Hi Aman, Thank you for acknowledging this. It sounds like it is indeed a bug, rather than something I'm doing wrong.

Thank you for the fix, but which file am I looking for this in? It seems to be a PHP file, but which one?

Thanks

[Edit: Other question deleted, since I see you answered it already. ]

Ninja

ptwd
Hi
The file is /templates/t3_bs3_blank/tpls/blocks/off-canvas.php
When you create custom theme, you need to compile less to css file as well so less file changes will override in css files.

Regards

ptwd

Hi Pankaj. I was actually asking about the file that Aman204 referred to. It contains PHP, so it's definitely not a CSS file.

Yes, I knew that the styles were in off-canvas.css. Just so you know: I had already tried converting LESS-to-CSS, thinking that might be what was needed, but unfortunately it didn't fix the problem.

It seems this is an actual bug in the latest T3 template, which Aman said he would notify the team about.

aman204

ptwd Hi

Have notified JA Dev. Team about the same and expected to be fixed at core level in next version upgrade. The file reference mentioned by Pankaj is the similar one as given by me in https://member.joomlart.com/forums/d/1958-off-canvas-menu-icon/4

/templates/t3_bs3_blank/tpls/blocks/off-canvas.php where you can change the code reference

If you wish to have the changes intact in mere future while updating to new version launch, This documentation will be of help which states that you can add override of the relative file in local folder

ptwd

Hi Aman. In https://member.joomlart.com/forums/d/1958-off-canvas-menu-icon/3 you gave me different lines of code for the button, but I couldn't find it in either off-canvas.css or template.css. Since it contains PHP code, it seems like it would be a PHP file, no a CSS file. So I'm not sure which file I should be replacing the button code in.

aman204

ptwd You may check your site in responsive mode as I have changed the respective code in specific file and it appears fine as envisaged

Kindly clear your browser cache if changes dont reflect

Ref: Screenshot showing the file and code snippet which has been changed

ptwd

Oh! I am so sorry. I saw "off-canvas" and assumed it was the CSS file and didn't see the PHP file extension. Thank you very much!

FYI: Just so you know, as your Dev team creates the fix for the next update, this new icon is a little different from the Dev-Mode-OFF icon (the bars are smaller in the new one).

Many thanks for your help, Aman and Pankaj. 🙂

aman204

ptwd Nice it works fine now for you

Sure, Will keep your suggestion in loop 🙂