Adding a Label to the Navigation Slide Out Button

[jmcgill]

Is there a way to add a label to the Navigation Slide Out Button? If a label is not possible, can a tooltip be added? I attempted to add the label to the image file, but the image text was blurry and the tablet.css restricts the icon size to 48x48. The size can be altered in the tablet.css, but I'm working on a skin template that I can share with novice CSS users. I'm pretty sure they will freak out if I ask them to alter the tablet.css in the Output folder. Any ideas? Thanks!

[NorthEast]

Can't you just add this CSS to your own stylesheet so that it overrides tablet.css?

[jmcgill]

That was a good suggestion. I added a duplicate CSS entry in the MainStyles.css, but altered the width to accommodate a longer image that included a label. Unfortunately, the two CSS entries (MainStyles.css and Tablet.css) canceled each other out and no icon appeared. Once I removed the entry from the MainStyles.css, the icon reappeared.

[NorthEast]

If you've edited tablet.css and your CSS works, it should just be a case of using the same CSS in your main stylesheet - since that is loaded after tablet.css.

Anyway, maybe a simpler solution is to do something like this?

Code: Select all

.menu-icon::before
{
    content: "Menu";
    color: #ffffff;
    position: relative;
    left: -40px;
    top: 15px;
    float: left;
}

[jmcgill]

That did the trick! I tweaked it a bit so the icon would appear first followed by the text. It looks beautiful. Thank you so much.

Code: Select all

.menu-icon::before
{
    content: "Explore";
    color: #ffffff;
    position: relative;
    right: -10px;
    top: 12px;
    float: right;
    width: 120px;
}