Skip to main content
This topic has been closed for replies.
Correct answer L e n a

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

 

3 replies

BenPleysier
Braniac
March 26, 2023

To add to what @Nancy OShea has said, this is early stage of the redevelopment of the site, why not go straight for Bootstrap v5?

 

Have I said that the current creation of the site is a vast improvement on the previous version?

 

Ben

Mount Eliza VIC

Wappler is the DMXzone-made Dreamweaver replacement and includes the best of their powerful extensions, as well as much more!
Nancy OShea
Braniac
March 25, 2023

Look at Bootstwatch Themes.  There are 25 different themes available.

Simply replace current Bootstrap CSS with your desired Bootswatch Theme.

If you like red, you might like the Journal Theme.

 

<!--Replace Bootstrap CSS with Bootwatch Theme-->

<link href="https://cdnjs.cloudflare.com/ajax/libs/bootswatch/5.2.3/journal/bootstrap.min.css" rel="stylesheet">

 

Bootswatch Examples

https://bootswatch.com/

 

Bootswatch Libraries on CDN

https://cdnjs.com/libraries/bootswatch

 

Hope that helps.

 

 

Nancy O'Shea— Product User, Community Expert &amp; Moderator
L e n aCorrect answer
Inspiring
March 25, 2023

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

 

Braniac
March 25, 2023

All good points but why the overkill of using javascript to append a css selector to the head section of the page just to test, surely it's far simpler just to write it directly to the head and l don't understand why css has anything to do with the Bootstrap js files, the css would be coming from the Bootstrap css file and the console errors in the uploaded image don't suggest that is coming from an external https source, maybe there are additional css links which are prefixed with https, l haven't looked at the code but even so you don't need to use javascript to test a css selector.