custom.css

[snake]

can anyone tell me what the css is to set the navigation bar background colour for hover and current page
this is what I have currently, which doesn;t seem to work

.nav.navbar-nav > li.dropdown:hover {
    background-color: #BD282A;
    
}

[brian!]

 

[snake]

Alas I have already tried that too and it also did not work.

I also seem to be having a bizzare issue that none my custom.css does works at all  in Google chrome but works in  Edge and Opera (apart from the above).
It is not caching issue as I have cleared the browser cache  and template cache many times and tried incognito mode.

Same issue with chrome browser on my phone as well, won't show the custom css, but works in other browser.

here is all my CSS, as you can see nothing special that would break anyhting.

 

#nav.navbar-main{
    background-color: #242424;
}
.navbar-main .navbar-nav > li > a:hover,
.navbar-main .navbar-nav > li > a:focus,
.navbar-main .navbar-nav > .active > a,
.navbar-main .navbar-nav > .active > a:hover,
.navbar-main .navbar-nav > .active > a:focus,
.navbar-main .navbar-nav > .open > a,
.navbar-main .navbar-nav > .open > a:hover,
.navbar-main .navbar-nav > .open > a:focus {
    background-color: #BD282A!important;
    
}
.top-nav>li.primary-action>a.btn {
    background-color: #BD282A!important;
}
a {
    color: #BD282A;
}
section#home-banner{
    background-color: #242424;
    
}

[brian!]

for what it's worth, I just tested the above on a clean v8.0.2 custom.css file and it works fine in Edge, Firefox & Chrome...

possibly you have multiple WHMCS sites, but the custom.css in the one that I know of yours only contains...

#nav.navbar-main{
    background-color: #F15B36;
}
.top-nav>li.primary-action>a.btn {
    background-color: #F15B36!important;
}
a {
	color: #F15B36;
}

[snake]

this is on https://clients.michaels.me.uk/
which is a new install
 

Edited October 9, 2020 by snake

[brian!]

custom.css is empty.

[snake]

no it isn;t
https://clients.michaels.me.uk/templates/six/css/custom.css

[brian!]

I meant empty in the sense that there is no CSS code within it.

/* *****************************************************

    ** Custom Stylesheet **

    Any custom styling you want to apply should be
    defined here.

***************************************************** */

[snake]

but there is CSS in the file, you can see it if you click the link https://clients.michaels.me.uk/templates/six/css/custom.css
 

/* *****************************************************

    ** Custom Stylesheet **

    Any custom styling you want to apply should be
    defined here.

***************************************************** */
#nav.navbar-main{
    background-color: #242424;
}
.navbar-main .navbar-nav > li > a:hover,
.navbar-main .navbar-nav > li > a:focus,
.navbar-main .navbar-nav > .active > a,
.navbar-main .navbar-nav > .active > a:hover,
.navbar-main .navbar-nav > .active > a:focus,
.navbar-main .navbar-nav > .open > a,
.navbar-main .navbar-nav > .open > a:hover,
.navbar-main .navbar-nav > .open > a:focus {
    background-color: #BD282A!important;
    
}
.top-nav>li.primary-action>a.btn {
    background-color: #BD282A!important;
}
a {
	color: #BD282A;
}
section#home-banner{
    background-color: #242424;
    
}

 

[brian!]

3 minutes ago, snake said:

but there is CSS in the file, you can see it if you click the link https://clients.michaels.me.uk/templates/six/css/custom.css

I think there is a chance that we might both be right. 🤪

if I click on your link, then yes I do see the code that you posted. 💡

if I view the URL of the custom.css linked to in the header of your site, then I see my empty file. 😲

basically, your link above has a double slash in it...

https://clients.michaels.me.uk//templates/six/css/custom.css

but the link used by WHMCS will be...

https://clients.michaels.me.uk/templates/six/css/custom.css

perhaps there are two copies of the file on the server in different paths?

[snake]

there is definitely only one custom.css file in that folder.  It isn't even possible to create 2 files with the same filename.
I have no idea how the double slash in the URL  is causing a different output, its just a typo, but still points to the same file in the same folder
 

[brian!]

8 minutes ago, snake said:

I have no idea how the double slash in the URL  is causing a different output, its just a typo, but still points to the same file in the same folder

yet gives 2 different results - or are you seeing the same output with both URLs?

[snake]

no, I also see 2 different results with and without the double slash, but I am lost as to why.
time to go and look at the .htaccess file I think

[snake]

have just checked in MS EDGE and get different results again.

with single slash I get this,  which is different yet again

/* *****************************************************

    ** Custom Stylesheet **

    Any custom styling you want to apply should be
    defined here.

***************************************************** */
#nav.navbar-main{
    background-color: #242424;
}
.top-nav>li.primary-action>a.btn {
    background-color: #BD282A!important;
}
a {
	color: #BD282A;
}
#home-banner{background-color: #242424;}

 

with double slash I get the same as chrome

 

[snake]

mystery solved.... it was cloudflare causing the problem 🙂
All my CSS is working perfectly now.

Edited October 9, 2020 by snake