Mobile menu – last menu item disappearing below footer on iphone 4

Hi @marls40

It looks like you have this CSS style effecting your site’s footer:

#colophon, .site-footer {
    position: absolute;
    bottom: 0!important;
    width: 100%;
    background-color: #ffaa80;
}

That position: absolute is causing the footer to overshadow the bottom of your menu on smaller devices like an iPhone 4.

Try editing that to position: static and you should be all set.

Be sure to make this change in child theme, a plugin like Jetpack (use the Custom CSS Module) or in the CSS editor that’s built into the Customizer in WordPress 4.7. Don’t modify your theme directly ??

Hi @shireling

Thanks for your reply. I built it with a child theme, so I’ve been editing the css in my text editor.

I’ve tried changing the footer to position: static that but it brings the footer up the page. This page has no content apart from the header, footer and background-image. When I was building the site, I had some issues with keeping the footer at the bottom on all pages and at all screen sizes.

Hi @shireling

Thanks for your reply. I built it with a child theme, so I’ve been editing the css in my text editor.

I’ve tried changing the footer to position: static that but it brings the footer up the page. This page has no content apart from the header, footer and background-image. When I was building the site, I had some issues with keeping the footer at the bottom on all pages and at all screen sizes.

I see what you mean.

You could try making the footer positioning dependent on screen width, like this:

@media screen and (max-width: 400px) {
    #colophon, .site-footer {
        position: static;
    }
}

With that, the footer will become static only on small screens.

Thank you @shireling . I thought it would most likely be a media query issue but I was just wondering if I had missed anything else. Thanks for your help!

You’re welcome! ??