Mobile Header

[Janette]

Hi,

I have a header that looks great for desktop and tablet but not for mobile. I have a separate header image that looks great in mobile. How do I switch to the mobile header when viewing in mobile?

Thank you for your great theme!

-Janette

[Tom]

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>

Documentation: http://docs.generatepress.com/
Adding CSS: http://docs.generatepress.com/article/adding-css/
Ongoing Development: https://generatepress.com/ongoing-development

[Janette]

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

[Tom]

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.

Documentation: http://docs.generatepress.com/
Adding CSS: http://docs.generatepress.com/article/adding-css/
Ongoing Development: https://generatepress.com/ongoing-development

[Janette]

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

[Tom]

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

Documentation: http://docs.generatepress.com/
Adding CSS: http://docs.generatepress.com/article/adding-css/
Ongoing Development: https://generatepress.com/ongoing-development

[Tom]

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;
}

Documentation: http://docs.generatepress.com/
Adding CSS: http://docs.generatepress.com/article/adding-css/
Ongoing Development: https://generatepress.com/ongoing-development

[Janette]

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.

[Tom]

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.

Documentation: http://docs.generatepress.com/
Adding CSS: http://docs.generatepress.com/article/adding-css/
Ongoing Development: https://generatepress.com/ongoing-development

[Author]

Posts