CSS not working in google chrome

update: This isn’t fixing the problem either. https://strongerwithjeng.com

ul#menu-top-navigation .nav-menu a {
color: #1e8239;
}
ul#menu-top-navigation .nav-menu a:link {
color: #1e8239;
}
ul#menu-top-navigation .nav-menu a:hover {
color: #35e865;
}

This applied to all doesn’t work either:
ul#menu-top-navigation a

This doesn’t work either.
.nav-menu a

https://strongerwithjeng.com

Clear your browser’s cache please.

Yes, the hover green is working, just not the active link green

What do you mean “active”?

I googled CSS styles and this came up @w3schools. I thought it would reinforce what I was trying to do but it didn’t help.

The :active selector is used to select and style the active link.
https://www.w3schools.com/cssref/sel_active.asp

I’ve also tried this as well now:

.main-navigation a {
color: #1e8239;
}
.main-navigation a:hover {
color: #35e865;
}

which is cut and pasted from the parent theme but didn’t help in Chrome either. I know Google pretending to be “open source” is ridiculous, but are they deliberately trying to be difficult now or something?

In your own words what do you mean by “active”?

I meant that I had tried some additional styles (a:link and a:active) to try to reinforce “a” and “a:hover” but it didn’t help so I took them out. It did look like this:

ul#menu-top-navigation {
	color: #1e8239;
}
ul#menu-top-navigation a {
	color: #1e8239;
}
ul#menu-top-navigation a:link {
	color: #1e8239;
}
ul#menu-top-navigation a:hover {
	color: #35e865;
}
ul#menu-top-navigation a:active {
	color: #35e865;
}

but now it looks like this and does the same thing but does not fix the problem in Chrome:

ul#menu-top-navigation {
	color: #1e8239;
}
ul#menu-top-navigation a {
	color: #1e8239;
}
ul#menu-top-navigation a:hover {
	color: #35e865;
}

No need to have extra unnecessary things floating around, right?

I tried changing the navigation menu in this but it didn’t work on Chrome either:

/* Minimum width of 600 pixels. */
@media screen and (min-width: 600px)

I went through the code, the original and not my child theme, and noticed that the footer, which works, is coded like this in the footer.php:

<footer id=”colophon” role=”contentinfo”>
<div class=”site-info”>

and the navigation in the in the header.php is written slightly differently:

<nav id=”site-navigation” class=”main-navigation” role=”navigation”>

I went and looked in the content.php I see this:

<footer class=”entry-meta”>
<span class=”edit-link”>’, ‘</span></footer><!– .entry-meta –>

I can’t find a span class for nav id=”site-navigation.” I’ve looked in the content.php, header.php, and functions.php – in both the child theme I created and the parent theme files for twenty twelve. So maybe that means something to someone.

I’m out of ideas.

First resolve your syntax error:

/*** .site-header #s {
	width: 60%; /** 53.66666666666%; **/
/* define a width to avoid dropping a wider submit button */
} ***/

I really don’t understand what a syntax error is but I removed that bit entirely and the search form is still at the top of the page where it was and seems to be working. I cleared my browsing history and it still doesn’t fix the top navigation in Chrome and now the top nav isn’t showing the green in Firefox either. Have I left something open between the search form and the top nav in the code? I don’t expect you to go looking for that but it would help me to know where to start looking!

These are not valid comment tags ***/ They can only be:

/*   .....  */

So try changing those.

O.K. I took it all out entirely, the styles and the code I had added to the header.php (child theme). Should I put it back or is it possible that it’s the entire problem? Removing every last bit of it has added a stray menu buttom – like for the small screen mobile versions – to my header….

I had added to the header.php

Wait, what? CSS only goes in the child theme style.css file…so if you’re putting it someplace else, that’s wrong – take it all out.

I’m sorry, I meant I had added other code to the header.php to add that search form and then I had added styles to go along with it to the style.css – both in the child theme. In the header I had added this:

I added this code to right after this so:
<header id=”masthead” class=”site-header” role=”banner”>
then this:

<div class=”alignright”>
<?php get_search_form(); ?>
</div><!– .alignright –>

And in the style sheet I had added this:

input#searchsubmit {
border-top-left-radius: 1px;
border-top-right-radius: 1px;
border-bottom-right-radius: 1px;
border-bottom-left-radius: 1px;
font-family: Arial, Helvetica, sans-serif; /* inherit */
}
.site-header #s {
width: 55%; /** 60%/53.66666666666%; **/
/* define a width to avoid dropping a wider submit button */
}
.site-header #searchform {
margin-right: 50px;
margin-right: 3.57142857rem;
}

I wasn’t having any trouble with the search form, but I can’t get my styles to appear correctly in the top navigation bar in Google Chrome.