Hamburger icon is not focusing

How can I give focus to the hamburger icon?

Link to my code.pen : Hamburger Menu

Hello there.

Could you be more specific as to what behaviour you are expecting?

Are you interested in tabindex?

.hamburger span:hover {
  color: red;

Ya, I like tabindex, but how can I use it only on a hamburger icon, or if it is not possible I am thinking about color change or something…that when a user press tab it focuses on the hamburger icon and when the user press enter the menu opens.

But this applies the hover effect on the hamburger icon not focus effect

Have a read over this:

Or, click for answer:

$('.hamburger span').click( function() {
  $('.hamburger span').toggleClass('show');

    var keycode = (event.keyCode ? event.keyCode : event.which);
    if(keycode == '13'){
        $('.hamburger span').toggleClass('show');

OPTIONAL (add styling)

div > span:focus {
  color: green;
  border: solid grey 2px;

Hope this helps

what focus ? Can u be more clear on your question ?

I try this but it didn’t work, I think that JQuery detects enter key only on textbox area and in the document and maybe not works for this kind of purpose. Maybe changing the hamburger icon into a button will fix the problem…?

It does work, but you need to tab into the hamburger icon, before clicking enter.

That is why I added the CSS, so that I could tell when the icon was in focus.

I was not tabbing into the hamburger icon before pressing enter, and ya it works…FINALLY! I am very thankful to you for cooperating with me and to solve this problem which I am trying to solve for so so long. You are GREAT! :slight_smile: :heart:

1 Like