How to add a gradient to the navbar in bootstrap 3 using LESS.js

Question

ie looks like: http://twitterbootstrap3navbars.w3masters.nl/ but without using raw css, I want to write this into my less files...

In my less.variables I already tried this:

@navbar-gradient:   linear-gradient(top, @navbar-default-pre-color 0%, @navbar-default-pre-color 50%, @navbar-default-pre-color 51%, @navbar-default-pre-color 100%);

@navbar-default-bg:                @navbar-gradient;

In chrome the navbar just showed up black, I tried changeing it from background color to: just background, background-image etc (in the chrome developer tools that let you edit the css right on the page).

Any ideas?

Solution 1

You can do that by using the following Less code:

@navbar-gradient-start-color: #004400;
@navbar-gradient-stop-color: #009900;
.navbar-default {
#gradient > .vertical( @navbar-gradient-start-color,@navbar-gradient-stop-color);
}

You should add this code at the end of the bootstrap.less (or navnbar.less) file. (better create a custom.less file and import that at the end of bootstrap.less)

Also see: http://bassjobsen.weblogs.fm/adding-background-gradient-bootstraps-navbar-less/

The Less code above will output the following CSS code:

.navbar-default {
  background-image: -webkit-linear-gradient(top, #004400 0%, #009900 100%);
  background-image: -o-linear-gradient(top, #004400 0%, #009900 100%);
  background-image: linear-gradient(to bottom, #004400 0%, #009900 100%);
  background-repeat: repeat-x;
  filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#ff004400', endColorstr='#ff009900', GradientType=0);
}

Notice that the .vertical() mixin has been defined in the less/mixins/gradients.less file of Bootstrap's source files. This mixin has been namespaced in the #gradient namespace and that's why it should be called as #gradient > .vertical().

Solution 2

so here's what I rigged up. I added the following at line 380 in navbar.less, under the navbar default class

background-color: @navbar-default-bg;
  background-image: -webkit-gradient(linear, left 0%, left 100%, from(lighten(@navbar-default-bg,30%)), to(@navbar-default-bg));
  background-image: -webkit-linear-gradient(top, lighten(@navbar-default-bg,30%), 0%, @navbar-default-bg, 100%);
  background-image: -moz-linear-gradient(top, lighten(@navbar-default-bg,30%) 0%, @navbar-default-bg 100%);
  background-image: linear-gradient(to bottom, lighten(@navbar-default-bg,30%) 0%, @navbar-default-bg 100%);
  background-repeat: repeat-x;
  filter: progid:DXImageTransform.Microsoft.gradient(startColorstr=lighten(@navbar-default-bg,30%), endColorstr=@navbar-default-bg, GradientType=0);

I cut and past some of it from here: http://twitterbootstrap3navbars.w3masters.nl/

Comments

[Bass Jobsen]

When you ignore browser-prefixed fallbacks your answer does not differ from that already given by @StrikePricer already. When using Bootstrap default build process, the autoprfixer should not add the filter property for IE8 support.

[Bass Jobsen]

There is no need to add it at line 380 when you set the above code for the .navbar (or .navbar-default) selector you can add it at the end of bootstrap.less or navbar.less (you should only make sure that the custom code is after the default code, and even that is not required cause of the default code does not set the background-image for the navbar)

[thom_nic]

Actually my answer differs in at least one important way which is i explained why it works.