Joomla Templates Club 406,261 posts

[Joe Chan Friend Joe ChanJoin date: September 2014Posts: 25Downloads:0Uploads:9 Thanks: 5 Thanked: 3 times in 1 posts]

#200035

Hi all,

Currently the toggle button and/or off-canvas menu toggle is located in the topbar.

How can I move the toggle button to header section for mobile(i.e. left or right of logo)

Thanks in advance.

[Nazario A Friend Nazario AJoin date: April 2013Posts: 1183Downloads:0Uploads:406 Thanks: 91 Thanked: 284 times in 263 posts]

#543606

@koonline,

Do you want the Relocate toggle button to look like this image ?

If so, pls do as following:

– Open file: /templates/your_template_name/tpls/blocks/topbar.php then find and remove this code:

<!-- Brand and toggle get grouped for better mobile display -->
<div class="navbar-header pull-right">
<?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 ?>

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

– Open file: /templates/your_template_name/tpls/blocks/header.php then add this rule:

<div class="col-xs-2 hidden-md custom">
<!-- Brand and toggle get grouped for better mobile display -->
<div class="navbar-header pull-right">

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

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

</div>
</div>

– Open file: /templates/your_template_name/css/custom.css (if not exists, pls create new one) then add this rule:

@media (max-width: 768px) {
#t3-header .col-xs-2.custom {
padding: 0;
}
.off-canvas-toggle {
margin: 0;
}
}
@media (min-width: 980px) {
.hidden-md {
display: none;
}
}

Let me know if this helps

---

Attachments:

1. 
2. 
3. 

[Author]

Posts