Changing menu font (focus) settings on homepage

cemsdb

Hi Saguaros, thanks for helping.

I'll send my login info privately.

As for the class/code changes, I added the following codes in the custom.css file:

TO DARKEN MENU LETTERS IN WHITE BACKGROUND (every page except homepage)

.navbar-default .navbar-nav > li > a:hover, .navbar-default .navbar-nav > li > span:hover, .navbar-default .navbar-nav > li > a:focus, .navbar-default .navbar-nav > li > span:focus {
color: #111111;
font-weight: 500;
}

WHICH REQUIRED A FOLLOW-UP CODE TO LIGHTEN THE HOMEPAGE MENU

.home .navbar-default .navbar-nav > li > a:hover, .navbar-default .navbar-nav > li > span:hover, .navbar-default .navbar-nav > li > a:focus, .navbar-default .navbar-nav > li > span:focus {
color: #ffffff;
font-weight: 500;
}

But the ".home" class does not seem to have the desired effect for this particular code/function, as it ends up whitening all the pages, not just the homepage.

cemsdb

saguaros

How do I send you the login info privately/securely?

saguaros

cemsdb You can edit Fields and share info there, only Moderators can see:

cemsdb

saguaros

Thank you. I just did so.

saguaros

Hi cemsdb Unfortunately, the login info doesn't work, could you check again?

cemsdb

Hi Saguaros,
I've just checked the login info I shared here and it works fine.

For some reason, for sometime now, it often takes 2 or 3 logins to finally work.

Please try again, and again if need be, and let me know if it works.

saguaros

cemsdb I can login with 3 attempts.

I thought you added 'home' class to the menu item but not.

Could you tell me where did you add? and how you want to achieve with this home class?

cemsdb

saguaros

Hi Saguaros,
I did not add any class to any menu items. In regards to homepages, I simply add a ".home" code in the custome.css file, which often works well enough alone.

As an example, the current custom.css file includes multiple ".home" codes which works great, except for the sole issue this thread is trying to resolve. As you'll notice, the homepage logo and menu have a shadow effect, while the other pages don't. Can you explain the discrepancy, is ".home" a universal code feature, and if not, why does adding ".home" in the custom.css work most of the time?

At any rate, the problem I'm having this time around is caused by the ".home" mentioned in my earlier message (.home .navbar-default .navbar-nav > li > a:hover, .navbar-default .navbar-nav > li > span:hover, .navbar-default .navbar-nav > li > a:focus, .navbar-default .navbar-nav > li > span:focus { ). Unlike other ".home" codes, this one is affecting other pages as well.

To make it easier for you, I've now deleted the above code and you'll notice the homepage menu is now black while "focused" and grey while "hovered." How can I make both focus and hover effects keep the menu white (with 500 font-weight)?

saguaros

Hi cemsdb

Not sure where you added this 'home' class but yes, the homepage on your site has this class and you can customize style for this class.

It's just a class name, actually, you can add any class name and style as you wish. Let me know how you want to achieve so I can give further suggestion.

If you want to use a class for pages on your site, the basic steps will be:
1/ Add a page class via menu item, here is a sample: test class:

2/ In custom.css file, you can define css rules for it:

.test {
 /*your custom code goes here*/
}

if you want other pages have same style, just put 'test' class into the menu item of that page (like above).

Regards

cemsdb

saguaros

Hi Saguaros,
I did as you suggested and changed the Homepage Page Class from ".home" to ".test" (along with subsequent custom.css changes), and although that does achieve the desired homepage effect, all other pages (not using the "test" class) are being affected as well. As such, it's exactly the same problem as the previous use of ".home".

Specifically, I added the following code on custom.css:

.test .navbar-default .navbar-nav > li > a:hover, .navbar-default .navbar-nav > li > span:hover, .navbar-default .navbar-nav > li > a:focus, .navbar-default .navbar-nav > li > span:focus {
color: #ffffff;
font-weight: 500;
}

As you'll notice, all other pages now has the issue of menu items becoming white once clicked upon (and moving the cursor away from), effectively disappearing from view considering the white background. This effect can also be simulated via the browser's inspection tool, clicking on ":hov" and then ":focus"

Please take a look and let me know what you think.

saguaros

cemsdb I think your custom CSS code is not correct.

.test .navbar-default .navbar-nav > li > a:hover,
.navbar-default .navbar-nav > li > span:hover,
.navbar-default .navbar-nav > li > a:focus,
.navbar-default .navbar-nav > li > span:focus {
	color: #ffffff;
	font-weight: 500;
}

Only this rule is applied to page which has 'test' class:

.test .navbar-default .navbar-nav > li > a:hover

The remain rule will have affect to all pages.

If you want this to be applied page of 'test' class only, you need to change to:

.test .navbar-default .navbar-nav > li > a:hover,
.test .navbar-default .navbar-nav > li > span:hover,
.test .navbar-default .navbar-nav > li > a:focus,
.test .navbar-default .navbar-nav > li > span:focus {
	color: #ffffff;
	font-weight: 500;
}

cemsdb

saguaros

Thank you Saguaros, that has fixed the issue!