CODEWITHSUNDEEP
sassbootstrap-4twitter-bootstrap-4
Mark
Mark

Reputation: 4950

Customize Bootstrap 4 navbar selections

I am using custom.css with Bootstrap 4. I have the following navbar that looks almost like this one: enter image description here what I want is to have items in white and selections in black. What is the right way of customizing bootstrap css for that? Here is my custom.css. All I have changed so far is a var $blue.

$blue:   #0072bb;

Thanks for help.

Update. Adding navbar code:

<nav class="navbar navbar-inverse bg-primary" style="height:100%;">
            <ul class="nav navbar-nav" id="mainNavbar">
                <li class="nav-item">
                    <a class="nav-link" id="settings_nav_system" data-toggle="tab"
                       ui-sref="body.settings.systemdefaults(
                       stateParams[0])"
                       href="#" ng-show="service.permissions['system']>0">
                        <i class="fa fa-desktop fa-lg"></i>
                        <span>&nbsp;</span><span translate>PreferenceTitle_SystemDefault</span>
                    </a>
                </li>
                <li class="nav-item">
                    <a class="nav-link" id="settings_nav_user" data-toggle="tab"
                       ui-sref="body.settings.preferences(
                       stateParams[1])"
                       href="#" ng-show="service.permissions['user']>0">
                        <i class="fa fa-pencil fa-lg"></i>
                        <span>&nbsp;&nbsp;</span><span translate>PreferenceTitle_User</span>
                    </a>
                </li>
            </ul>
        </nav>

Upvotes: 1

Views: 1206

Answers (1)

Carol Skelly
Carol Skelly

Reputation: 362390

Change the navbar SASS variables..

$brand-primary: #0072bb;
$navbar-inverse-color: #fff;
$navbar-inverse-hover-color: #000;
$navbar-inverse-active-color: #222;

http://www.codeply.com/go/sGB65XJR63

Upvotes: 1

Related Questions