Hi,
I'm trying to setup a skin with one requirement being to have a menu with no text, only a clickable icon per root menu item. The icons are 120 px large.
I have tried two ways to do such a menu, but found none of them so good :
My first idea was to simply configure an icon for each tab on my site and found a way to hide the menu item texts. The problem here is that I never could have the text disapeared. At best, I could manage the text appearing under the icon.
Second idea was to specify a background image for each menu and make the item invisible:
..mainMenu .mi1 span {visibility: hidden}
.mainMenu .mi1 {background: url(images/atebas.jpg) no-repeat left top;}
In this case, the problem is that the height and width of the menu item seems to be limited to those of the text zone, even if it is not visible. I found a workaround to this by configuring a dummy icon of the same dimension for each tab. Not pretty.
Any idea to produce an icon-only menu without configuring tabs?
I'm using DNN 5.0 and the DNNMenuNavigationProvider control for the menu.