How to change n navbar widget by overriding methods?

Question

Yii

I tried to implement a class change for the span togglebutton in the navbar widget, which would end up like this

<div class="navbar-header col-md-7 col-xs-7">
   button type="button"  data-toggle="collapse" data-target="#bs-example-navbar-collapse-2">
         <span class="ion-ios-keypad rotateOut"></span>
   </button>
</div>

implemented as follows created class ToggleButton which is inherited from NavBar here it is

namespace frontend\models;
use yii\helpers\Html;
use yii\bootstrap\Widget;
use yii\bootstrap\NavBar;
use yii\base\Object;
use Yii;
use yii\helpers\ArrayHelper;
class ToggleButton extends NavBar
{

    public $navheaderOptionClass=[];
    /**
     * @var string
     */
    public $toggleButtonOption;
    /**
     * Initializes the widget.
     */
    public function init()
    {
        Widget::init();
        $this->clientOptions = false;
        if (empty($this->options['class'])) {
            Html::addCssClass($this->options, ['navbar', 'navbar-default']);
        } else {
            Html::addCssClass($this->options, ['widget' => 'navbar']);
        }
        if (empty($this->options['role'])) {
            $this->options['role'] = 'navigation';
        }
        $options = $this->options;
        $tag = ArrayHelper::remove($options, 'tag', 'nav');
        echo Html::beginTag($tag, $options);
        if ($this->renderInnerContainer) {
            if (!isset($this->innerContainerOptions['class'])) {
                Html::addCssClass($this->innerContainerOptions, 'container');
            }
            echo Html::beginTag('div', $this->innerContainerOptions);
        }
        if(isset($this->navheaderOptionClass)) {
            echo Html::beginTag('div', [$this->navheaderOptionClass]);
        }else{
            echo Html::beginTag('div', ['class' => 'navbar-header ']);
        }

        if (!isset($this->containerOptions['id'])) {
            $this->containerOptions['id'] = "{$this->options['id']}-collapse";
        }
        if(isset($this->toggleButtonOption)) {
            echo $this->TogleButton($this->toggleButtonOption);
        }else{
            echo $this->renderToggleButton();
        }
        if ($this->brandLabel !== false) {
            Html::addCssClass($this->brandOptions, ['widget' => 'navbar-brand']);
            echo Html::a($this->brandLabel, $this->brandUrl === false ? Yii::$app->homeUrl : $this->brandUrl, $this->brandOptions);
        }
        echo Html::endTag('div');
        Html::addCssClass($this->containerOptions, ['collapse' => 'collapse', 'widget' => 'navbar-collapse']);
        $options = $this->containerOptions;
        $tag = ArrayHelper::remove($options, 'tag', 'div');
        echo Html::beginTag($tag, $options);
    }

    public function TogleButton($span){
        $bar = Html::tag('span', '', ['class' => 'icon-bar']);
        $screenReader = "<span class=\"sr-only\">{$this->screenReaderToggleText}</span>";

        return Html::button("{$screenReader}\n{$bar}\n{$bar}\n{$bar}", [
            'class' => $span,
            'data-toggle' => 'collapse',
            'data-target' => "#{$this->containerOptions['id']}",
        ]);
    }
    /**
     * Renders collapsible toggle button.
     * @return string the rendering toggle button.
     */

}?>

this is how I try to implement it in the form

use yii\bootstrap\Nav;
use frontend\models\ToggleButton;
$toggleButton= new ToggleButton();
$toggleButton::begin([
                'brandLabel' => false,
                'options' => [
                    'class' => 'navbar navbar-default navbar-fixed-top right Two col-md-5 col-xs-5 navbar-fixed-top',
                    'id'    =>'custom-bootstrap-menu'
                ],
                'containerOptions' => [
                    'class' =>  'collapse navbar-collapse navbar-menubuilder',
                    'id'    =>  'bs-example-navbar-collapse-1'],
                'renderToggleButton'=> $toggleButton->renderToggleButton('ion-ios-keypad rotateOut')
                     //The HTML attributes of the inner container.
            ]);
