Occasionally, we need to show a completely different logo image on mobile than we do on desktop or tablet. In that case, if you use GeneratePress Premium, you’ll want to make use of GP’s hooks feature. Tom Usborne helpfully provided this simple solution.
If you aren’t clear on what GP’s hooks are all about, you can refer to my previous post that explains how GeneratePress hooks are useful.
So, let’s get right to it then.
- Create two separate header logo images.
- Paste the following code into the “Before Header Content” hook, located in Appearance > GP Hooks. (Be sure to change img src urls, of course).
<div class="hide-on-mobile"> <div class="site-logo"> <img src="URL TO YOUR DESKTOP LOGO IMAGE" alt="" /> </div> </div> <div class="hide-on-desktop"> <div class="site-logo"> <img src="URL TO YOUR MOBILE LOGO IMAGE" alt="" /> </div> </div>