Transform the color of Max Mega Menu items on hover with another item in WordPress

Seeking help to change the color of my megamenu item when hovering over other items in the menu. Take a look at this image for reference:

I've tried using these CSS styles but it didn't work as expected.

#mega-menu-wrap-primary-menu #mega-menu-primary-menu:hover > li.mega-menu-megamenu > ul.mega-sub-menu li.mega-menu-column > ul.mega-sub-menu:hover > li.mega-menu-item > a.mega-menu-link { 
    color: #85918f;
}

#mega-menu-wrap-primary-menu #mega-menu-primary-menu:hover > li.mega-menu-megamenu > ul.mega-sub-menu li.mega-menu-column > ul.mega-sub-menu > li.mega-menu-item > a.mega-menu-link { 
    color: white;
}

Any suggestions on how to achieve this?

I am utilizing the plugin Max Mega Menu

Thank you in advance!

csswordpresswordpress-themingmegamenu

Answer №1

At last, the solution has been discovered. For those in need of a similar fix, I have shared the code below:

#mega-menu-wrap-primary-menu #mega-menu-primary-menu:hover li.mega-menu-item > ul.mega-sub-menu > li.mega-menu-row > ul.mega-sub-menu > li.mega-menu-column > ul.mega-sub-menu:hover > li.mega-menu-item > a.mega-menu-link,  #mega-menu-wrap-primary-menu #mega-menu-primary-menu:hover li.mega-menu-item > ul.mega-sub-menu > li.mega-menu-row > ul.mega-sub-menu:hover > li.mega-menu-column > ul.mega-sub-menu > li.mega-menu-item > a.mega-menu-link {
    color: #85918f;
}

#mega-menu-wrap-primary-menu #mega-menu-primary-menu:hover li.mega-menu-item > ul.mega-sub-menu > li.mega-menu-row > ul.mega-sub-menu > li.mega-menu-column > ul.mega-sub-menu > li.mega-menu-item:hover > a.mega-menu-link  { 
    color: white !important;
}

Warm regards

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

Display the user's location on Google Maps in addition to all other markers for a comprehensive view

How can I modify the code to prompt the user for their location only when they click on a specific button, and then show all markers on the map? This jsfiddle illustrates the current issues: Google map loads markers from a database, and the user is asked b ...

javascriptjquerycssgoogle-mapsgoogle-maps-api-3

Adjust item size and move them into the panel

I am looking to create a panel that arranges items in a specific layout shown here: https://i.stack.imgur.com/qw3lS.png Below is the code I have attempted so far: import React, { useCallback, useEffect } from "react"; import { Box, Grid, Tab, T ...

cssreactjsmaterial-uireact-typescript

Different ways to update the AutoComplete Style attribute

