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

[Mel]

I am sorry but after I added your CSS code above the following happened, which I don’t want:

The sticky header turned transparent. I have CSS that states a background color, it now stopped working.

Also, the background pic above the menu items disappeared completely, even on desktop view. I only wanted it to disappear for mobile view.

So I can’t send you a screen pic until the background image comes back.

Here is my CSS code:

/* Sticky Navigation */
nav#sticky-navigation {
background-color: #e7e0ca;
}
nav#sticky-navigation ul.sub-menu {
background-color: #e7e0ca;
}

/* Top Bar */
.inside-top-bar.grid-container p {
margin-bottom: 0;
}

/* Animated Menu just for Desktop */

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

/* Sticky Header */
.header-wrap {
position: fixed;
top: 0;
}

[Mel]

I changed the CSS bit you suggested back to this and got the background image back, only for desktop which is what I wanted. But the sticky menu is still transparent, and the CSS above which states the background color doesn’t work. How can I fix that?

/* Sticky Navigation */
nav#sticky-navigation {
background-color: #e7e0ca;
}
nav#sticky-navigation ul.sub-menu {
background-color: #e7e0ca;
}

/* Top Bar */
.inside-top-bar.grid-container p {
margin-bottom: 0;
}

/* Animated Menu just for Desktop */

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

/* Sticky Header */
.header-wrap {
position: fixed;
top: 0;
}

[Mel]

screenpic here https://postimg.cc/NL6hCKJF

[Mel]

Please see url and login to view in private info panel

[Fernando]

The code I shared is just for the image on hover of the menu items. And, the media query makes it only work for tablet and mobile.

It shouldn’t have broken anything.

Can you try removing it?

[Mel]

Hi, thanks so much for your patience and assistance. My client decided not to go ahead with the animated menu after all. So I won’t need any more help with this topic.

[Fernando]

I see. You’re welcome, Mel!

[Author]

Posts