Mobile Header displacement?

On the mobile version of my site, the header slips down below the title and it looks really weird. Is there any way to avoid this behavior and keep the header image behind the title, or eliminate the header image on the mobile site only?

Thank you!

Hello Arshness,

Can you please provide a link to your website in order to let me inspect it?

Kind Regards, Roman.

Sorry, www.darksbanebooks.com

Thank you!

Arshness, I have just checked your website but I don’t see the issue. Can you please provide some explanatory screenshots?

You can upload screenshots to your WordPress Media Library and share a link, or you can use one of the online screenshot services.

Kind Regards, Roman.

On the mobile site only.
The header slips down below the title.
The header image is the rainbow with black lines through it.

That image slips below the title and it looks weird on mobile.

Can I make it so that doesn’t happen? Or remove the header image on the mobile site only?

Okay Arshness, thank you for the screenshot. Please try to use the following CSS code.

You can add CSS code in DashboardAppearanceCustomizeAdditional CSS (WordPress 4.7 and up). Also you can add CSS code directly to style.css file of your child theme.

@media only screen and (max-width: 1024px) {
    header#masthead.site-header {
        position: absolute !important;
        background-color: transparent;
    }
}

Please feel free to ask any other questions that you might have.

Kind Regards, Roman.

Thank you, Roman.
That does what I was hoping, but it does some awkward things with the site title and the page title below.

Any thoughts on how to make the site title and header stay up on the header image while the site headline below stays below the menu?

Please try to add this CSS code as well:

div.header-image > img.header-inner {
    min-height: 180px;
}

Kind Regards, Roman.

Brilliant thank you!!!

One more question,
Is it possible for the tablet site to show the menu items instead of the menu button?
(I.e. more like the destop site)

Thank you so much!

Arshness, your desktop menu contains submenus that open on hover, but it’s not so easy to hover on touch screen :slight_smile:

Anyway, I don’t think that there is an easy way to do that properly. Looks like it requires some coding and testing on different screen resolutions, this goes beyond our support policy. It’s considered advanced customization.

As an option, you can contact Codeable for this kind of service, or find a freelancer on Upwork.

Kind Regards, Roman.

Roman, I am … such a derp. Thank you!
You’re right. :slight_smile: Touch screen changes everything! haha!

No worries! I will keep it as is!

You are welcome Arshness!

Kind Regards, Roman.