$toggleButton::end();

I get the following (full code with the nav widget, I didn’t tell you why you need it, just don’t be surprised why the answer is so big)

<nav id="w0" class="navbar navbar-default" role="navigation">
    <div class="container">
      <div>
        <button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#w0-collapse">
          <span class="sr-only">Toggle navigation</span>
          <span class="icon-bar"></span>
          <span class="icon-bar"></span>
          <span class="icon-bar"></span>
        </button>
      </div>
      <div id="w0-collapse" class="collapse navbar-collapse">
        <nav id="custom-bootstrap-menu" class="navbar navbar-default oneMe transparent" role="navigation">
          <div class="container">
            <div 0-class="navbar-header col-md-7 col-xs-7">
              <button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1">
                <span class="sr-only">Toggle navigation</span>
                <span class="icon-bar"></span>
                <span class="icon-bar"></span>
                <span class="icon-bar"></span>
              </button>
              <a class="navbar-brand col-md-14 col-md-offset-10 col-xs-24" href="/frontend/web/">
                <img src="http://crimea/frontend/web/foto/logo.png" alt="">
              </a>
            </div>
            <div id="bs-example-navbar-collapse-1" class="collapse navbar-collapse navbar-menubuilder">
              <ul id="w1" class="nav navbar-nav navbar">
                <li class="active"><a href="/frontend/web/site/index">Главная</a></li>
                <li class="dropdown">
                  <a class="dropdown-toggle" href="#" data-toggle="dropdown">По производителям
                    <b class="caret"></b>
                  </a>
                  <ul id="w2" class="dropdown-menu">
                    <li>
                      <a href="/frontend/web/firmcat/list?id=1" tabindex="-1">Алуштинский эфиромасличный совхоз-завод</a>
                    </li>
                  </ul>
                </li>
                <li class="dropdown">
                  <a class="dropdown-toggle" href="#" data-toggle="dropdown">Магазин 
                    <b class="caret"></b>
                  </a>
                  <ul id="w3" class="dropdown-menu">
                    <li><a href="/frontend/web/catalog/list?id=3" tabindex="-1">Каталог</a></li>
                  </ul>
                </li>
                <li><a href="/frontend/web/blog/list">Блог</a></li>
              </ul>
            </div>
          </div>
        </nav> 
        <div id="custom-bootstrap-menu" class="navbar navbar-default navbar-fixed-top right Two col-md-3 col-sm-4 col-xs-5 navbar-fixed-top" role="navigation">
          <div class="navbar-header">
            <button type="button"  data-toggle="collapse" data-target="#bs-example-navbar-collapse-2">
              <span class="ion-ios-keypad rotateOut"></span>
              <span class='itemCart'>0</span>
            </button>
          </div>
          <div id="bs-example-navbar-collapse-2" class="collapse navbar-menubuilder col-md-24 col-xs-24">
            <ul class="nav navbar-nav navbar">
              <li><a href="/frontend/web/site/logout">Sergalas(выйти)</a></li>
              <li><a href="/frontend/web/cabinet/index?OrderitemSearch%5Bid%5D=1">Личный кабинет</a></li>
              <li><a href="/frontend/web/cart/list">Корзина</a></li>
            </ul>
          </div>
        </div>

where do they come from, I have no idea

<nav id="w0" class="navbar navbar-default" role="navigation">
    <div class="container">
      <div>
        <button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#w0-collapse">
          <span class="sr-only">Toggle navigation</span>
          <span class="icon-bar"></span>
          <span class="icon-bar"></span>
          <span class="icon-bar"></span>
        </button>
      </div>
      <div id="w0-collapse" class="collapse navbar-collapse">

And the most interesting thing is that it does not close anywhere.