Mobile menu drop down is behind other...

User 188640 Photo


Registered User
895 posts

I'm posting this in here because it's not actually a menu issue. The menu works fine on the entire site even through the full responsive range except on the index page.

When the site gets down to the mobile menu button on the index page the drop down menu is behind the content which is three containers. Since this is the only page affected I was wondering can I have a z index issue with the containers?

Here's a link to my test domain but don't use the Home links as it will take you to the live site I'm rebuilding:
http://mytestblog.net/el/

I'm also attaching an image to show what's happening at the mobile size. It happens in portrait and landscape on my phone.

Thanks for any input.
Attachments:
A Rose is Just a Weed in a Corn Patch!
User 187934 Photo


Senior Advisor
20,181 posts

I would get these taken care of as it may fix the issue.
https://validator.w3.org/nu/?doc=http%3 … et%2Fel%2F
I can't hear what I'm looking at.
It's easy to overlook something you're not looking for.

This is a site I built for my work.(RSD)
http://esmansgreenhouse.com
This is a site I built for use in my job.(HTML Editor)
https://pestlogbook.com
This is my personal site used for testing and as an easy way to share photos.(RLM imported to RSD)
https://ericrohloff.com
User 188640 Photo


Registered User
895 posts

Eric,

Thanks for that link. The charset was added by menu builder which I would have never thought of without checking like I should have.

Some of the older tags I was using just to see how it would look when I had time to get the css fixed.

I did have one open a tag that I didn't catch.

That still didn't fix the drop down on the index page but I think I'll just fix the css and then try and figure out the drop down thing on the index page.

Thanks for letting me know I forgot to do one of the more important things when building a website. :rolleyes:

A Rose is Just a Weed in a Corn Patch!
User 78051 Photo


Registered User
201 posts

Hey Ernie

Looks like you need to add style="z-index:99;" to the <li> elements of the menu - take a look at this: http://prntscr.com/bfjxm6

eg
<li id="menu_2" class="has-flyout menu_2 menu_items" style="z-index: 99;">
User 188640 Photo


Registered User
895 posts

Jamie,

That worked. Thanks.

Maybe someone can answer this, why do I need to put a z-index bandaid on one page of a website that has the same menu on every page? The menu has a z-index of 2000 in the style sheet for .menu #menuBuilder #nav ul li ul.submenus. Is there another place in the style sheet that I need to add a z-index?

Am I missing something in menu Builder when I created this menu?

Thanks in advance for any answers.
A Rose is Just a Weed in a Corn Patch!
User 78051 Photo


Registered User
201 posts

I don't use menu builder so can't comment on it structure per se

What you have to remember is that although the menu may be the same on each page, are the other elements that are both above and below the menu itself (from page to page). I would guess that in this case possibly not.

In terms of other z-index', I would suggest doing a search for z-index on any css page that you link to on a given page and try to get an overview of how the layers stack up in relation to each other
User 188640 Photo


Registered User
895 posts

I guess it must have something to do with the three containers so I just went into the style sheet and figured out where to add the z-index in there. It's working now but I'd still like to find out why it acted like that.

I know there's a setting in RSD for z-index but I haven't found out how to use it. It stays grayed out all the time. Maybe someone who knows how it works will come by and tell us how that works.
A Rose is Just a Weed in a Corn Patch!
User 103173 Photo


VP of Software Development
0 posts

Ernie Hodge wrote:
I guess it must have something to do with the three containers so I just went into the style sheet and figured out where to add the z-index in there. It's working now but I'd still like to find out why it acted like that.

I know there's a setting in RSD for z-index but I haven't found out how to use it. It stays grayed out all the time. Maybe someone who knows how it works will come by and tell us how that works.

You need to change the Position to Relative, Absolute or Fixed. When you do that, the options will be enabled.
Learn the essentials with these quick tips for Responsive Site Designer, Responsive Email Designer, Foundation Framer, and the new Bootstrap Builder. You'll be making awesome, code-free responsive websites and newsletters like a boss.
User 188640 Photo


Registered User
895 posts

Scott,

Thank you for answering that question. I think that position was the only thing I didn't try. :D
A Rose is Just a Weed in a Corn Patch!
User 188640 Photo


Registered User
895 posts

I just wanted to add to this that I did a comparison between the containers and images.

With containers I had to use a z-index to get the drop down mobile menu to be in front (Thanks Jamie). With images the menu works fine so I guess there's a difference in images and containers when it comes to drop down menus.

I did use shadowing around the containers to make them look like they were up off the page but I didn't think I got them that high off the page. :D
A Rose is Just a Weed in a Corn Patch!

Have something to add? We’d love to hear it!
You must have an account to participate. Please Sign In Here, then join the conversation.