Mobile Header Background

Hi there,

1. try this CSS:

@media (max-width: 768px) {
    .site-header {
        background-image: url('full_url_to_your_mobile_image/image.jpg');
    }
}

Make sure you change the image URL

2. Do you mean the Site Title and Tag Line ? And if so - how do you want to adjust them ?

1). I pasted the code into the 'Simple Custom CSS' plugin. Everything works. Thank you.

2) Site name and Site description in a mobile header. So that they can be moved right, left, up and down, regardless of the logo.

2. Where do you want them positioned exactly ? As this will take some CSS

2. Where do you want them positioned exactly ? As this will take some CSS

Left, closer to the logo.
Now in the mobile header the position of the Logo, Name and Description of the site are changing together. Is it possible to make the logo position in the mobile header be changed separately. And the position of the Name and Description of the site should be changed separately.

The logo and the site branding ( title and tag line ) both sit in the same container. So we can move them around each other.

For example try this CSS to reduce the space between the Logo and the text:

@media(max-width: 768px) {
    .site-branding-container .site-logo {
        margin-right: 0.25em;
    }
}

Works. But it does not work out what is needed.
I did everything in one file. How now to disable the logo and site names in the mobile version?

Add this CSS:

@media (max-width: 768px) {
    .site-branding-container {
        visibility: hidden;
    }
}

Everything worked out.
David, Thank you very much.

You're welcome

Sorry, another question: How to attach a home link to the background image of the mobile version?

How about we do this instead.

1. Customizer > Layout > Header - enable Mobile header.
2. Then create a new Hook Element to add the header image and link in:

2.1 add this content

<div class="site-logo mobile-site-logo hide-on-desktop hide-on-tablet">
    <a href="https://www.paraklit.org/" title="Христианская Церковь" rel="home">
        <img class="header-image" alt="Христианская Церковь" src="https://www.paraklit.org/wp-content/uploads/header1.jpg" title="Христианская Церковь">
    </a>
</div>

2.2 Select the after_header hook
https://docs.generatepress.com/article/hooks-element-overview/

Did as you wrote. Everything worked out.
But only the problem: