• Resolved optimized-marketing

    (@optimized-marketingcom)


    Hey, this is an awesome plugin, and it does basically what I have been looking for.

    I have sort of a unique situation, If I add a Genesis Custom Header to a page, I might not want it to show up on mobile, some times it might not look good, takes up to much real estate on a mobile device, or we want to keep the mobile page simple.

    My theme already has the mobile detection worked out but I am having problems removing the Genesis Custom Header. I have tried to remove the GCH in general and I have having some problems. I have tested with the following code:

    remove_action( ‘genesis_after_header’ , ‘gch_print_header’,100 );

    I have GCH added to the genesis_after_header hook and the priority is set to low.

    Any input would be awesome, or if you just want to add an option to hide on mobile that would work as well.

    Thanks
    Greg

    https://www.ads-software.com/plugins/genesis-custom-headers/

Viewing 8 replies - 1 through 8 (of 8 total)
  • Plugin Author Nick Diego

    (@ndiego)

    Hi Greg,

    I apologize for the delayed reply. Let me look into this and I will followup later this evening.

    In the meantime, have you tried adding CSS media queries? This might be a good way to go depending on what you are trying to do. That way you can hide, or even resize the header depending on the size of the screen.

    Nick

    Hello,

    I have the same problem. I would like to make my header banner friendly mobile, and would like to know:

    – how to resize the header for mobile and ipad. I have added this code on “genesis-custom-headers/css/gch-frontend-styles.css (désactivé)”
    but, it doesn′t works…

    i wrote this code:


    @media only screen and (max-width: 800px) {
    .gch-header-image-inner img {
    vertical-align: top;
    max-width: 800px;
    margin: 0 auto;
    padding: 0;
    text-align: center;

    }
    }

    @media only screen and (max-width: 960px) {
    .gch-header-image-inner img {
    vertical-align: top;
    max-width: 960px;
    margin: 0 auto;
    padding: 0;
    text-align: center;

    }
    —-

    where do have i to change the code? on the style.css of my children theme genesis, or fro the css of the extention ? (i used the second option.. and it doesn t works…)

    – how to remove it for the device?

    Thank you for your help!

    Regards
    Oreli

    Thread Starter optimized-marketing

    (@optimized-marketingcom)

    Thanks for the response Nick.

    I have added some media queries to make it look better. While that works. That is more of a one off solution. Meaning each time I want to add a new header I have to go in and add new css classes and media queries depending on what I put in there to make sure it re-sizes/hides correctly. While not really a problem for 1 site, but when you have multiple people building these headers on multiple sites, that makes it a little more difficult to manage. As for hiding it through css that could be a work around. Correct me if I am wrong but if I load a slider I believe those images will still need to be downloaded even when hidden by css and could decrease the performance greatly on mobile.

    That is why I was looking for a programmatic way to handle showing and hiding the header for mobile so the people building the header can toggle it in the back-end.

    Thanks again, look forward to your response.
    Greg

    Thread Starter optimized-marketing

    (@optimized-marketingcom)

    oreli,

    You could probably use visability:hidden; or display:none; if you want to use css to prevent it from being displayed.

    You can add the css to either your theme style.css file or you can add it to the Appearance > Customer Headers > Custom Header CSS section.

    Greg

    Plugin Author Nick Diego

    (@ndiego)

    Hi Oreli,

    Custom CSS for the plugin should be added on the Settings page: Appearance->Custom Headers. Towards the bottom of that page, you can enter custom CSS and see what default styles are included with the plugin.

    If you have any further difficulty or questions, please start a separate support thread.

    Thanks,
    Nick

    Thank you ndiego,

    but can you help to do it?
    i mean, which code should i write to make it responsible?

    I am going to make a new post if you want.
    Thank you!

    Plugin Author Nick Diego

    (@ndiego)

    Hi Greg,

    This was a bit tricky, but I think I got it. As you alluded to in your initial post, the priority set in the remove_action needs to match whatever priority and hook you have set on the header. So in this case it should look like remove_action( 'genesis_after_header', 'gch_print_header', 100);.

    Now this is exactly what you had, but it was not working. I am guessing you added this to the functions file of you theme. The reason this does not work is because it is trying to remove the the action before it has actually been added. The add_action is fired via add_action( 'wp', 'gch_enable_header_frontend' );. Anything in the functions file fires before the wp hook. Therefore, we just need to modify the code a bit to tell WordPress to fire our remove_action later. The code snippet below should do the trick for you.

    add_action( 'wp', 'remove_gch', 100 );
    function remove_gch() {
    	remove_action( 'genesis_after_header', 'gch_print_header', 100 );
    }

    Please let me know if this works, or if you have any other issues.

    Thanks,
    Nick

    Thread Starter optimized-marketing

    (@optimized-marketingcom)

    That worked, Thanks.

    I tried something similar to adding an action to fire the remove_action but I guess It was still to early in the process.

    Thanks again for the help and insight.
    Greg

Viewing 8 replies - 1 through 8 (of 8 total)
  • The topic ‘Hide on Mobile Devices? remove_action code?’ is closed to new replies.