Green Hamburger Test Not Clickable

Trying to test my “Product Landing Page” but the green hamburger is unresponsive. Any ideas?

Product Landing Page

Thanks so much!
Sather

i think there must be some weird hidden control character in your html that is preventing the test from running because when I repasted the script link to your page it worked fine

Try removing the old line completely and pasting in a fresh link like the one I just put here.

1 Like

Thank you for the help!
I haven’t got it yet, but when I open a new page with the hamburger’s script in it, and paste only the html into the page, I can click on the hamburger.
After I paste in the css though, the hamburger shows up, but I can’t interact with it.
So its the CSS that’s the issue (that either blocks or interferes with the hamburger’s code), I guess. I don’t have the contextual experience with CSS to know what aspect of my CSS might be interfering with the hamburger’s script though. You said a “weird hidden control character” might be an issue. Is this the kind of thing that could manifest in CSS, and if so, would there be any particular signs to look for?

Use “button” or anchor whom you’ll style with bootstrap btn classes.

1 Like

Yeah I see that…

My suggestion at this point is to comment out your entire css.
Then go back and check if the FCC script is working.
Then if yes, uncomment small blocks of css one at a time followed by retest of the FCC script.
Eventually you will uncomment something that causes the FCC script to fail and you will know that it is the cause.
You can paste your findings back here at that point to try to get an explanation as to why that specific section interferes with the script.

1 Like

Great advice @hbar1st! (I’m new to this, so I feel like I have a new wrench in the kit now!) I commented the css and quickly found out that it was the hidden checkbox I had included for the menu on smaller screens. This was the problem code:

input[type=checkbox]
{
  display: none;
}

I fixed this by using an id instead of “input”. I suppose there was a conflicting input in the hamburger’s script:

#show-menu[type=checkbox]
{
  display: none;
}

This has only solved one part of the problem though. The “Run Tests” button only shows the fraction of tests past (9/16 if you must know :expressionless:), and no details on what’s wrong, just a#Product Landing Page tests link.

i also kept investigating and found that if you remove these lines:

/Hide dropdown links until they are needed/

li ul
{
display: none;
}

The tests work normally.

Give that a try.
(perhaps you are hiding the results of the test by hiding all the ‘li ul’ display. Try targeting your ‘li ul’ with a class instead)

1 Like

I can help @srobinwaters report it if he needs me. I don’t want to open the issue though because I don’t have the pen related to it. (usually they want to see the related code so someone has to fork the broken pen out and keep it broken for whomever investigates it to see)

1 Like

Would a simple link to this discussion suffice?

I’m checking current open issues to see if this is already reported…

Edit:
I came across this closed issue:

(back in March)

and at the end of the thread they referenced a fix:

I’m not sure if these were related issues and fixes and if yes @camperextraordinaire should the 298 one be re-opened so further fixes can be made?

hi there,

can you fork out your broken pen and leave it broken for the investigation into the FCC bug?
And please let me know if you need help to open a new issue.

ps. did removing the css lines I suggest help?

1 Like

When I had this problem originally, I also reported it on Github. So I just went back and put the link to this discussion under my original post.

1 Like

Oh, and rest assured: all your advice was spot-on!:cowboy_hat_face:

Thanks for confirming. Can you post the link to your github issue here?

Here’s the link to my original Github post:
Green Hamburger test, not working with my CSS