CSS and mobile (hamburger) menu

I thought that the mobile hamburger type menu was quite difficult to see (white and light grey). So I put together some CSS that adds colour to it and allows some text to be added next to it.

/* In Mobile the hamburger menu was a little camouflaged */
#kn-app-header {
color: #61dd61 !important;
}

/*Highlight the mobile menu with some text*/
@media screen and (max-width: 767px) { #kn-app-mobile-container:after {
content: 'Menu and Logout';
} }

The code above is straightforward but the text still appears on a login page where it is out of context.
It took a while to get the following solution but it seems to show the text only when the mobile menu is also being shown.

/* In Mobile the hamburger menu was a little camouflaged */
#kn-app-mobile-container div label i.fa {
line-height: 2px;
color: #61dd61 !important;
}

/*Highlight the mobile menu to the user*/
#kn-app-mobile-container div label i.fa:after {
content: ' Menu and Logout';
font-size: 16px;
}