I was playing with this last night, and as you found out we can’t just adjust the z-index of the navbar. Changing it’s z-index makes the button clickable, but the actual menu items are still not clickable.
The problem is that you have transparent content that is layered above the navbar that gets clicked on instead of the navbar. At first, it was content in the hero.content section. This is where the theme displays the Page Title and Page Slogan. You are not displaying anything in them, but the empty container was above the navigation menu button and intercepting the clicks. Changing the z-index of the navbar container fixed this. This is what @swilliam’s code did.
The more complicated issue is that now part of the main content area is covering the dropdown menu contents. If you notice, the clickable area in the dropdown menu stops at the top of your photo in the sidebar on the right-hand side. In customizing the theme, you moved this up to cover part of the hero banner. Since you also shrunk the hight of the hero area, it is covering the menu. You are also displaying the hero image at 25% of the browser height, which is why it works on your desktop, but not phones. If you shorten (and narrow) a window on your desktop, you’ll see that it happens there too. I was working on a laptop, so it was more obvious to me.
Z-index can only adjust the laying of objects that are in the same branch of HTML containers. In this theme, the body section of the HTML first contains a “hero” container (div) followed by a “main” content area. The z-index of navbar only affects it’s position within the “hero” area. Right now the “main” content area has a higher z-index so that your image overlaps on top of the hero image. So, even when the navbar container is the top layer of the “hero” container, it’s still below the “main” area.
Ok, so just adjust the z-index of the “hero” container up. Well, that fixes the menu and menu items, but now the photo is below the hero background image. Not good. What you’re trying to do is have the navbar from the hero container in layer 1, the photo from the “main” content area in layer 2 and finally the background hero image in layer 3. Unfortunately, this can’t be done with z-indexes with the current html layout.
We really need the navbar outside of the “hero” container, so that we can then use z-indexes to layer all three. Since they are all at the same “level”, that’s easy to do. To move that navbar DIV, we either need to edit the template or use javascript to change it’s position in the HTML. Each one has drawbacks. If you copy and modify the theme files, you will not get bug fixes/feature additions to that theme. If you use JS, then a change to the theme could break the JS.
As long as you test this thoroughly now and after updates to RW, then you can use the following to adjust the code. I’ve tested this locally in RW with Mountain theme.
First, use CSS to position the navbar at the top of the page and let it sit above the hero content. Paste this into the site-wide CSS area.
/* Adjust navbar to top and above other content */
.navbar {
position: fixed;
z-index: 999;
width: 100%;
}
Next, use javascript to reposition the navbar DIV to just above the “hero” DIV, so it’s at the same level as the other content. Paste this into the site-wide JavaScript area:
/* Move navbar DIV to top of the body section */
document.addEventListener('DOMContentLoaded', function() {
document.body.insertBefore(document.getElementsByClassName('navbar')[0], document.body.firstChild);
}, false);
Since this is getting pretty advanced, I was hesitant to post it. Anyway, the other choice would be to start over with a blank theme, and that would be a lot of work for you. Next site redesign, you may want to go that route, though. Anyway, standard “use at your own risk” disclaimer applies. Test first and then use at your own peril!