I am developing the frontend of a Website and I'm rather new to Ruby and Rails, css and bootstrap. Following the documentation, I have a very nice navbar at the top of my page tailored to my needs by changing 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 navigations options, this time with the li elements in a different style from the navbar at the top of the page. I tried using nav-pills but do not seem to be able to modifiy the li elements, they follow the navbar style. I only seem to alter anything when I throw in extra !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 what is the hierarchical dependency of nav, navbar and nav-pills, so that I can change the style of each of them separately? Does anybody have a pointer? What is the role of !important ? It overwrites but why would I need it if I'm specifying nav-pills in my css file?
Also is it "best practice" to use a navbar also as a footer? In the documentation I read, it seems to indicate that is mostly used in the header.
Any pointers will be much appreciated!
You can make it like this so you don't have to use !important to override the 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 them as they are :)
And yes you can use navbar in footer :)
Collected from the Internet
Please contact [email protected] to delete if infringement.
Comments