Green Hamburger Test Not Clickable

Green Hamburger Test Not Clickable
0

#1

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

Product Landing Page

Thanks so much!
Sather


#2

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.


#3

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?


#4

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


#5

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.


#6

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.


#7

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)


#8

@hbar1st, @srobinwaters You have stumbled upon a bug in the tests. Your CSS or JavaScript code should not be messing with the way the tests work or display information, just as the test code should not cause problems in your JavaScript or design layout. This is a huge bug that probably has affected others as well. Would either of you mind checking to see if this issue has already been reported on Github and if not, create a new issue? The test script should be using classes appropriate class names and ids to avoid conflicts such as this.

Since you both are aware of what caused the problem and how to resolve, either of you would be in the best position to report it in detail.

Thanks.


#9

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)


#10

Would a simple link to this discussion suffice?


#11

They have very specific information requirements. Just put in the information they ask for. If you have a question of how to document something, let us know and we can assist you.


#12

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 @randelldawson should the 298 one be re-opened so further fixes can be made?


#13

I would still open a new issue and then make comments on the #298 and #16808 to let someone know the fix from #298 is apparently not working and refer to the new issue # you create.


#14

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?


#15

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.


#16

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


#17

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


#18

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