How to add the word 'Menu' to the left of the hamburger

[Golden Eyes]

I'm totally stuck trying to add the word MENU to the hamburger and am hoping someone is able to point me in the right direction

You can see the test page at http://horseandriderphysiotherapy.co...menu-test.html

CSS currently reads -

#mainNav {
position: fixed;
right: -200px;
width: 200px;
height: 100%;
top: 0;
z-index: 10;
text-align: left;
}
#menuToggle {
position: absolute;
left: -47px;
z-index: 999;
background: rgba(0, 0, 0, 0.30);
top: 13px;
cursor: pointer;
}
#menuToggle .fa {
font-size: 18px;
margin: 7px 10px;
color: #fff;
}
#menuToggle:hover .fa {
color: #888;
}
.menuLinks {
position: absolute;
top: 0;
right: 0px;
background: rgba(0, 0, 0, 0.9);
width: 200px;
height: 100%;
z-index: 999;
padding: 10px 0 0 0
}
.menuLinks li {
list-style: none;
}
.menuLinks li a {
margin-left: 20px;
color: gray;
display: block;
font-size: 12px;
font-weight: 700;
line-height: 38px;
text-transform: uppercase;
}
.menuLinks li a:hover {
color: #888;


Any advice gratefully accepted

[Rick]

I don't really understand what you are saying. A look at your site (by the way I'm a horse owner myself), I just not sure what you are asking
Rcik

[Golden Eyes]

Hi Rick

Nice to 'meet' you

I want to add the word MENU, to sit to the left of the hamburger icon as there are still a lot of people who don't realise they need to click the hamburger icon to see the menu.
Or it could sit above it.

I'm open to any ideas on how to make this clear for those who aren't familiar with it.

[Rick]

OK, now I see what your are asking.

try this: <span class="sr-only">Toggle navigation</span>Menu&nbsp;<i class="fa fa-bars"></i> (FYI the &nbsp; [non breaking space] will create a space between word menu and the icon)

I got to ask, why are you using the collapsed menu rather, which is used for mobile devices. You could use a full horizontal menu that collapses down when the screen width is mobile only.

Rick