Override Bootstrap CSS in Yii2

Question

I have a NavBar and I want to override all the classes that Yii is putting on that widget. After searching inn Google and reading the docs, I found that this code:

Yii::$container->set('yii\bootstrap\NavBar', [
    'containerOptions' => [
        'class' => ''
    ]
]);

NavBar::begin([
    'containerOptions' => [
        'class' => 'no-horizontal-padding navbar-content'
    ]
]);

is supposed to override (delete, actually) all classes in the container of my NavBar, but this is not the case. I keep seeing my 2 classes and the default NavBar classes.

How can I remove those classes and keep only mine?

Please refrain any hacky solutions like removing the classes with JS on the client side. I'm looking for a proper way of doing this.

EDIT:

I'm adding the generated HTML as requested:

<nav id="w0" class="navbar-inverse navbar" role="navigation">
    <div class="container-fluid no-horizontal-padding">
        <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>
        </div>
        <div id="w0-collapse" class="no-horizontal-padding navbar-content collapse navbar-collapse">
        </div>
    </div>
</nav>

could you add the html that is generated by the widget with the above code? — deacs
– deacs, Commented Apr 29, 2015 at 17:43
thanks! so it's about this line: <div id="w0-collapse" class="no-horizontal-padding navbar-content collapse navbar-collapse"></div> right? ie, which classes do u want removed/overridden? — deacs
– deacs, Commented Apr 29, 2015 at 17:57
@deacs Yes, that is correct. I want to remove the collapse navbar-collapse classes. — Alexander Nestorov
– Alexander Nestorov, Commented Apr 29, 2015 at 17:58

XzAeRo · Accepted Answer · 2015-04-29 19:51:36Z

5

If you want to remove collapse and navbar-collapse out of the box, using the widget parameters, you can't.

As you can see in the code for the NavBar component in Yii2, those classes are hard-coded in there.

Your options:

Modify the Navbar.php file and remove this classes (not recommended).
Write directly in HTML your navbar (not ideal, but is a valid workaround).
Create your own custom Navbar Component for Yii2 (recommended, because you can copy the Navbar.php file, remove those classes and change the namespace).

Here is a simple tutorial for creating your components and using them.

answered Apr 29, 2015 at 19:51

XzAeRo

5665 silver badges11 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

Jales Monteiro · Accepted Answer · 2020-12-13 23:58:10Z

0

If you want to remove collapse and navbar-collapse out of the box, using the widget parameters, try this:

add to your NavBar...

'collapseOptions' => [
    'class' => [
        'collapse' => '',
        'widget' => '',
    ]
]

will keep like this...

NavBar::begin([
    'brandLabel' => Yii::$app->name,
    'brandUrl' => Yii::$app->homeUrl,
     'collapseOptions' => [
        'class' => [
            'new' => 'navbar-nav-scroll',
            'collapse' => '',
            'widget' => '',
        ],
    ],
    'options' => [
        'class' => 'navbar navbar-expand-sm navbar-dark bg-primary fixed-top',
    ],
]);

it works for me.

edited Dec 13, 2020 at 23:58

answered Dec 13, 2020 at 23:44

Jales Monteiro

11 bronze badge

Collectives™ on Stack Overflow

Override Bootstrap CSS in Yii2

2 Answers 2

Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related