X for close on toggle

HTML & CSS
1

Hello I am trying to add an X to close the nav
menu at viewport using CSS3. But it is not working Pen

HTML:

<button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-collapse">
          <span class="icon-bar top-bar"></span>
          <span class="icon-bar middle-bar"></span> 
          <span class="icon-bar bottom-bar"></span>
 </button>

CSS:

navbar-toggle {
      border: none;
      background: transparent !important; 
        
    }
  
  &:hover {
    background: transparent !important;
  }

  .icon-bar {
    width: 22px;
    transition: all 0.2s;
  }
  .top-bar {
    transform: rotate(45deg);
    transform-origin: 10% 10%;
  }
  .middle-bar {
    opacity: 0;
  }
  .bottom-bar {
    transform: rotate(-45deg);
    transform-origin: 10% 90%;
  }


    .top-bar {
      transform: rotate(0);      
    }
    .middle-bar {
      opacity: 1;
    }
    .bottom-bar {
      transform: rotate(0);
    }
2

Hi,

In the button identify the navbar by id (data-target=“#navbar”).

e.g.

 <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#navbar">
1 Like
3

It works in the pen but I when I try to put it in my stylesheet some
code turns red:

574Ă—902 38.5 KB

Its the bracket closing but why is it that in the pen it does not show
errors and the closing of the brackets is different.

4

That code is scss are you putting it an scss stylesheet or a normal one?

If you are trying to put the code in a normal stylesheet then you need the compiled version which you can grab from codepen (click view compiled in the css window). I assumed you had written that code and would know how to manage it :slight_smile:

1 Like
5
Off Topic:

Yet Another Inaccessible Bootstrap Button

6

Yes I’m not a big fan of bootstrap either but I believe the hamburger icon button should have a sr-only element (screen reader only) added to aid navigation and aria attributes as per the default in bootstrap.

<span class="sr-only">Toggle navigation</span>

e.g.

<button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#navbar" aria-controls="navbar" aria-expanded="false">
        <span class="sr-only">Toggle navigation</span>
        <span class="icon-bar top-bar"></span>
      <span class="icon-bar middle-bar"></span> 
      <span class="icon-bar bottom-bar"></span>
 </button>

I usually prefer to just write Menu next to the icon.

1 Like
7

I’m less and less a fan of “screen reader user” code.

I’m way more happy with your “add the word Menu” option. Cause “screen reader code” doesn’t help a Dragon user click that button, esp if the X is made of an icon-font (quite popular in Bootstrap).

1 Like
8

It also helps users like my wife who have no idea what that hamburger button is supposed to do (and she’s on her phone all day but hasn’t grasped what the icon is for) :slight_smile:

3 Likes
9

…and she’s an ordinary user representing the vast majority of users.

1 Like
10

This topic was automatically closed 91 days after the last reply. New replies are no longer allowed.