Tagged: 

Viewing 4 posts - 1 through 4 (of 4 total)
  • Author
    Posts
  • February 4, 2021 at 9:17 pm #1277790
    bdeller

    Hi

    Is there a way to change the menu item text on-hover?
    For example, change the word ‘Shop’ to ‘Coming Soon.’?

    I think it’s possible to do so with content: property in CSS, but I can’t see to get it work. I would use a # to determine no link.

    Here’s the code I am trying to get to work on the CONTACT menu item (for testing)

    #menu-item-881 a:hover
{
  content: 'Coming Soon'!important;
  display: block;
}

    But with no luck…

    At present, I have an image doing the job – the inactive state is referenced in the Menu set-up, and the on-hover action is in the CSS. That works fine, but the image has to be really small to remain aligned. Ideally, I would like it twice the size, but when I change the graphic size is no longer correctly aligned. Plus it’s quite blurry at such a small size – as it’s sized for the space not scaled down in place.

    Here’s the current CSS code I am using

    #menu-item-798 a:hover
{
content: url(https://studiofaeger.creativecontrol.net/wp-content/uploads/2021/01/FS_50.png)!important;
background-repeat: no-repeat!important;
}

    Here is the development site for reference: https://studiofaeger.creativecontrol.net/

    You will see in the menu the end item is the one I either want to update the images sizes for or use a content change on-hover. My client would prefer the image route, but would be happy with the text option too.

    Thanks for any help that anyone can offer.

    February 8, 2021 at 6:54 am #1278553
    Ismael

    Hey bdeller,

    Thank you for the inquiry.

    This css code should render the “coming soon” text and remove or hide the initial image on hover.

    #menu-item-798 a:hover .avia-menu-text::after {
	content: "Coming Soon!";
}

#menu-item-798 a:hover .avia-menu-text img {
	display: none;
}

    Best regards,
    Ismael

    February 8, 2021 at 7:33 am #1278556
    bdeller

    Thanks Ismeal

    Is there a simple way I can get the same effect just with text and not using the initial image?

    So having the navigation text (not image) saying “Faeger Store” and then on-hover say “Coming Soon”. I

    I have tried it on another menu item and I can get the text to append using the ::before or ::after element – but this does not replace the navigation text.

    Is there a version of the code below that is just for text and the img tag?

    #menu-item-798 a:hover .avia-menu-text img {
	display: none;
}

    Also, what’s the best way to stop the navigation jumping about (due to the different number of characters in the words)?

    Thanks as ever for any help.

    February 9, 2021 at 12:02 pm #1279015
    Ismael

    Hi,

    Have you tried removing the hover state from the above css code to set the initial text? This should work.

    #menu-item-798 a.avia-menu-text::after {
	content: "Faeger Store!";
}

    Best regards,
    Ismael

  • Author
    Posts
Viewing 4 posts - 1 through 4 (of 4 total)
  • You must be logged in to reply to this topic.