基本的に2種類しかない、Bootstrap の navbar ですが、
正直言って、そのまま使うのはちょっとはばかられます。
デザインを navbar に合わせると自由度が低すぎるでしょう。

で、こちらの出番。

https://work.smarchal.com/twbscolor/

簡単に navbar に色づけできてしまう。
各種 bootstrap のバージョンに対応していて、色変更後の状態を一発で呼び出せる permalink も発行してくれるという親切さ。

やることと言えば、出来上がった css を貼り付けるだけ。
実際には bootstrap.css(bootstrap.min.css) を書き換えるとかのめんどくさい処理が必要ですが、
もう、bootstrap.css の後ろに、こいつだけの専用cssファイルを作って読み込んだらいいと思います。
その方が楽だし。
ダメ？

SASS やら LESS やらのコードも出てきますが、そんなんを使うやつは、いちいちこんなところでいじらずに、自力で navbar のカスタマイズぐらいやってしまう猛者に違いないので、どうでもいいや。
知らなくても生きていけます。

しかし、
なんで css は 色指定とかをまとめて宣言できるように、変数とかの設定をしなかったの？？
当然、そこには安易にそんな風に考える私とかの愚かな頭なんかよりも、超絶賢い人が規格の設定には関わっているのだから出来ない理由があるんだろうけれど。
それにしても、ですよ。