CODEWITHSUNDEEP
phpyii2
WorldEater
WorldEater

Reputation: 11

Yii2 remove div tags from NavBar

I'm trying to build admin panel based on Admin LTE, it uses bootstrap 4.0. I'm using a NavBar in my main.php yii2 layout like this:

 <?php
    NavBar::begin([
        'brandLabel' => Yii::$app->name,
        'brandUrl' => Yii::$app->homeUrl,
        'options' => [
            'class' => 'main-header navbar navbar-expand bg-white navbar-light border-bottom',
        ],
    ]);
    echo Nav::widget([
        'options' => ['class' => 'navbar-nav'],
        'items' => [
            ['label' => '', 'url' => ['/site/index'],'options'=>['class'=>'nav-item'], 'template' => '<a href="#" class="nav-link" data-widget="pushmenu" target="_blank"><i class="fa fa-bars"></i></a>'],
            ['label' => 'About', 'url' => ['/site/about'],'options'=>['class'=>'nav-item d-none d-sm-inline-block']],
            ['label' => 'Contact', 'url' => ['/site/contact'],'options'=>['class'=>'nav-item d-none d-sm-inline-block']],
        ],
    ]);
    NavBar::end();
    ?>

The expected output is 

<nav class="main-header navbar navbar-expand bg-white navbar-light border-bottom">
    <!-- Left navbar links -->
    <ul class="navbar-nav">
      <li class="nav-item">
        <a class="nav-link" data-widget="pushmenu" href="#"><i class="fa fa-bars"></i></a>
      </li>
      <li class="nav-item d-none d-sm-inline-block">
        <a href="index3.html" class="nav-link">Home</a>
      </li>
      <li class="nav-item d-none d-sm-inline-block">
        <a href="#" class="nav-link">Contact</a>
      </li>
    </ul>
</nav>

But i end up with stuff like this in html:

<nav id="w0" class="main-header navbar navbar-expand bg-white navbar-light border-bottom">
   <div class="container">
      <div class="navbar-header"><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><a class="navbar-brand" href="/index.php">My Application</a>
      </div>
      <div id="w0-collapse" class="collapse navbar-collapse">
         <ul id="w1" class="navbar-nav nav">
            <li class="nav-item active"><a class="nav-link" href="/index.php?r=site%2Findex" data-widget="pushmenu">Home</a></li>
            <li class="nav-item d-none d-sm-inline-block"><a href="/index.php?r=site%2Fabout">About</a></li>
            <li class="nav-item d-none d-sm-inline-block"><a href="/index.php?r=site%2Fcontact">Contact</a></li>
         </ul>
      </div>
   </div>
</nav>

How can i get rid of this <div class="container and div with .navbar-header?

Upvotes: 1

Views: 1695

Answers (1)

Muhammad Omer Aslam
Muhammad Omer Aslam

Reputation: 23738

You need to use the $renderInnerContainer for the NavBar see Docs

change your code to 

 <?php
    NavBar::begin([
        'brandLabel' => Yii::$app->name,
        'brandUrl' => Yii::$app->homeUrl,
        'renderInnerContainer'=>false,
        'options' => [
            'class' => 'main-header navbar navbar-expand bg-white navbar-light border-bottom',
        ],
    ]);
    echo Nav::widget([
        'options' => ['class' => 'navbar-nav'],
        'items' => [
            ['label' => '', 'url' => ['/site/index'],'options'=>['class'=>'nav-item'], 'template' => '<a href="#" class="nav-link" data-widget="pushmenu" target="_blank"><i class="fa fa-bars"></i></a>'],
            ['label' => 'About', 'url' => ['/site/about'],'options'=>['class'=>'nav-item d-none d-sm-inline-block']],
            ['label' => 'Contact', 'url' => ['/site/contact'],'options'=>['class'=>'nav-item d-none d-sm-inline-block']],
        ],
    ]);
    NavBar::end();
    ?>

You cannot turn off the navbar-header container as it is hardcoded in the init() function of the yii\bootstrap\NavBar line 123 you can extend and override the NavBar if you want to remove it. or you can alternatively use css class to override all the properties if its some issue with adjusting the width

Upvotes: 3

Related Questions