I'm having an issue where my submenu is being hidden behind the page content that says
"High-Quality LED Lights Without Breaking The Budget Our high-quality LED lights provide superior illumination while saving you money on energy costs.
SHOP NOW!"
The submenu with the issue is the one that has our product categories "LED lights, Troffers, Tubes, etc."
I've tried applying several different CSS codes and nothing seems to work.
This is a relatively simple CSS issue. I just checked your output HTML and located the top most parent container for the navigation. Then I added, in dev tools the following CSS:
.fusion-tb-header .fusion-fullwidth{
position: relative;
z-index: 100;
}
That essentially moves the navigation's parent container row to sit above (on the Z axis) the other content. Sometimes you have to specify the position incase it hasn't been specified elsewhere so that the z-index is processed. I don't know why this is the spec, just that it is.
This is the HTML where that change was made:
<div class="fusion-fullwidth fullwidth-box fusion-builder-row-3 fusion-flex-container has-pattern-background has-mask-background hundred-percent-fullwidth non-hundred-percent-height-scrolling fusion-custom-z-index" style="--awb-border-radius-top-left:0px;--awb-border-radius-top-right:0px;--awb-border-radius-bottom-right:0px;--awb-border-radius-bottom-left:0px;--awb-z-index:1;--awb-background-color:var(--awb-color1);--awb-flex-wrap:wrap;--awb-box-shadow:0px 10px 16px -12px hsla(var(--awb-color8-h),var(--awb-color8-s),var(--awb-color8-l),calc(var(--awb-color8-a) - 90%));"><div class="fusion-builder-row fusion-row fusion-flex-align-items-stretch fusion-flex-content-wrap" style="width:104% !important;max-width:104% !important;margin-left: calc(-4% / 2 );margin-right: calc(-4% / 2 );">
Now, since this is a commercial, third-party theme, I assume there are probably options in the editor where you set up the header where you would, and perhaps should, configure this. I base this suggestion on the sheer amount of inline styles that have been injected into the element.
If you're adding CSS I assume there's some 'Custom CSS' or 'Advanced Options - Custom CSS' type thingy in Avada or in the WP Customizer. Don't ask me where to add it though, I don't use Avada and am entirely unfamiliar.
It is good practice to stick to one methodology of applying styles. So if you're going through all the settings and going page by page toggling options, then keep doing that. If you're adding CSS to a child theme stylesheet, keep doing that. If you're adding CSS to a theme based tool for Custom CSS, then keep doing that. Few things as frustrating as poking around a site trying to figure our where someone made changes and finding that all the possible options were used without rhyme or reason.
Note: The CSS rule I provided may impact other areas where you don't want it to, so if possible add an ID to the <div> that houses the navigation and apply the styles to that ID rather than what appear to be re-usable class names.
I ran into the same problem. As Tony said, it's due to the z-index. In the Avada UI, select the container that includes your menu. Go to Container Options > Design. Scroll down and add a value to the z-index field.
