Changing Bootstrap Navbar to light background colour

888 views
Skip to first unread message

Chris Guest

unread,
Dec 2, 2015, 4:51:23 PM12/2/15
to web2py-users
I recently needed to modify the stock Bootstrap CSS so that the Navbar had a light colour,  #fafafb .

I added the following to  static/css/web2py-bootstrap3.css . I just thought that I would share it here in case is useful for others.


.navbar-default{
    background-color:#fafafb;
    border-color:#fafafb;
}

.navbar-inner {
    background-color:#fafafb; 
    border-color:#fafafb;
    background-repeat: no-repeat;
    filter: none;
}

.navbar .nav > li > a {
    color: #3e3f3a;
}
.navbar .nav > li > a:active, .navbar .nav > li > a:hover {
    color: #808285; 
}

Leonel Câmara

unread,
Dec 2, 2015, 7:33:11 PM12/2/15
to web2py-users
Did you remove the navbar-inverse class? That's what makes it black.

Chris Guest

unread,
Dec 2, 2015, 7:42:07 PM12/2/15
to web2py-users
I didn't remove any classes from  static/css/bootstrap.min.css or static/css/bootstrap-theme.min.css .
I only added code to static/css/web2py-bootstrap3.css .
If there's a simpler way to do this, please let me know.

Leonel Câmara

unread,
Dec 3, 2015, 5:32:48 AM12/3/15
to web2py-users
I don't mean in the css file, I mean in layout.html where you have

<nav class="navbar navbar-inverse navbar-fixed-top" role="navigation">



Just remove navbar-inverse.

Manuele Pesenti

unread,
Dec 3, 2015, 8:48:09 AM12/3/15
to web...@googlegroups.com
Il 03/12/15 11:32, Leonel Câmara ha scritto:
I don't mean in the css file, I mean in layout.html where you have

<nav class="navbar navbar-inverse navbar-fixed-top" role="navigation">



Just remove navbar-inverse.
I tryied recentrly but with a bad result... I think I'll try the solution of Chris.
Thanks for sharing

    Manuele

Dan

unread,
Feb 4, 2016, 2:42:56 PM2/4/16
to web2py-users
FWIW...
  1. layout.html - delete the navbar-inverse that makes the background color black/dark
  2. menu.py - modify the text and link for the logo (which will be now  too light colored on a white background)
  3. web2py-bootstrap3.css - modify the colors of the logo and the footer

Paul Ellis

unread,
Feb 7, 2017, 3:01:00 PM2/7/17
to web2py-users
In my version of web2py the layout.html has this:
<nav class="navbar navbar-default navbar-fixed-top" role="navigation">

However, it is definitely black. If I change it to navbar-inverse I get a green navbar.

By using the above css. I am able to get a light navbar.

Thanks
Reply all
Reply to author
Forward
0 new messages