Override the Navbar style and background

Bootstrap 4 introduced theming CSS classes for the navbars.

There are two CSS classes for the font color (navbar-dark, navbar-light) and bg-* classes for the background.

In Bootstrap Darkroom all styles have predefined classes for the navbar styling. Since version 2.1.1 those can be overridden using local configuration via LocalFiles Editor -> Local config

Example: Bootswatch Lumen with white navbars

• see the 3 available navbar themes on https://bootswatch.com/lumen/
• the default in Darkroom uses the blue navbar which is "navbar-dark bg-primary"

If you prefer the white background with black text, you can use following local config:

$conf['bootstrap_darkroom_navbar_main_style'] = 'navbar-light';
$conf['bootstrap_darkroom_navbar_main_bg'] = 'bg-light';
$conf['bootstrap_darkroom_navbar_contextual_style'] = 'navbar-light';
$conf['bootstrap_darkroom_navbar_contextual_bg'] = 'bg-light';

The same works for all other Bootswatch themes.

Example: Custom colors

Create custom CSS

.bg-custom {
  background-color: #555500 !important;
}

Then use your newly created .bg-custom class for the navbars:

$conf['bootstrap_darkroom_navbar_main_style'] = 'navbar-light';
$conf['bootstrap_darkroom_navbar_main_bg'] = 'bg-custom';
$conf['bootstrap_darkroom_navbar_contextual_style'] = 'navbar-light';
$conf['bootstrap_darkroom_navbar_contextual_bg'] = 'bg-custom';