Navigation at the bottom in small screens

You could hide the bottom menu with this CSS in your child theme:

.site-footer .main-navigation {
  display: none;
}

You’ve also got this code in your child theme’s stylesheet (line 19):

.header-image {margin: -50px auto 0 0; }

which moves the header image up 50 pixels, hiding the menu button. It looks like someone tried to comment out the code, but they didn’t use the proper syntax: you use /* and */ to create a comment in CSS. It also looks like there’s some leftover code from something else.

I wanted to move the header image up to eliminate so much white space at the top of the site.
This code did that (to help somebody else, maybe)

body:not(.custom-background-image):before, body:not(.custom-background-image):after {
  height: 0;
}

But I should have removed the commented part. Thanks for the correction on my comments (S)
AND I see what you’re saying about the header-image covering the menu button.

I replaced the header image with a png with transparency so the menu button shows. The quality of the image needs some work.. but that’s progress.

I’m wondering if a z-index might do the same. In a quick try, I couldn’t figure out where to put that.. but I only spent a minute or so.
Got ideas?
And thanks for sending me in the right direction.

Honestly, what you’ve got now doesn’t look too bad, at least to my eye. Setting z-index on both the menu button and .header-image would work, too. Another option might be to explicitly set a width on .header-image, since you know how wide the logo will be. You’d have to change it, obviously, if they ever changed their logo, and it may not work too well on a smaller phone, though.

I’m having the same problem with the theme menu being posted at the bottom of the page instead of at the top on small screens. The problem is that when I click the menu button on my Samsung Galaxy S4 mobile device, it doesn’t take me to the menu displayed at the bottom, but instead just highlights the button and does nothing, so it appears the menu bottom is broken on mobile devices, unless you manually scroll down to the bottom of the page to find it.

Seems a simple solution to resolve this problem would be for the developers to create a anchor link to take the viewer to the menu at the bottom of the page when the user clicks the menu button on the mobile devices. Otherwise it appears users on mobile devices.

You can view the problem on our site at: 4witness.org :

Christy