CODEWITHSUNDEEP
phphtmlcssyii2
Rori
Rori

Reputation: 97

How to change the Navbar color in Yii2

I need to change the color of the Navbar in Yii2 (where I have Home, About,...) how can I do this? I don't want to change the theme.

this is the site css file:

html,
body {
    height: 100%;

}

.wrap {
    min-height: 100%;
    height: auto;
    margin: 0 auto -60px;
    padding: 0 0 60px;
}

.wrap > .container {
    padding: 70px 15px 20px;
}

.footer {
    height: 60px;
    background-color: #B0C4DE;
    border-top: 1px solid #ddd;
    padding-top: 20px;
}

.jumbotron {
    text-align: center;
    background-color: transparent;
}

.jumbotron .btn {
    font-size: 21px;
    padding: 14px 24px;
}

.not-set {
    color: #c55;
    font-style: italic;
}

/* add sorting icons to gridview sort links */
a.asc:after, a.desc:after {
    position: relative;
    top: 1px;
    display: inline-block;
    font-family: 'Glyphicons Halflings';
    font-style: normal;
    font-weight: normal;
    line-height: 1;
    padding-left: 5px;
}

a.asc:after {
    content: /*"\e113"*/ "\e151";
}

a.desc:after {
    content: /*"\e114"*/ "\e152";
}

.sort-numerical a.asc:after {
    content: "\e153";
}

.sort-numerical a.desc:after {
    content: "\e154";
}

.sort-ordinal a.asc:after {
    content: "\e155";
}

.sort-ordinal a.desc:after {
    content: "\e156";
}

.grid-view th {
    white-space: nowrap;
}

.hint-block {
    display: block;
    margin-top: 5px;
    color: #999;
}

.error-summary {
    color: #a94442;
    background: #fdf7f7;
    border-left: 3px solid #eed3d7;
    padding: 10px 20px;
    margin: 0 0 15px 0;
}

and this is the site view (index.php):

<?php
/* @var $this yii\web\View */
$this->title = 'ACME Database';
?>



<div class="site-index">

    <div class="jumbotron">
        <h1>Welcome to ACME Database!</h1>


    </div>

    <div class="body-content">

     ....

But I don't know where the navbar is configured. I tried editing all bootstrap.css files (navbar) but nothing changed.

Upvotes: 3

Views: 15379

Answers (1)

J&#248;rgen
J&#248;rgen

Reputation: 3567

If you have a look in your layout file you'll see:

NavBar::begin([
            ...
            'options' => [
                'class' => 'navbar-inverse navbar-fixed-top',
            ],
        ]);
     ...

If you remove navbar-inverse the navbar bg-color goes white. If you want to change the color to something else you can add my-navbar where navbar-inverse was and add

.my-navbar {
    background-color: #yourcolor;
}

Don't change the bootstrap files, just add or even overwrite in your own css.

EDIT

Tips: if you use chrome developer toolbar (or someting similar) you can just hover the elements and see what class they are styled with, and then overwrite the class in your own css.

Upvotes: 7

Related Questions