Pro Header Menu Bar covers Sub Links

Support
#1

I have created a Header with 2 bars. The first bar is the logo and navigation menu. The second bar contains a search element and social buttons. Looks good.

However, when you hover over one of the parent Top Links, the child Sub Links fall behind the second bar.

I’ve tried removing the background and making it transparent, but this doesn’t seem to work (and not the desired effect).

Is there a solution to have the Sub Links take primary precedence and cover the 2nd lower bar?

You can see http://puttingwomenintheirplace.com and hover over “Home”. There is a sub link titled “Progressive Candidates” that is covered by the lower bar.

Thanks in advance,
Joe

#2

Quick update: I was able to create a work-around by adding this css to my child theme:

.x-menu .sub-menu {margin: 3.0em 0 0 0;}

However, preference is to have menu sub links in front of additional bars.

Thanks again for any fix,
Joe

#3

Hi Joe,

You need to set the z-index of your bar with the image background to a lower number so that your sub menu will show up on top of it.

The z-index property specifies the stack order of an element.

An element with greater stack order is always in front of an element with a lower stack order.

Hope that helps.

2 Likes
#4

Perfect. Thanks again for the great support. I will quickly improve on all these new features with flexes and z’s…

#5

You are most welcome. :slight_smile:

1 Like