MuiInput-formControl { margin-top: 16px; Is there a way to reset the marginTop property to zero? I attempted the following method, but it was not successful. MuiFormControlLabel: { marginTop: 0, }, <Autocomplete disabl ...

csstypescriptmaterial-uiautocompletestyles

Create a focal point by placing an image in the center of a frame

How can an image be placed and styled within a div of arbitrary aspect ratio to ensure it is inscribed and centered, while maintaining its position when the frame is scaled? Ensure the image is both inscribed and centered Set dimensions and position usin ...

javascripthtmlcss

My webpage lacks responsiveness

I've recently put together an HTML page, but unfortunately, it's not responsive. My Code <!DOCTYPE html> <html> <head> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <style> ...

htmlcss

What is the best way to wrap text and move the lines up without affecting the bottom margin?

When the text length increases in the first image, it shifts upwards similar to what you see in this image. How can I achieve this effect? The use of "word-wrap" causes the line to break and move to the next line, which is not what I want. In the code sn ...

htmlcsswebsass

Checkbox failing to trigger

Check out my code snippet here: http://jsfiddle.net/raficsaza/mgukxouj/ I'm facing an issue with the checkbox in this code. It seems to be stuck at a false value and I can't get it to change. Is there a way to work with the "input" tag instead o ...

htmlcsscheckbox

Modify table row background color using PHP based on its position in the table with the use of a function

I am having trouble formatting my table to highlight different rows in distinct colors. The top row should be one color, the second row another, and the bottom two rows a different color each. This is to represent winners, teams getting promoted, and tho ...

phphtmlmysqlcss

Is there a way to align an image to the center using the display grid property?

Having some trouble centering an image within a 'display: grid' layout. Screenshot I attempted to use 'align-items' but it didn't seem to work either. Code: <section style="padding-top: 30px;"> <h4 sty ...

htmlcss

Is your webpage slow to respond after a page-refresh? (Delayed HTML rendering causing lag)

Whenever I adjust the screen size to that of a phone or any device smaller than 768px, the search bar doesn't display in its proper position until the page is refreshed. It should be correctly placed right from the start. Furthermore, when I resize th ...

javascriptcsstemplatesprestashopresponsiveness

How come using float:right causes the div to float towards the left instead?

I am new to CSS and currently facing a problem with positioning a div (#inner) in the bottom-right corner of another div (#container). Initially, I used float: right;, but upon inspecting the Html, I noticed that the inner div is appearing in the bottom-le ...

css

What is the best way to combine two sections in html/css/bootstrap?

I've been trying to create a simple webpage with a navigation bar and a section below it, but I keep running into an issue where there's unwanted white space between the nav bar and the next section in blue. Is there a way to eliminate this gap a ...

javascripthtmlcssbootstrap-4

How to align icon and text perfectly in a Bootstrap 5 Button

I am looking to align icons and text within a modal body: <div class="modal-body"> <div class="d-grid gap-2" id="someButtons"> </div> </div> This code snippet demonstrates how I insert buttons ...

javascriptcsstwitter-bootstrapbootstrap-5

Extracting the value of *data* from my HTML and displaying it in the console with Javascript

I'm struggling to figure out what's going wrong with this code. I've done some research online and it seems like I should just include the window.onload = function() at the beginning of my code. However, no matter what I try, the value alway ...

javascripthtmlcss

Look up a blog post on Wordpress and retrieve it using AJAX

I have a WordPress structure with the following HTML elements: <input type="text" id="search_subject"> <button id="btn_search_subject">Send</button> <div id="results_search"></div> <button id="back">Previous</button ...

ajaxwordpress

Reading Properties in VueJS with Firebase

<template> <div id="app"> <h1 id="title"gt;{{ quiz.title }}</h1> <div id="ques" v-for="(question, index) in quiz.questions" :key="question.text"> <div v-show="index = ...

javascripthtmlcssfirebasevue.js

Transforming nested JSON files into nested jQuery divs

Is it possible to iterate through two JSON files that have a parent-child relationship based on simple ID primary and foreign keys? Can we then display the data in a list of divs with the following characteristics: Hierarchical - child divs should only a ...

javascriptjqueryhtmlcssjson

Switch the style of a set of thumbnail images when clicked

I am working with a set of thumbnails where one has an "p7_current" class applied, giving it a border, while the rest have an "p7_inactive" class removing the border. My goal is to have the last clicked thumbnail in a group of 6 to have the "p7_current" c ...

javascriptjqueryhtmlcss

Dynamic drop-down navigation with rearranging menu

I am attempting to design a drop-down navigation bar with 2 rows. Initially, only 1 row is visible. Upon clicking the visible row, both rows should appear. Subsequently, when one of the 2 rows is clicked, only that specific row should be displayed. Below a ...

javascripthtmlcssdrop-down-menunavigation

Issue with CSS styles not linking correctly to ejs templates

I'm having trouble linking my CSS stylesheet in my project. I have the CSS file stored in a public folder with a css subfolder within it. Despite trying various methods, I can't seem to get the stylesheet to connect properly. Below is a snippet f ...

javascriptcssnode.jsexpressejs