Is it possible to only display the icon and not the menu text and instead have the text in an alt tag?

CommentFileSizeAuthor
#8 style.zip2.48 KBEven Dawn
Support from Acquia helps fund testing for Drupal Acquia logo

Comments

skilip’s picture

Hey jdblank,

It is definitely possible with CSS. Something like this:

.menu-item {
display: block;
overflow: hidden;
padding-left: 100%;
}

jdblank’s picture

Status: Active » Closed (fixed)

cool. thanks!

Even Dawn’s picture

Status: Closed (fixed) » Active

Hi,

I am using the menu icons module with Drupal 6.4 and would like to display the icon without the navlist text link. Where do I put this code from the post above to get it working?

.menu-item {
display: block;
overflow: hidden;
padding-left: 100%;
}

Thanks alot!

skilip’s picture

Hi Even,

best place to put this style is in your theme's styles.css.

skilip’s picture

Status: Active » Fixed
schmoell’s picture

FWIW it is

.menu_icon {
display: block;
overflow: hidden;
padding-left: 100%;
}

and will also fix issues with themes, where the icon gets clipped.

Thanks for the nice work !

skilip’s picture

Assigned: Unassigned » skilip
Status: Fixed » Needs work

This should be placed in README.txt

Even Dawn’s picture

FileSize
2.48 KB

Hi Skilip, thanks for replying to me post all that time ago.

I have now got the site I am developing with the menu icons module online at www.sha-creations.com
I do not know where in the style.css to place the code.

.menu-item {
display: block;
overflow: hidden;
padding-left: 100%;
}

The menu I am using is a navlist, I have attached the style.css I am using. I am confused about whether to put the code in the header elements section, head section where the navlist values are, or the menu section of the stylesheet.

Thanks for your help!

Even

Even Dawn’s picture

Status: Needs work » Active
crosputni’s picture

notice above that schmoell corrected this---
instead of .menu-item you need to use .menu_icon

Even Dawn’s picture

ok crosputni, thanks for that code correction...

i'm still not 100% sure on where in the style.css the snippet should go, is it meant to be grouped with the other navlist settings?

crosputni’s picture

What do you mean by "grouped"? It should work fine if you put it anywhere in the style.css file.

SuperZambezi’s picture

I added this code to my styles.css and nothing has changed. I am using the Blue Curve theme.

.menu-icon {
display: block;
overflow: hidden;
padding-left: 100%;
}

Any help would be great. Thanks. :)

skilip’s picture

Status: Active » Fixed

@SuperZambezi: it should read .menu_icon {....

I've added this to README.txt.

Status: Fixed » Closed (fixed)

Automatically closed -- issue fixed for 2 weeks with no activity.

vickymos’s picture

sorry for reopening this..
i'm trying to hide my primary menu text but it seems that the code above gets overriden by code in the danland theme.. any ideas before i start ruining things?
thnks

Ausnahmezustand-1’s picture

Hi Vicky...
same here... in my case was the solution:

a.menu_icon span {
display: none;
}

because i spends all my menu listlinks with a template-override the span-tag...

calefilm’s picture

Version: 6.x-2.0 » 6.x-2.4

Should I open up a new issue if this is closed? I have the same problem. Using Beach theme and can't get rid of the menu text. Am applying it to my stylesheet correctly. Tried all above options. Still not working. Using Firefox and Safari.

I will add that I got this error when running updates after installing Menu_Icon.

The selected file /Applications/acquia-drupal/tmp/php/file70Y0ly could not be uploaded, because the destination is not properly configured.

so an empty file: file70Y0ly was created in the tmp/php folder. I presumed it was because the images folder in menu_icon/images wasn't added yet and this file was supposed to go into the images folder? In any case, I didn't move any files or change anything. just created images folder inside sites/all/modules/menu_icons/images/default_icon.png

Kurt Adamson’s picture

IF anyone else is still trying to get this to work and the instances above aren't working try

a.menu_icon
{
display: hidden;
overflow: hidden;
padding-left: 100%;
}

Thinking some people are missing the "a".

bryancasler’s picture

Any possibility of this becoming a baked in option for the D6 and D7 branches?

eiland’s picture

For what its worth, I used in conjunction with nice menus

a.menu_icon {
    overflow: hidden;
    overflow: hidden;
    text-indent: 1000px;
    width: 16px;
}
alviSic’s picture

Actually in menu_icons module configuration you can check check-box which says "Hide menu titles if icon is present".
It hides menu titles.

narco’s picture