Please post a link to your site.
It’s http://www.westernidentity.info .
I would love some help as I still haven’t figured it out, thanks!
It’s a bit difficult because your entire header is a background image, so you have to play all sorts of games with that div to ensure the background is always visible. I recomend that your reconsider that and use that as a image rather than a background image.
I would do that… but I don’t know how. Could you advise me? I just want that image to always be at the top of the page, and scaled to fit mobile devices. I feel like that shouldn’t be so hard but I’m having a lot of trouble.
are you using a child theme? If so, edit header.php.
Okay, I will. But how, I tried putting a lot of things in a lot of different places, anything specific you can recommend me?
Hope I don’t sound stupid/needy, I tried google and couldn’t figure it out.
Andrew Nevins
(@anevins)
WCLDN 2018 Contributor | Volunteer support
Remove the white space in your header image: http://westernidentity.info/wp-content/uploads/2016/06/Header2-1.jpg
Then you can consider using the ‘contain’ background-size style.
I’m not sure what you mean or how that would fix things. For example right now I took out my custom CSS so I’m back to square one, and on mobile you don’t even see the header, where as on desktop it works fine. I just need some simple way to make sure the header is there on mobile, can’t I just write that in somehow? I’m even willing to make another smaller header for mobile if that makes it easier somehow.
Andrew Nevins
(@anevins)
WCLDN 2018 Contributor | Volunteer support
What solution are you looking for?
I want the header on my website to show up on mobile the same way it does on desktop.
http://www.westernidentity.info
Andrew Nevins
(@anevins)
WCLDN 2018 Contributor | Volunteer support
Have you tried the ‘contain’ method?
No, but I’m not sure what you mean by that.
I feel like there might be a miscommunication here, just in case, I got it to show up and scale on mobile, but then the menu overlapped it. to my understanding it did this because I made the header part of the background, and therefore it was then overlapped.
In the default state the code for my theme just removes the header entirely for mobile, it just isnt there.
Andrew Nevins
(@anevins)
WCLDN 2018 Contributor | Volunteer support
You’ve got loads of “!important” declarations that will override our suggestions of code, so it’s difficult for us to tell you code that will work.
So this probably won’t work;
@media (max-width: 768px) {
.site-header {
background-size: contain;
}
}
No, it didn’t work.
It’s just a little frustrating because I noticed that another person’s website uses the same exact theme as me, and he’s solved this problem: http://www.rooshv.com . I’m trying to look at his code to see how, but on mobile his site loads with a smaller header and the menu is in the right place. On mine, on mobile there is no header.
