0

First of all I am a total rookie in bootstrap.

I have one major issue when trying to figure out the navbar for my website.

The only thing I wanna do is make the navbar solid black with white text. And when going to mobile screens, the button is to be the same. Solid black with the three white dashes in the upper right corner.

  • No gradients...
  • No shadows...
  • No extra fancy stuff at all...

I have tried to override the bootstrap.css from my own stylesheet (as stated in some previous posts here) since I don't wanna mess with the original css. But it never works and I am going crazy right now.

Anyone have a simple solution then I am all ears.

madth3
  • 7,275
  • 12
  • 50
  • 74
hjartstrom
  • 3
  • 2
  • can you show us what you have tried? – Wouter J Jan 05 '13 at 23:27
  • @WouterJ Sure thing. This is as close as I get but then I had to mess with the bootstrap.css and bootstrap-responsive.css > [link](http://hjartstrom.com/test-site) – hjartstrom Jan 05 '13 at 23:35
  • You shouldn't use headings in a navigation list (I'm speaking of `div>ul>li>a>h3`). Headings introduce paragraph of texts (and lists of content and so on), here it's list items in a `nav` element (`nav>ul>li>a`) – FelipeAls Jan 05 '13 at 23:46
  • Do you want to remove this *extra fancy* stuff for your whole webiste or just the navbar ? – Sherbrow Jan 06 '13 at 02:21
  • Very similar question : http://stackoverflow.com/q/9869610/1478467 – Sherbrow Jan 06 '13 at 17:56

2 Answers2

0

Removing .btn class from a.btn.btn-navbar seems to solve the visual problem with your button, though I only tested it with the link you provided in comment, not a fresh page with original Twitter Bootstrap code

FelipeAls
  • 21,711
  • 8
  • 54
  • 74
  • Thanks Felipe! I'm working on a fresh page at this very moment with unspoiled bootstrap.css / bootstrap-responsive.css. But it seems like I cant make the navbar go solid black no matter how I do it. If you wanna take a look let me know. – hjartstrom Jan 06 '13 at 00:00
  • `.navbar-inverse .navbar-inner { background-color: #000000; }` is seen in Firebug and an image editor confirms that the background of the whole line is black. Though the text has a `#777`color AND a `text-shadow` with some rgba() value. – FelipeAls Jan 06 '13 at 00:09
0

I think you can pretty much override any gradient with background-image, and it's even easier for shadows or radius for example : Demo (jsfiddle)

a,
.btn,
.navbar-inner,
.btn-navbar,
.progress,
.progress .bar {
  background-image: none!important;
}

* {
  -webkit-box-shadow: none!important;
     -moz-box-shadow: none!important;
          box-shadow: none!important;

    text-shadow: none!important;

  -webkit-border-radius: 0!important;
     -moz-border-radius: 0!important;
          border-radius: 0!important;
}

If you prefer to make it more precise and maybe lighter for the browser, you should try to modify the Less mixins (or at least override the Less code) because you won't have to change n*∞ lines everywhere, just a few (see mixins.less)

Sherbrow
  • 17,279
  • 3
  • 64
  • 77
  • That actually worked really well! It doesn't turn black but I guess that I can figure that out. Thanks @Sherbrow – hjartstrom Jan 06 '13 at 11:52
  • @hjartstrom You just have to change the color then, check the `@navbarBackground` in the [customize page](http://twitter.github.com/bootstrap/customize.html#variables) – Sherbrow Jan 06 '13 at 12:26