Background color on hover of second submenu - Support | Kriesi.at

Viewing 14 posts - 1 through 14 (of 14 total)

Author

Posts
February 27, 2025 at 11:54 pm #1478176
rvga
Participant
Hey hello,
I have 3 needs:

1) I need a help to change background colour on hover of the secondary top menu.
Please check on that page and watch the top menu on the top right corner name: “Organisateurs de séjour de Vacances”.
It has 4 submenus and nothing happens when hovering them.

What css code should I use in order to highlight the hover effect?

2) Also as you can see, submenus appear a bit on the left side of the top menu.
How can I center align the 4 submenus just underneath the top menu?

3) What would be the css code to change the size of the main and the second menu please?

Can’t wait to hear from you.
Thanks for your tips.
- This topic was modified 1 month ago by rvga.
March 1, 2025 at 2:38 pm #1478325
Mike
Moderator
Hey rvga,
Try this CSS in your Enfold Theme Options ▸ General Styling ▸ Quick CSS field:
```
#header.header_color #header_meta .sub_menu li ul a:hover {
	background-color: red;
}
#top #header.header_color #header_meta .sub_menu li ul {
    left: 8%;
}
#header.header_color #header_meta .sub_menu li ul a,
#header.header_color #header_meta .sub_menu li a {
	font-size: 14px;
}
```
Please ensure to copy the code from the forum and not an email notification so the symbols are not converted.
adjust the color, font-size and placement (left) to suit.
After applying the css, please clear your browser cache and check.

Best regards,
Mike
March 2, 2025 at 9:56 pm #1478414

rvga
Participant

Hi Mike,
Thx for the css code, it works like a charm.
As you probably saw, I’d like to turn this top menu as a mega one, but despite I’ve checked the mega menu option, it remains a regular menu, not a mega one.
What did I miss?

P.S I always copy your code from the forum windows, thx for the tip.

March 3, 2025 at 6:14 am #1478431

Ismael
Moderator

Hi,

Thank you for the update.

Have you tried purging the cache after enabling the Mega Menu option? Please provide the login details in the private field so that we can check the menu settings.

Best regards,
Ismael

March 3, 2025 at 9:35 am #1478451

rvga
Participant

I’m cleaning cache every changes I make.

Another question:
Why does the first item of top menu (Partenaires de séjours de vacances) links to the last page visited instead of remaining empty? (#)
Test it!. Go to any page of the web, then check the link of the first item of the top menu…

March 4, 2025 at 4:26 am #1478515
Ismael
Moderator
Hi,

Thank you for the info.

We enabled the Mega Menu option for the Stage Sportif menu item. Regarding the top menu, it behaves like that because it is still essentially a link pointing to an empty anchor. If you want to completely disable it, you can add this css code.
```
#top #menu-item-1302 a {
    pointer-events: none;
}
```
Best regards,
Ismael
March 4, 2025 at 3:52 pm #1478587

rvga
Participant

Thx Ismael, your ccs code works fine.

I was unclear in my previous msg,
I meant that I wanted the top menu (‘Partenaires de séjours de vacances’) to be a mega menu.
As you can see I’ve checked the mega menu option but it is still displayed as a regular one, not a mega menu.

Why?

March 5, 2025 at 6:13 am #1478623

Ismael
Moderator

Hi,

Thank you for the clarification. Unfortunately, the mega menu can only be enabled for the main menu items. It’s not available for the top bar menu.

Best regards,
Ismael

March 5, 2025 at 4:01 pm #1478684
rvga
Participant
Thank you for the clarification. Unfortunately, the mega menu can only be enabled for the main menu items. It’s not available for the top bar menu.

So sad :(
Can we at least, display pictures inside top menu items?

Another question,
Check on that page for example and try to use a submenu element of the top menu.
See?
Since I’ve setup a mega menu in main menu, we cannot acces to the items of top menu.
Is it possible to fix that with a Z-index somewhere?
I don’t how to do that.
- This reply was modified 1 month ago by rvga.
March 6, 2025 at 8:18 pm #1478800

Mike
Moderator

Hi,
Unfortunately, there is not a way to add images to the top bar menu like the mega menu.

Best regards,
Mike

March 7, 2025 at 8:30 am #1478836

rvga
Participant

Ok Mike, gotcha.

What about my last question?
Since I’ve settup a main mega menu, I cannot access the items of the top menu any more.
How can I fix that?

March 8, 2025 at 1:30 pm #1478896
Mike
Moderator
Hi,
It looks like you have this custom css in your child this preventing clicks on your topbar sub-menu:
```
#top #menu-item-1302 a {
    pointer-events: none;
}
```
I assume that you want to remove the click on the main item “Partenaires de séjours de vacances” but want the click on the sub-menu items, so remove your css and use this instead:
```
.menu-item-1302 {
	height: 30px;
}
#top #header_meta #menu-item-1302 > a {
   pointer-events: none;
}
#top #header_meta #menu-item-1302 .sub-menu a {
   pointer-events: auto;
}
```
Please ensure to copy the code from the forum and not an email notification so the symbols are not converted.
After applying the css, please clear your browser cache and check.

Best regards,
Mike
March 15, 2025 at 8:05 am #1479372
rvga
Participant
I assume that you want to remove the click on the main item “Partenaires de séjours de vacances” but want the click on the sub-menu items, so remove your css and use this instead:

That’s correct Mike.

You perfectly understood my need.
Thanks of your code, now both main and top menus are working smoothly.

You can close this thread.
- This reply was modified 2 weeks, 6 days ago by rvga.
March 15, 2025 at 3:28 pm #1479405

Rikard
Keymaster

Hi,

Thanks for the update, we’ll close this thread for now then. Please open a new thread if you should have any further questions or problems.

Best regards,
Rikard
Author

Posts

Viewing 14 posts - 1 through 14 (of 14 total)

The topic ‘Background color on hover of second submenu’ is closed to new replies.