How do I change the style of nav-pills and navbar?
I am developing a website frontend and I am fairly new to Ruby and Rails, css and bootstrap. Following the documentation, I have a very nice navbar at the top of my page, adapted to my needs, by changing the options in the css file.
.navbar {
background-color: #3a2665;
color: #ffffff !important;
}
.navbar .nav {
padding-top: 15px;
padding-bottom: 15px;
}
.navbar .nav > li > a {
color: #ffffff !important;
font-family: 'Oswald', sans-serif;
font-size: 1.5em;
}
I also need a footer with navigation options, this time with li elements in a different style from the navigation bar at the top of the page. I tried using navigation pills but couldn't seem to be able to modify the li elements , they follow the navbar style. I just change something when I add more ! Important statements.
.nav-pills > li > a {
color: #ffffff;
font-family: 'Open Sans', sans-serif !important;
font-size: 0.8em ;
padding: 1px 1px 1px ;
}
My specific question is the hierarchical dependency of nav , navbar and nav pills so that I can style each one separately? Anyone have a pointer? What is the role ! Important ? It is overwritten, but why would I need it if I specify nav-pills in my css file?
Also is it better to use a navbar as a footer? The documentation I read seems to indicate what is mostly used in the title.
Any pointers would be greatly appreciated!
source to share
You can do it so that you don't have to use! important to override css style
.navbar {
background-color: #3a2665;
color: #ffffff;
}
.navbar .nav {
padding-top: 15px;
padding-bottom: 15px;
}
.navbar .nav > li > a {
color: #ffffff;
font-family: 'Oswald', sans-serif;
font-size: 1.5em;
}
footer .navbar{
color: #ff0000; /* TO change the color in the footer*/
}
footer .navbar .nav > li > a {
color: #ff0000; /* TO change the color in the footer*/
}
The style you want the classes to inherit in the footer you leave as they are :)
And yes, you can use the navbar in the footer :)
source to share
My first recommendation would be to check out SASS for a restyled bootstrap as it provides many simple alternatives to changing colors, fonts, etc.
However, to answer your question, you must use this hierarchy:
.navbar .nav-pills > li > a
Here's a great article on understanding! important CSS declaration
( http://www.smashingmagazine.com/2010/11/02/the-important-css-declaration-how-and-when-to-use-it/ )
When creating the footer, my usual practice is to create a background div / footer> container> then columns> content, such as a horizontal ul list, etc.
source to share