[Resolved] Separate mobile header

[Janette]

Hi,

I am wondering if I can use one header for the desktop and tablet versions and another for the mobile version. If so, how would I do that?

-Janette

[Tom]

You would have to use GP Hooks.

So something like this in your “Before Header Content” in “Appearance > GP Hooks”.

<div class="hide-on-mobile">
    <img src="URL TO DESKTOP HEADER" alt="" />
</div>

<div class="hide-on-desktop">
    <img src="URL TO TABLET/MOBILE HEADER" alt="" />
</div>

Let me know if you need more info 🙂

• This reply was modified 8 years, 2 months ago by Tom.

[Janette]

I was just looking at the hooks location page: http://demo.generatepress.com/hook-locations/

What if I want to use a different logo for the mobile website? The hooks are before and after… Or maybe I am not understanding them…

-Janette

[Tom]

Before and after are just locations.

In order to display a different logo for the mobile website, you’ll need to use the code I posted above in one of those hooks (doesn’t really matter which one).

[Author]

Posts