I have added custom CSS for the active li element of navbar. But it seems to be picking the default color. Other colors such as navbar BG and text color seems to have change
Did you include "bootstrap-theme.css" files on your code?
In "bootstrap-theme.min.css" files, background-image about ".active" is existed for "navbar" (check this screenshot: http://i.imgur.com/1etLIyY.png).
It will re-declare your style code, and then it will be effected on your code.
So after you delete or re-declare them (background-image), you can use your background color style about the ".active" tag.