[Resolved] I would like to create an animated top menu

[Mel]

Hi, I am using the MyPet Template. I would like to have a small background image for the top menu points when selected or active. It needs to be above the menu text. How do I do that please?

[Ying]

Hi Mel,

Try this CSS, replace YOUR-IMAGE-URL with the actual image URL.

.main-nav > ul > li.current_page_item:before, .main-nav > ul > li:hover:before {
    content: "";
    background-image: url(YOUR-IMAGE-URL);
    width: 20px;
    height: 20px;
    background-size: cover;
    position: absolute;
    left: calc(50% - 10px);
    top: -20px;
}

[Mel]

Great thanks. I got it to work except I can’t figure out how to horizontally center the image above the text of the menu points. Here is my altered CSS:

/* Animated Menu */
.main-nav > ul > li.current_page_item:before, .main-nav > ul > li:hover:before {
content: “”;
background-image: url(https://www.hundetraining-mit-roya.at/staging/wp-content/uploads/2023/04/sniffingDog.png);
width: 90px;
height: 59px;
background-size: cover;
position: absolute;
left: calc(50% – 10px);
top: -55px;
}

[Mel]

Also, I would like the image not to show up on the mobile menu please.

[Mel]

Hi, sorry about my comment above, it doesn’t show up on the mobile menu, which is great.

I am still waiting for a reply to my comment above that one, regarding how to horizontally center the background image above the text of the menu points.

Thanks
Mel

[Ying]

In my css, I used 20px as the width, the 10px in left: calc(50% – 10px); is 20px / 2 = 10px.
If you are using 90px as the width, then change the 10px to 90px /2 = 45px, so try left: calc(50% – 45px);

[Mel]

Thanks, I tried that but the pic is still not centered above the individual menu point wordings, which are different lengths each.

[Mel]

Hi again, sorry but I was wrong, the animated menu also shows up on mobile, which I don’t want. Can I disable it just for the mobile menu, if yes, how?

[David]

Hi there,

wrap your CSS in a @media query:

@media(min-width: 769px) {

Your CSS goes in here

}

Then it will only run on devices over 769px width.

More info here:

https://docs.generatepress.com/article/responsive-display/

[Leo]

Hi Mel,

Sorry – I accidentally removed the wrong replies and lost your follow-up questions.

Can you please let us know the issue again?

Sorry about that and thank you 🙂

[Mel]

I can’t figure out how to horizontally center the image above the text of the menu points.

Here is my CSS:

/* Animated Menu */
.main-nav > ul > li.current_page_item:before, .main-nav > ul > li:hover:before {
content: “”;
background-image: url(https://www.hundetraining-mit-roya.at/staging/wp-content/uploads/2023/04/sniffingDog.png);
width: 90px;
height: 59px;
background-size: cover;
position: absolute;
left: calc(50% – 10px);
top: -55px;
}

[Fernando]

Hi Mel,

Can you try this instead?:

.main-nav > ul > li.current_page_item:before, .main-nav > ul > li:hover:before {
content: "";
background-image: url(https://www.hundetraining-mit-roya.at/staging/wp-content/uploads/2023/04/sniffingDog.png);
width: 100%;
height: 59px;
background-size: 90px 59px;
    background-position: center;
background-repeat: no-repeat;
position: absolute;
top: -55px;
}

[Mel]

Thanks, that worked!
I would also please like to not have the background pic for the mouse hover state over menu points.

[Mel]

How do I wrap the CSS in the @media query please as suggested earlier?

You suggested:

@media(min-width: 769px) {

Your CSS goes in here

}

My CSS is:

.main-nav > ul > li.current_page_item:before, .main-nav > ul > li:hover:before {
content: “”;
background-image: url(https://www.hundetraining-mit-roya.at/staging/wp-content/uploads/2023/04/sniffingDog.png);
width: 100%;
height: 59px;
background-size: 90px 59px;
background-position: center;
background-repeat: no-repeat;
position: absolute;
top: -55px;
}

Could you please tell me the complete CSS dor this?

[Fernando]

Are you referring to something like this?

@media(min-width: 769px) {

.main-nav > ul > li.current_page_item:before, .main-nav > ul > li:hover:before {
content: "";
background-image: url(https://www.hundetraining-mit-roya.at/staging/wp-content/uploads/2023/04/sniffingDog.png);
width: 100%;
height: 59px;
background-size: 90px 59px;
background-position: center;
background-repeat: no-repeat;
position: absolute;
top: -55px;
}
}

What sort of background image is this? Do you have a sample screenshot of what this should look like?

Uploading Screenshots: https://docs.generatepress.com/article/using-the-premium-support-forum/#uploading-screenshots

[Author]

Posts