Tagged: , , ,

Viewing 11 posts - 1 through 11 (of 11 total)
  • Author
    Posts
  • February 17, 2022 at 11:00 am #1341086
    spooniverse

    Hey folks, in the documentation it reads:

    To set the transparent header as a default header style for all page and post please add the below code to your functions.php

    add_action( 'after_setup_theme', 'enfold_customization_product_switch' );
function enfold_customization_product_switch(){
  add_filter('avf_builder_elements', 'avf_builder_elements_mod');
}

function avf_builder_elements_mod($elements)
{
  $counter = 0;
    foreach($elements as $element)
    {
    if($element['id'] == 'header_transparency')  {
            $elements[$counter]['std'] = 'header_transparent header_glassy ';
        }

        $counter++;
    }

  return $elements;
}

    But the code is not working. The header is in standard layout on all pages. Even if I try different settings:

        header_transparent
    header_transparent header_with_border
    header_transparent header_glassy
    header_transparent header_scrolldown
    header_transparent header_hidden

    Any ideas on why that is not working anymore?

    Best regards,
    Daniel

    February 17, 2022 at 11:27 am #1341089
    Guenni007

    you have forgotten the classes to add

    try:

    add_filter('avf_header_setting_filter', function($header) {
  $header['header_transparency']  = 'header_transparency header_glassy';
  $header['header_class'] .= " av_header_transparency av_header_glassy";
  return $header;
}, 10, 1);

    i don’t know if the setting in the editor mode will overwrite this – so you have the chance to setup other header types then.

    so i will have a look if a preset in your way could be done.

    February 17, 2022 at 11:32 am #1341090
    spooniverse

    Hey Guenni007, thanks for your reply.

    The code is from the documentation. I want the header transparent on all pages. So you think the filter needs to bee added too? Like that:

    add_action( 'after_setup_theme', 'enfold_customization_product_switch' );
function enfold_customization_product_switch(){
  add_filter('avf_builder_elements', 'avf_builder_elements_mod');
}

function avf_builder_elements_mod($elements)
{
  $counter = 0;
    foreach($elements as $element)
    {
    if($element['id'] == 'header_transparency')  {
            $elements[$counter]['std'] = 'header_transparent';
        }

        $counter++;
    }

  return $elements;
}

add_filter('avf_header_setting_filter', function($header) {
  $header['header_transparency']  = 'header_transparency';
  $header['header_class'] .= " av_header_transparency";
  return $header;
}, 10, 1);

    Or is your snippet working without the longer code from the documentation?

    February 17, 2022 at 11:40 am #1341091
    Guenni007

    i think your snippet is right:

    i tested this ( from my snippet list ) – and it works
    ( it is just a different function name )

    add_action( 'after_setup_theme', 'ava_enfold_builder_layout_mod' );
function ava_enfold_builder_layout_mod(){
  add_filter('avf_builder_elements', 'avf_enfold_builder_layout_settings_mod');
}

function avf_enfold_builder_layout_settings_mod($elements)
{
  $counter = 0;
    foreach($elements as $element)
    {
    // Layout > Header visibility and transparency
    if($element['id'] == 'header_transparency')  {
            $elements[$counter]['std'] = 'header_transparent';
        }
        $counter++;
    }
  return $elements;
}
    February 17, 2022 at 11:42 am #1341092
    Guenni007

    no – the first snippet of mine is a global setting of all pages to transparent and glassy header.
    this is useful if you want to change the header layout of all pages.
    The other snippet is for the convenience of not having to set the default template every time you set a new page.
    So it is a preselection of the metabox in editor mode.

    February 17, 2022 at 12:03 pm #1341096
    spooniverse

    Now I understand the difference. I think the description in the documentation should be clearer. The code there applies only to new pages (but the setting is changeable later).

    Thanks again! Thread may be closed.

    February 17, 2022 at 12:46 pm #1341126
    spooniverse

    Sorry, but I think of one additional question while working with a transparent header: Why is “.header_scrolled” missing on mobile? I made the header sticky. Works well. It is transparent and if I scroll down it gets a white background. But on the larger sizes the class “.header_scrolled” is added and I can use it for additional styling. Any ideas why the class is missing and how I can get it back an small screen sizes?

    February 17, 2022 at 12:54 pm #1341129
    spooniverse

    I found a script like this in the forum, but it is not working on mobile:

    function add_custom_script(){
?>
<script>
(function($){
    $(window).scroll(function() {    
    var scroll = $(window).scrollTop();

    if (scroll >= 50) {
        $("#header").addClass("header-scrolled");
    } else {
        $("#header").removeClass("header-scrolled");
    }
})(jQuery);
</script>
<?php
}
add_action('wp_footer', 'add_custom_script');

    Any other idea why I can’t finde the class on mobile? I know that the settings say that this option “is ignored on smartphones”, but it would be nice to have the class for styling purposes.

    February 19, 2022 at 3:37 pm #1341401
    Mike

    Hi,
    The .header_scrolled class is added when the Enfold Theme Options ▸ Header ▸ Header behavior ▸ Shrinking Header option is enabled.
    The script above is missing });, the corrected script looks like this:

    function add_custom_script(){
?>
<script>
(function($){
    $(window).scroll(function() {    
    var scroll = $(window).scrollTop();

    if (scroll >= 50) {
        $("#header").addClass("header-scrolled");
    } else {
        $("#header").removeClass("header-scrolled");
    }
});
})(jQuery);
</script>
<?php
}
add_action('wp_footer', 'add_custom_script');

    Best regards,
    Mike

    February 20, 2022 at 12:06 am #1341443
    spooniverse

    Hey MIke,

    I know that the class is only added if the option is enabled. But as mentioned above (and written in the theme backend) the class it is missing from mobile – but I need it there. Thanks for spotting the mistake in the code snippet. It is working now, the class is added on mobile too.

    Best regards,
    Daniel

    February 20, 2022 at 12:24 am #1341446
    Mike

    Hi,
    This is because the mobile header is not designed to support a Sticky or Shrinking Header, so the class is not enabled.
    Glad that the above script is now working for you, please use it as your solution.
    Glad we were able to help, if you have any further questions please create a new thread and we will gladly try to help you. Thank you for using Enfold.

    Best regards,
    Mike

  • Author
    Posts
Viewing 11 posts - 1 through 11 (of 11 total)
  • The topic ‘Set transparent header as default header style’ is closed to new replies.