[Resolved] Mobile Header Background

Home Forums Support [Resolved] Mobile Header Background

Home Forums Support Mobile Header Background

  • This topic has 19 replies, 2 voices, and was last updated 4 years ago by David.
Viewing 15 posts - 1 through 15 (of 20 total)
  • Author
    Posts
  • #1184597
    Igor

    Good afternoon.
    On the desktop, I set the background image of the header. How do I set a different background image on mobile? I don’t know how to write CSS myself, and I don’t know where to paste it?

    2) Write me CSS to adjust the captions of the mobile header, regardless of the logo.

    Forgive me, I don’t know English, this is a translation from Google.

    #1184879
    David
    Staff
    Customer Support

    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 ?

    #1185005
    Igor

    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.

    #1185007
    David
    Staff
    Customer Support

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

    #1185008
    David
    Staff
    Customer Support

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

    #1185048
    Igor

    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.

    #1185330
    David
    Staff
    Customer Support

    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;
        }
    }
    #1185431
    Igor

    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?

    #1185725
    Igor

    #1185727
    David
    Staff
    Customer Support

    Add this CSS:

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

    Everything worked out.
    David, Thank you very much.

    #1185759
    David
    Staff
    Customer Support

    You’re welcome

    #1185794
    Igor

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

    #1186303
    David
    Staff
    Customer Support

    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/

    #1186549
    Igor

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

Viewing 15 posts - 1 through 15 (of 20 total)
  • You must be logged in to reply to this topic.