Removing header in mobile view

[nomad_jess]

Hi there,

My header is detailed so it looks strange when scaled down on mobile. I'm looking into two options:

1. Removing the header image altogether when viewed on mobile.
2. Replacing the header with a text title when viewed on mobile.

I've been trying a number of snippets of code I've found online, but so far nothing has worked. If anyone has some insight, I'd greatly appreciate it.

Many thanks in advance,

Jess

http://notesofnomads.com

[Brad Dalton]

Here's one solution which works.

Took me a few hours to work out and test.

---

Tutorials for StudioPress Themes.

[nomad_jess]

Hi Brad,

Thank you very much for getting back to me. I went to the tutorial but I have to pay to access it?

[frobn]

Quickest way to do it is with css.

Put this in your style sheet:

@media only screen and (max-width: 400px) {
.site-header {display:none}
}

Change the min-width to whatever width you want the header to disappear.

If you want an alternate header for mobile you can include it in the css instead of display:none by declaring a different image, i.e.

@media only screen and (max-width: 400px) {
.site-header { background-image: url("your-mobile-image.png") }
}

Hope this helps.

[Author]

Posts