1 Correct answer
To change the color of your text in the navigation menu, you just have to add the following rule, what you already did :
.navbar-inverse .navbar-nav > li > a {
color: red
}
But however, there would be some remarks to certainly correct beforehand :
- you are using a version 3.4 of Bootstrap https://getbootstrap.com/docs/3.4/components/#navbar-default, today we are at version 5.+, you should eventually consider upgrading your site, especially since it seems that you are only at the
6
Replies
To change the color of your text in the navigation menu, you just have to add the following rule, what you already did :
.navbar-inverse .navbar-nav > li > a {
color: red
}
But however, there would be some remarks to certainly correct beforehand :
- you are using a version 3.4 of Bootstrap https://getbootstrap.com/docs/3.4/components/#navbar-default, today we are at version 5.+, you should eventually consider upgrading your site, especially since it seems that you are only at the beginning of its implementation.
- you use spaces in your access paths, these are shown by the presence of the %20 character which replaces them in the code, here too you should make sure you only use characters compatible with the sensitivity of the servers, even if there must be better and dedicated to the pure server, this reading can help you https://learn.microsoft.com/en-us/windows/win32/fileio/naming-a-file
- you use an http protocol to load your page, but you only refer to links to pages "embedded" from https... hence the errors of pages that do not load (bootstrap, jquery, to name a few...)
In conclusion, if the rule doesn't work to change the color, it's certainly because the code it contains is not interpreted, and that, just because the referent libraries are not loaded.
To verify it, just open the console (ctrl shift k) of your browser and copy and paste this following fragment
var css = '.navbar-inverse .navbar-nav > li > a {color: red;}';
var style = document.createElement('style');
if (style.styleSheet) { style.styleSheet.cssText = css;} else { style.appendChild(document.createTextNode(css));}
document.getElementsByTagName('head')[0].appendChild(style);
You will see that in plain JavaScript, without using jquery, it works, which demonstrates the loading problems related to the use of https,
First modify your requests by removing the s from https ( within the HEAD tag, for each SCRIPT and LINK tags)
Reaload you page, and it should work (of course, if you have added the rule quoted at the very beginning of this comment in your personal STYLE tag)
But then , second, think about adding a certificate to your page and use HTTPS
Yes, you’re right and that's exactly the rule I'm indicating at the beginning of my first comment, which should be added to the code in the STYLE tag, the one added by @gunzelguy :
.navbar-inverse .navbar-nav > li > a {
color: red
}
So not having access to the page code, in order to demonstrate it directly from the console, I had to use a plain vanilla, because jquery is not loaded by the page.
Maybe I was clumsy in explaining it... youps, I’m sorry...
By @L e n a
Right well you've confused me because its nothing to do with js it's to do with a css file. If for any reason the css file was not being loaded as a result of mixed content there's no need to use vanilla javascript to append the style tag and selector to the page to prove it is a problem with the style sheet either not loading or a badly formed selector stopping the cascade, you could simply embed the css selector without using javascript to test for potential problems with the css file.
Ýour first bit of advice was correct, all it needed was wrapping in style tags, assuming one was performing a test and the OP would have access to the code.
AdChoices