Customized LESS-color and navigation bar in Bootstrap (recommended)

Theme color

At the beginning of the file, you can see the default variables and values of gray and brand colors.

@gray-darker: lighten(#000,13.5%); //#222
@gray-dark

We can directly replace to cover the full grayscale space we need

@gray-darker: #222;
@gray-dark: #454545;
@gray: #777;
@gray-light: #aeaeae;
@gray-lighter: #ccc
@gray-lightest: #ededed
@offwhite: #fafafa;

Change the brand color to golden yellow:

@brand-primary: #c1ba62;

Navigation bar color variable

Modify the following values:

@navbar-height: 64px;
@navbar-margin-bottom: 0; // was @line-height-computed
...
@navbar-default-color: @gray;
@navbar-default-bg: #fff;
@navbar-default-border: @gray-light; // darken(@navbar-default-bg, 9.5%);
...
// Navbar links
@navbar-default-link-color: @navbar-default-color;
@navbar-default-link-hover-color: @link-hover-color;
@navbar-default-link-hover-bg: @off-white;
@navbar-default-link-active-color: @link-hover-color;
@navbar-default-link-active-bg: @gray-lightest;
@navbar-default-link-disabled-color: @gray-lighter;
@navbar-default-link-disabled-bg: transparent;

New features about navigation bars will appear.

The above is the customized LESS-color and navigation bar in Bootstrap introduced to you by the editor. I hope it will be helpful to you. If you have any questions, please leave me a message and the editor will reply to you in time. Thank you very much for your support for my website!