- This topic has 8 replies, 2 voices, and was last updated 8 years, 1 month ago by Tom.
-
AuthorPosts
-
February 8, 2016 at 6:59 am #171333Janette
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
February 8, 2016 at 3:22 pm #171391TomLead DeveloperLead DeveloperHi 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>
February 8, 2016 at 4:01 pm #171414JanetteI 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
February 9, 2016 at 12:00 am #171457TomLead DeveloperLead DeveloperYou’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.
February 9, 2016 at 7:00 am #171545JanetteHi,
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,
-JanetteFebruary 9, 2016 at 11:41 am #171619TomLead DeveloperLead DeveloperAny chance you can link me to the site so I can see how you’re trying to center it and see the slider?
February 10, 2016 at 12:18 pm #171882TomLead DeveloperLead DeveloperSo 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; }
February 10, 2016 at 12:34 pm #171888JanetteOMG!!! 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.
February 10, 2016 at 9:57 pm #171963TomLead DeveloperLead Developerz-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.
-
AuthorPosts
- You must be logged in to reply to this topic.