Skip to content
GeneratePress
  • Home
  • Premium
  • Site Library
  • Install
  • Help
    • Documentation
    • Support Forum
    • Contact
  • Log In
GeneratePress
  • Home
  • Premium
  • Site Library
  • Install
  • Help
    • Documentation
    • Support Forum
    • Contact
  • Log In
  • Log In
  • Free Support

Mobile Header

Home › Forums › Support › Mobile Header

  • This topic has 8 replies, 2 voices, and was last updated 5 years ago by Tom.
Viewing 9 posts - 1 through 9 (of 9 total)
  • Author
    Posts
  • February 8, 2016 at 6:59 am #171333
    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

    February 8, 2016 at 3:22 pm #171391
    Tom
    Lead Developer
    Lead Developer

    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

    February 8, 2016 at 4:01 pm #171414
    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

    February 9, 2016 at 12:00 am #171457
    Tom
    Lead Developer
    Lead Developer

    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

    February 9, 2016 at 7:00 am #171545
    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

    February 9, 2016 at 11:41 am #171619
    Tom
    Lead Developer
    Lead Developer

    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

    February 10, 2016 at 12:18 pm #171882
    Tom
    Lead Developer
    Lead Developer

    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

    February 10, 2016 at 12:34 pm #171888
    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.

    February 10, 2016 at 9:57 pm #171963
    Tom
    Lead Developer
    Lead Developer

    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
Viewing 9 posts - 1 through 9 (of 9 total)
  • You must be logged in to reply to this topic.
Log In

Common Issues

  • Missing style.css
  • Updating errors
  • Plugin Install Failed

Useful Articles

  • Installing GP Premium
  • Installing GeneratePress
  • How to add CSS
  • How to add PHP

GeneratePress

  • About
  • Premium
  • Site Library
  • Gutenberg
  • Affiliates
  • Reviews
  • Brand Assets
  • Blog
  • We’re Hiring!

Support

  • Documentation
  • Contact Us
  • Support Forums
  • Fastest WordPress Theme
  • Changelogs
  • Legal
  • Donate
  • Translate

Popular FAQs

  • Install GeneratePress
  • Installing GP Premium
  • Missing style.css
  • Plugin Install Failed
  • Adding CSS
  • Adding PHP
  • WordPress Hosting

Social

  • Facebook
  • Twitter
  • WordPress
  • GitHub
Made with on Vancouver Island
  • Home
  • Premium
  • Site Library
  • Install
  • Contact
  • Support Forum
  • Documentation
  • Account
  • Checkout