Menu Hide Label CSS

[BTV]

Hello,

I am using your nice theme with Top-Menu Bar. In Menu-Settings I have set Icons for each Menu Entry with “hide label”.

Is there also an option to show label on Hover-Effect (just on desktop version), but in Small font-size unter the Icons?
Is it possible to “hide label” just with CSS - I want to show the Label on mobile edition.

Link to website: www.barmer-tv.de

Thanks for your help and answer.

[friech]

Hi There,

Thank you for writing in, but this is actually a request to customize a 3rd party plugin (Menu Icons).
But yeah we can help you with a few CSS, please enable the Navigation Label and lets see what we can do.

Cheers!

[BTV]

Thank you for your reply.

I have enabled the Navaigation Label for one item “Judo”. This label is side-placed next to the Icon.
It will be nice if the label can be shown unter the Icon.

Do you need more information from my configuration?

[thai]

Hi There,

Please try adding this custom CSS under X > Theme Options > CSS:

.x-navbar li.menu-item-225 > a > span > span,
.x-navbar li.menu-item-225 > a > span > img {
    display: block;
}

Hope it helps

[BTV]

Wow - nice support. It work´s: now the label is shown at top of the icon.

But there is one thing missing: the label is shown always - I need it only at Mouse-Over the one menu entry.
Otherwise the menu labels are too much.

[Joao]

Hi There,

Try using the follwoing code instead:

.x-navbar li.menu-item-225 > a > span > span,
.x-navbar li.menu-item-225 > a > span > img {
    display: block;
}

.x-navbar li.menu-item-225 > a > span > span {
    display: none;
}

.x-navbar li.menu-item-225 > a > span > span:hover,
.x-navbar li.menu-item-225 > a > span > img:hover {
    display: block !important;
}

Hope it helps