different mobile header logo

Show Different Header Logo On Mobile Using GeneratePress Premium Hooks

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.

  1. Create two separate header logo images.
  2. 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>

Quick Note:

GeneratePress comes with helpful classes baked in, such as hide-on-desktop and hide-on-mobile to make it easy to hide elements for various devices. Nice, right?

Share With Friends

Leave a Comment