Docs

[HubbubCA]

Hello.

I would like to remove the logo bar, or nav bar, or footer from one page only when viewed on phones only. Is there some CSS code I can add for each of those?

Here is the page I’d like to do this on: http://hubbub.ca/newsundre

Thanks do much!

Cheers,

Kevin

[HubbubCA]

This reply has been marked as private.

[Jade]

Hi Kevin,

Please add this code in the CSS customizer:

@media (max-width: 767px) {
    .page-id-430 .masthead,
    .page-id-430 .x-colophon.bottom {
        display: none;
    }
}

Hope this helps.

[HubbubCA]

Perfect! Thank you, Jade!

That test page now renders exactly as I hoped on all screens 🙂

After thinking about it, I adjusted your code slightly to leave the top logo bar on the page so I have a link back to the site’s homepage on phones:

@media (max-width: 767px) {
.page-id-430 .x-navbar,
.page-id-430 .x-colophon.bottom {
display: none;
}
}

Many, many thanks again, Jade, for your supremely helpful and very quick response!

Cheers,

Kevin

[Rahul]

Glad we were able to help you.

Let us know if we can help with anything else.

Thank you.

[Author]

Posts