Alternate header image

Forums » WordPress » Mantra » How To

  • Author
    Posts
  • February 19th, 2020 at 12:38 #99041
    Rufus

    Hi – I realise this has been asked a few times for different themes but I can’t get anything to work! I’m trying to specify an alternate header image for mobile screen widths but everything I try in CSS doesn’t seem to work. I also can’t find any plugins which might be suitable. Has anyone achieved this with Mantra or aware of a plugin?

    February 20th, 2020 at 21:54 #99083
    Rufus

    Closest I can get is the rather suspiciously simple:

    @media (max-width: 800px) {
    img#bg_image {
    content: url(“/path/to/my/replacement/image”);
    }
    }

    But this is, I think, just putting the image in front of the existing one. Both are being requested on browser widths at and below 800px when I check in a web inspector.

    February 22nd, 2020 at 12:10 #99194
    Zed
    Cryout Creations mastermind

    You can customize the mantra_title_and_description() function (defined in theme-functions.php) via a child theme to make it output an image srcset for the header image (leaving the browser choose the desired image file based on screen size).

    If you like our creations, help us share by rating them on WordPress.org.
    Please check the available documentation and search the forums before starting a topic.
    February 22nd, 2020 at 12:21 #99195
    Rufus

    Thanks! Will take a look.

  • Author
    Posts
Viewing 4 posts - 1 through 4 (of 4 total)

The topic ‘Alternate header image’ is closed to new replies.