text-indent: -9000px;
That will “hide” the text beyond the browser window width.
Thread Starter
filete
(@filete)
Hi sixhours, thanks for your reply!
But that CSS trick does not work,
everything just hides including the images I am using for the menu
You can set another style for the images within .page-item to reset the text indent. I don’t know how you’ve set up the CSS, but something like:
.page-item img {
text-indent: 0px;
}
Thread Starter
filete
(@filete)
Hi again,
Here´s the CSS style for one of the menu,
using the img does not work either:
#mainMenu .page-item-29 a{
background-image:url(images/botoes/Nos.png);
background-repeat: no-repeat;
background-position: 0px 0px;
}
Since you’re setting the background image on the link, text-indent won’t work because it’s both the text and the background image.
You’d need to separate it out, something like:
#mainMenu .page-item-29 {
background-image:url(images/botoes/Nos.png);
background-repeat: no-repeat;
background-position: 0px 0px;
}
#mainMenu .page-item-29 a {
text-indent: -9000px;
display: block;
width: 100%;
height: 100%;
}
I’m pretty sure that will still allow users to click on the link, even though the text is hidden. Then if you want a hover effect on the page-item background image:
#mainMenu .page-item-29:hover {
... your new background settings ...
}
Thread Starter
filete
(@filete)
Yep, I did notice that text-indent changed the background too,
so yes, thanks, separate will do the trick, I just had to add a cursor
property because since you are not doing a hover on the a tag anymore:
#mainMenu .page-item-29:hover {
background-image:url(images/botoes/Nos_on.png);
background-repeat: no-repeat;
background-position: 0px 0px;
cursor:pointer;
}
