Bug on the dropdown of inline navigation on my home page

Support
#1

Here is my staging website: http://www.staging.southcobbarts.org. You’ll notice on the home page at the top, our Events item dropdown does not work. This is a pro header. We have two proheaders for this site. One on home page (which has two nav bars you will see) and the interior pages. Actually there is a third used specifically for plug in generated content (events pages). Only the top nav on the home page does not work. All the rest of our dropdown navigation works. We think it’s a bug as we checked and double checked consistency of our header settings with the ones that are working. Can you help us please. Let me know what you need from me, .Thank you.

#2

Hello There,

Thanks for writing in! Please edit your custom header and in the bar settings (the one containing the menu), you will need to change the z-index. The default value is 9999, please change it to 1000 or more to make sure that the menu will display on top of any other elements in your header.

Hope this helps. Kindly let us know.

#3

This solution did now work for us. We have a second nav bar on the page that becomes the sticky bar. That drop down works. The settings are identical for both. Is there any other help you can offer?

#4

Hi there,

On the same place look for the Content Scrolling option which is shown in the screenshot given on our last answer. Please kindly make sure it is turned off.

If you still have problems kindly get back to us with the URL/User/Pass of your Wordpress dashboard using the Secure Note functionality of the post to check your settings in the Header Builder.

Thank you.

#5

The content scrolling is “off” already so that is not the problem. website name is: http://staging.southcobbarts.org/wp-admin Appreciate any help you can give…

#6

This is because of z-index stacking. Think of this as layers in an image editing software. The higher the number, it stacks higher. Please see this screencast to understand this better https://youtu.be/qorCw0elu6s

Thanks.

#7

Xian… I am so happy that you were able to show me the solution!! The video was an incredible teaching tool for me. And I cannot tell you how much I apprecate it… I was able to make the change myself and have it work which is much more rewarding than having someone do it for me. THANK YOU!! I appreciate you…

#8

You are most welcome. We are just glad we were able to help you out. :slight_smile:

#9

I just noticed … after we had made the changes - that there is one section (SCAA Events section on the home page) when you scroll up the round images scroll over the navigation? Is this to do with the order of the bars?

#10

Hi there,

Your header bar’s z-index is set to 1, and that appears under and just above the 0th element. please change it to something like 9999. If you have multiple header bars that dependent to z-index, like if you wish to make them appear above one another, then you can set incrementing z-index for each header bar, like 9991, 9992, 9993, and so on.

Your issues with the circle will not be fixed, 1 is almost nearest to 0. Another way is setting those circles to 0, but they will appear behind all other elements with z-index greater than 2, and it fixed one single issue but creating more.

Thanks!