Add Text To Menu Toggle Button

trevorellis

Hello, we would like to make it so that the menu toggle button has some text.

How do we add text to the menu toggle? Can this be done by custom css?

We used this website (https://wave.webaim.org/report#/http://brigsleyparishcouncil.com/) to meet accessibility requirements and it detected that button as having no text.
<button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".t3-navbar-collapse">
<i class="fa fa-bars">
</button>

Any help would be greatly appreciated. Thanks in advance!

saguaros

Hi trevorellis

If you want to add text next to the bar icon, you can use this custom css:

.fa-bars:after {
    content: "YOUR_TEXT";
   /*your custom style goes here*/
}

trevorellis

saguaros Thanks for the speed of your response. However, we are still getting an error using the tool on this site https://wave.webaim.org/report#/http://brigsleyparishcouncil.com/. We need to make sure we register 0 errors in order to comply with regulations. The error reads "Empty button. A button is empty or has no value text." with the code already stated above. How do we address this?

Thanks in advance.

saguaros

trevorellis

I guess that you want to add a text inside the button, right?

You can edit the file: /templates/uber/tpls/blocks/mainnav.php and edit that line of code + add text as you wish.

trevorellis

saguaros Thank you very much for your help. We had to add some css to change the width as well as it was pushing the text onto another line below the icon.

.navbar-toggle {
  width: auto!important;
}

saguaros

trevorellis Is that ok now?

trevorellis

saguaros Yes, that's all done. Thanks!