DMXzone Bootstrap 3 Navigation Support Product Page
Answered
How easy is it to change the color of the menu text in Nav to something other than the default?
Asked 26 Dec 2016 18:04:56
1
has this question
26 Dec 2016 18:04:56 Charles cruise posted:
I'm inserting a Nav not Navbar onto my website. I am having a hard time locating how to make changes to the default color theme for the nav. So far, I've figured out the following..container .row .nav-container can control the background color.
.navbar-default can color the color for when you hover over the link.
I haven't figure out what I need to change to modify the text color of the links.
Thank you,
Charles
Replies
Replied 27 Dec 2016 07:58:32
27 Dec 2016 07:58:32 Teodor Kuduschiev replied:
Hello Charles,
You need to have at least basic knowledge in CSS in order to change such properties in the bootstrap 3 navigation.
Changes must be stored in a separate custom css file, included after the bootstrap 3 css files on your page.
It is really easy to find the rule you need to change, by using your broswer dev tools (inspector). For example to change the default color of the links in the navbar, you need to add this to your custom css file:
.navbar-default .navbar-nav > li > a {
color: ;
}
active link:
.navbar-default .navbar-nav > .active > a, .navbar-default .navbar-nav > .active > a:hover, .navbar-default .navbar-nav > .active > a:focus {
color: ;
background-color: ;
}
etc.
You need to have at least basic knowledge in CSS in order to change such properties in the bootstrap 3 navigation.
Changes must be stored in a separate custom css file, included after the bootstrap 3 css files on your page.
It is really easy to find the rule you need to change, by using your broswer dev tools (inspector). For example to change the default color of the links in the navbar, you need to add this to your custom css file:
.navbar-default .navbar-nav > li > a {
color: ;
}
active link:
.navbar-default .navbar-nav > .active > a, .navbar-default .navbar-nav > .active > a:hover, .navbar-default .navbar-nav > .active > a:focus {
color: ;
background-color: ;
}
etc.