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?

Donna F. Cavalier is a woman of many interests, both online and off. A WordPress enthusiast since 2004, she fell in love with both GeneratePress theme and Elementor page builder. Together, they help create stunning WordPress websites. Hence, this site was born. She also has many other WordPress and web design related sites, such as WPLot.us (a WordPress maintenance service), CavalierWebDesign.com, DonnaFontenot.com, and others. She is also an author, with one novel, The Grave Blogger, and 2 children’s books Petal Pals: Swamp Adventure and Petal Pals: Off to Amarillo published, with others to be published soon. Finally, she is also a Southeast Louisiana Wedding Officiant, owner of Happy Life Weddings.

Share With Friends

Leave a Comment