Menu bugs

The menu has now also overlapped the Logo on Desktop

Hi Elliot,

I have moved the menu underneath the Logo to get rid of the overlapping issue.

I still have two issues.

Issue 1.

The menu is supposed to have the following colouring for top level menu items and sub (dropdown) menu.

Inactive menu item:
Red background #d1202f
White Text #ffffff

Hover:
White background #ffffff
Red Text #d1202f

Current Menu Item:
White background #ffffff
Red Text #d1202f

I have done the Inactive and Hover settings in the Enfold – Advanced Styling
There is no option for Current menu item there so…

I was previously given this custom css in this support forum to apply to style the menu which I applied to the child theme css accessed through Appearance – Editor.

/*this is css for enfold menu*/

.header_color .main_menu ul:first-child > li.current-menu-item > a,{ background:#FFFFFF!important; color: #d1202f!important; } /* color of active menu item */
.header_color .main_menu ul:first-child > li.current_page_item > a { background:#FFFFFF!important; color: #d1202f!important; } /* color of active page */

.current-menu-item .avia-menu-text {color: #d1202f!important;}

The last line of CSS was necessary as the previous lines were not working for text colour for some reason.

Everything is fine until you click on the “Recent Work” menu item.
Once that page is active the dropdown menu underneath that menu item seems to have red text instead of white, making the sub menu items invisible.

If any other page is active, and you hover over the menu button “Recent Work” those sub menu items are the correct colour, red background, white text.

How can I fix it so that when the page “Recent Work” is active and you hover over the menu item “Recent Work” that the sub menu items are visible with white text on a red background.

Issue 2.

When you hover over a menu item a red line appears at the bottom of that button.
On the last button that red line does not stay within the button width but is aligned to the right.
How can I fix or just remove the line.

I think the decoration is span.avia-menu-text

Hi Elliot,

that got rid of the red menu button underline on hover but the other issues remained the same.

The css now reads

/*this is css for enfold menu*/

.header_color .main_menu ul:first-child > li.current-menu-item > a,{ background:#FFFFFF!important; color: #d1202f!important; } /* color of active menu item */
.header_color .main_menu ul:first-child > li.current_page_item > a { background:#FFFFFF!important; color: #d1202f!important; } /* color of active page */

.current-menu-item .avia-menu-text {color: #d1202f!important;}

.sub-menu .current-menu-item .avia-menu-text {color: #d1202f!important;}

.avia-menu-fx { display: none !important; }

Hi Elliot,

no I do not want the text white if it is a current menu item, the background is supposed to be white, the text is supposed to be red.

As I posted earlier;

The menu is supposed to have the following colouring for top level menu items AND sub (dropdown) menu.

Inactive menu item:
Red background #d1202f
White Text #ffffff

Hover:
White background #ffffff
Red Text #d1202f

Current Menu Item:
White background #ffffff
Red Text #d1202f

I have done the Inactive and Hover settings in the Enfold – Advanced Styling
There is no option for Current menu item there so…

I was previously given this custom css in this support forum to apply to style the menu which I applied to the child theme css accessed through Appearance – Editor.

/*this is css for enfold menu*/

.header_color .main_menu ul:first-child > li.current-menu-item > a,{ background:#FFFFFF!important; color: #d1202f!important; } /* color of active menu item */
.header_color .main_menu ul:first-child > li.current_page_item > a { background:#FFFFFF!important; color: #d1202f!important; } /* color of active page */

.current-menu-item .avia-menu-text {color: #d1202f!important;}

The last line of CSS was necessary as the previous lines were not working for text colour for some reason.

Everything is fine until you click on the “Recent Work” menu item.
Once that page is active the dropdown menu underneath that menu item seems to have red text instead of white, making the sub menu items invisible.

If any other page is active, and you hover over the menu button “Recent Work” those sub menu items are the correct colour, red background, white text.

How can I fix it so that when the page “Recent Work” is active and you hover over the menu item “Recent Work” that the sub menu items are visible with white text on a red background.

Hi Ismael, that fixed the sub menu buttons text not being visible when parent “Recent Work” is the active page

What is still not working is when any of the four sub menu buttons are the active page and you hover over their parent “Recent Work”, that active pages button text is not visible.

So if Agathos Financial is the active page and you hover over parent Recent Work the Agathos Financial button text is not visible.

I suspect the text is probably red as it is supposed to be but the background is not turning white as it should.

CSS now reads

/*this is css for enfold menu*/

.header_color .main_menu ul:first-child > li.current-menu-item > a,{ background:#FFFFFF!important; color: #d1202f!important; } /* color of active menu item */
.header_color .main_menu ul:first-child > li.current_page_item > a { background:#FFFFFF!important; color: #d1202f!important; } /* color of active page */

.current-menu-item > .avia-menu-text {color: #d1202f!important;}
#top #header .av-main-nav > li.current_page_item > a .avia-menu-text { color: #d1202f; }

.sub-menu .current-menu-item .avia-menu-text {color: #d1202f!important;}

.avia-menu-fx { display: none !important; }

Hi Ismael.

Thank you for the reply. That has now made the text of the current active page in the dropdown menu visible by making it white (It was red).

What we are trying to make it is white background and red text.

The custom css now reads;

/*this is css for enfold menu*/

.header_color .main_menu ul:first-child > li.current-menu-item > a,{ background:#FFFFFF!important; color: #d1202f!important; } /* color of active menu item */
.header_color .main_menu ul:first-child > li.current_page_item > a { background:#FFFFFF!important; color: #d1202f!important; } /* color of active page */

.current-menu-item > .avia-menu-text {color: #d1202f!important;}
#top #header .av-main-nav > li.current_page_item > a .avia-menu-text { color: #d1202f; }

.sub-menu .current-menu-item .avia-menu-text {color: #d1202f!important;}

.avia-menu-fx { display: none !important; }

#top #wrap_all .av-main-nav ul > li.current-menu-item > a span.avia-menu-text {
color: #ffffff !important;
}

#top #wrap_all .av-main-nav ul > li.current-menu-item:hover > a span.avia-menu-text {
color: #d1202f !important;
}

Hi Ismael,

that made the dropdown active menu item text and background white but after changing a previous line you gave me everything is now working.

The code for anyone who needs it is;

/*this is css for enfold menu*/

.header_color .main_menu ul:first-child > li.current-menu-item > a,{ background:#FFFFFF!important; color: #d1202f!important; } /* color of active menu item */
.header_color .main_menu ul:first-child > li.current_page_item > a { background:#FFFFFF!important; color: #d1202f!important; } /* color of active page */

.current-menu-item > .avia-menu-text {color: #d1202f!important;}
#top #header .av-main-nav > li.current_page_item > a .avia-menu-text { color: #d1202f; }

.sub-menu .current-menu-item .avia-menu-text {color: #d1202f!important;}

.avia-menu-fx { display: none !important; }

#top #wrap_all .av-main-nav ul > li.current-menu-item > a span.avia-menu-text {
color: #d1202f !important;
}

#top #wrap_all .av-main-nav ul > li.current-menu-item:hover > a span.avia-menu-text {
color: #d1202f !important;
}

#top #wrap_all .av-main-nav ul > li.current-menu-item a {
color: #d1202f !important;
background-color: #ffffff !important;
}

Thanks and you may close this thread.