I would like to create an animated top menu

This topic has 21 replies, 5 voices, and was last updated 2 years, 11 months ago by Fernando.

Viewing 15 posts - 1 through 15 (of 22 total)

1 2 →

Author

Posts
March 31, 2023 at 4:21 pm #2591362

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?

March 31, 2023 at 4:33 pm #2591375
Ying
Staff
Customer Support
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;
}
```
March 31, 2023 at 4:56 pm #2591387

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;
}

March 31, 2023 at 5:03 pm #2591392

Mel

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

April 1, 2023 at 2:35 pm #2592435

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

April 1, 2023 at 4:56 pm #2592511

Ying
Staff
Customer Support

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);

April 1, 2023 at 9:20 pm #2592617

Mel

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

April 2, 2023 at 2:11 am #2592795

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?

April 2, 2023 at 6:57 am #2593004
David
Staff
Customer Support
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/
April 2, 2023 at 12:13 pm #2593531

Leo
Staff
Customer Support

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 🙂

April 2, 2023 at 1:02 pm #2593567

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;
}

April 2, 2023 at 6:19 pm #2593763
Fernando
Customer Support
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;
}
```
April 2, 2023 at 6:43 pm #2593772

Mel

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

April 2, 2023 at 6:47 pm #2593776

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?

April 2, 2023 at 8:37 pm #2593849
Fernando
Customer Support
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