Overlap issues on small screen devices

HTML-CSS
1

Hi all. I am trying to determine why the nav menu in use is having all kinds of overlap issues when displaying on small screen devices (media at 640px and lower). Can anyone help identify where things are going off the rails?

Site is siliconvalleyseeds (dot) org

2

on your top-menu class, change the position to static instead of absolute. Absolute takes the list out of the normal document flow, like floats do. Static will put it back and push all the following HTML down below instead of having the menu go over the top it.

3

You can give the .top-menu a z-index of something like 10 or whatever it needs to always be on top.

.top-menu {
  z-index: 10;
}

The menu is a little crazy with how long it is. It doesn’t seem like the sub-menus are being used correctly.

The normal nav is also overflowing at around 950px. Not sure how you want to deal with it but right now it isn’t being allowed to wrap. I think even if it doesn’t look super great, that it would be better to let it wrap so users at least can use the menu.

/* nowrap is set here */
#header nav ul {
  white-space: nowrap;
}
4

Ah. Thanks so much! Did not realize absolute wasn’t what I was looking for. Much appreciated.

5

Thanks. Yeah, I’m still trying to nail down the menu properly. Might need to reorganize the menu structure in order to see better functionality. I really appreciate the comment.

By the way, what tool(s) would you suggest as helpful for folks playing with menu styles? I’m afraid my approach at this point is both clunky and unnecessarily painful…

6

Not sure what you mean by tools. For the CSS I just use the browser developer tools to test out changes.

How you make menus also depend on the theme and plugins used. Looking at your theme (demo) it doesn’t look like they are using collapsed sub-menus on the mobile nav layout. You can search for custom menu plugins and see if there is anything you can use. There are also mega menus.

You can of course also do it all yourself with PHP to edit the theme if needed and using custom CSS. But that is pretty involved.

7

Yes. Actually I’ve taken a basic theme and made it my own, which is a bit precarious (I’m not a front end guy). And yes, I just use the dev tools in chrome; I’m always curious if there are better options out there.

I found a mobile menu plugin that looks promising. The one issue is that for my nested menus, I’d like to be able to open the topmost menu, but the plugin seems to only open the set of submenu items when the top item is clicked on. I’ll look to see how difficult it would be to associate the text with a page open, and the down arrow with the menu cascade. That would be perfect for what I’m looking for.

Thanks again for the help.