Mobile Header

Hi there,

You would want to use GP Hooks in the "Before Header Content" hook.

Then you would add some HTML like this:

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

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

I uploaded the plugin that you created here: https://generatepress.com/knowledgebase/adding-php-functions/

But I have no idea how I place the php in the correct area using this plugin. I know how to do it using html but I just don't understand the hooks with Wordpress.

-Janette

You'll need to use the GP Hooks add-on for the code I provided: https://generatepress.com/knowledgebase/generate-hooks/

So you would place your code into the Before Header Content hook.

Hi,

I hadn't noticed that it shows up in the appearance menu of WP. I figured it would be in the editor section. I found it and the code works but I can't center it. I created a class called "centerit" (chil-theme style sheet)but it is not being recognized by the theme... I also was playing with the bottom margin and trying to place the header over the top of my slder by using z-index (which I have done many times in html websites) but the z-index is not being recognized either so the slider covers the bottom of the header.

These are a lot of questions and I would like to donate for your time answering so please let me know the best way to do that.

Thanks,
-Janette

Any chance you can link me to the site so I can see how you're trying to center it and see the slider?

So currently you have:

<span style="centerit">

It should be:

<span class="centerit">

Then you need to add CSS to center it:

.centerit {
    text-align: center;
}

OMG!!! I can't believe I didn't see that!

Thank you so much!

Can I use z-index with the header and slider? ...I am going to try it now.

z-index won't work unless the slider is absolutely positioned behind the header - not too sure how it will work design-wise with the type of header you have.