Hey fanlokbun,

Thank you for the inquiry.

You can create a custom footer page that can be selected under Enfold > Footer > Default Footer & Socket Settings > Page-based Footer options. In the footer page, add two sections, one for mobile and another for desktop view. To control their visibility on different screen sizes, go to Advanced > Responsive > Element Visibility settings. Let us know if you need more info.

View post on imgur.com

Best regards,
Ismael

Hey Enfoldfanatic,

Thank you for the inquiry.

1.) You can adjust this in the Enfold > Main Menu > Burger/Mobile Menu > Menu Overlay Style settings. Set it to Full Page Overlay Menu.

2.) To align the menu with the logo on mobile view, add this css code:

@media only screen and (max-width: 767px) {

  /* Add your Mobile Styles here */
  #top #header #header_main .container.av-logo-container .inner-container {
    display: flex;
  }

  .responsive #top #header #header_main .inner-container .main_menu {
    order: 2;
    flex-basis: auto;
    top: 20px;
  }
}

3.) Could you provide a screenshot showing where you’d like the search icon to display?

Best regards,
Ismael

Hi,

The white line at the very top is part of the browser ui and was mistakenly included in the screenshot. It should not appear on the actual site.

Best regards,
Ismael

Hey Scanmark,

Thank you for the inquiry.

The sticky behavior and transparent layout options are disabled on mobile view by default but you can try this css code:

@media only screen and (max-width: 767px) {
  /* Add your Mobile Styles here */
  .responsive #top #wrap_all #header {
    position: fixed;
    top: 0;
  }
}

Best regards,
Ismael

Hey mountaintopengraving,

Thank you for the inquiry.

The site seems to be loading properly on our end. Where do you see these errors?

View post on imgur.com

Best regards,
Ismael

Hi,

You may need to update the following css rules:

#top .avia-slideshow-arrows a.next-slide {
    right: -30px;
}

#top .avia-slideshow-arrows a.prev-slide {
    right: auto;
    left: -30px;
}

Replace them with the code below:

 
#top .avia-testimonial-wrapper .avia-slideshow-arrows a.next-slide {
    right: -30px;
}

#top .avia-testimonial-wrapper .avia-slideshow-arrows a.prev-slide {
    right: auto;
    left: -30px;
}

Best regards,
Ismael

Hi,

Have you tried hiding the testimonial section on mobile view? You can toggle the Element Visibility settings in the Advanced > Responsive panel.

View post on imgur.com

You can also use this css code to adjust the size of the testimonial section on mobile view:

@media only screen and (max-width: 767px) {

  /* Add your Mobile Styles here */
  .responsive #top .av-large-testimonial-slider.avia-testimonial-wrapper .avia-testimonial {
    padding: 0;
    font-size: 0.85em;
  }

  #top .av-large-testimonial-slider .avia-slideshow-arrows {
    position: absolute;
    width: 100%;
    bottom: 50px;
  }

  #top .avia-slideshow-arrows a.next-slide {
    right: -30px;
  }

  #top .avia-slideshow-arrows a.prev-slide {
    right: auto;
    left: -30px;
  }
}

View post on imgur.com

Best regards,
Ismael

Hi,

adjusting the slider’s image size for mobile so it runs full height?

You can replace the Fullwidth Easy Slider with Fullscreen Slider or use both, then adjust the Advanced > Responsive > Element Visibility settings to toggle the display of the sliders. You’ll have one slider for desktop and another for mobile view.

To adjust the position of the caption, go to the Styling > Caption panel, then adjust Caption Positioning settings.

Best regards,
Ismael

Hey fanlokbun,

Thank you for the inquiry.

You can use this css code to hide the logo on mobile view and make the header transparent.

/*
Mobile Styles
================================================== */
/* Note: Add new css to the media query below that you want to only effect the Mobile and Tablet Portrait view */

@media only screen and (max-width: 767px) {

  /* Add your Mobile Styles here */
  .responsive #top #wrap_all .av_header_transparency {
    position: fixed;
    background-color: transparent;
  }

  .responsive #top .av_header_transparency.av_alternate_logo_active .logo a>img,
  .responsive #top .av_header_transparency.av_alternate_logo_active .logo a>svg,
  .responsive #top .logo {
    display: none;
  }
}

View post on imgur.com

Best regards,
Ismael

Hi,

Have you tried removing the css code? Keep the css rules with the #chsearchbox selector, or replace it with:

#top #chsearchbox #searchsubmit, #chsearchbox .ajax_load {
    width: 62px;
    height: 100%;
    line-height: 40px;
    position: absolute;
    right: auto;
    top: 0px;
    z-index: 2;
    min-width: 40px;
    left: 8%;
    padding: 0px;
    margin: 0px;
    border-radius: 0px;
    background: url("https://riseandshine.childrensnational.org/wp-content/uploads/2017/07/ch-search-icon.png") center center / contain no-repeat;
    background-position: center center;
}

Best regards,
Ismael

Hey Diana,

Thank you for the inquiry.

Are you trying to make the document automatically scroll and open the tabs when the links are used? If so, you can try adding this script in the functions.php file:

add_action('wp_footer', function() {
    ?>
    <script>
    document.addEventListener('DOMContentLoaded', function() {
        (function($) {
            function scrollToTab(selector, eventType) {
                $(selector).on(eventType, function(e) {
                    var hash = eventType === 'load' ? window.location.hash : $(this).attr('href').split('#')[1];
                    if (!hash) return;
                    var tab = $('.av-section-tab-title[href="#' + hash + '"]');
                    if (tab.length) {
                        var parent = tab.closest('.av-tab-section-outer-container');
                        var pos = parent.offset();
                        tab.trigger('click');
                        setTimeout(function() {
                            $(window).scrollTop(pos.top - 100);
                        }, 100);
                    }
                });
            }
            scrollToTab('.avia-buttonrow-wrap a', 'click');
            scrollToTab(window, 'load');
        })(jQuery);
    });
    </script>
    <?php
});

Best regards,
Ismael

Hi,

As mentioned above, this is not possible without significant modification. You may need to create a script to adjust the position of the ajax_search_response container on scroll. You can try the following css code, but it will also adjust the position of the search results container even when the page has not been scrolled.

.ajax_search_response {
    top: 136.5px !important;
}

Best regards,
Ismael

Hey GWS,

Thank you for the inquiry.

Did you add the following css code somewhere? The previous css code should not have affected the default search field because it was specific to the search form inside the #chsearchbox container.

#top #searchsubmit, .ajax_load {
    width: 62px;
    height: 100%;
    line-height: 40px;
    position: absolute;
    right: auto;
    top: 0px;
    z-index: 2;
    min-width: 40px;
    left: 8%;
    padding: 0px;
    margin: 0px;
    border-radius: 0px;
    background: url("https://riseandshine.childrensnational.org/wp-content/uploads/2017/07/ch-search-icon.png") center center / contain no-repeat;
    background-position: center center;
}

Best regards,
Ismael

Hey diraastro,
Try adding this code to the end of your child theme functions.php file in Appearance ▸ Editor:

function change_the_order_of_milestone_even_on_mobile_screens() { ?>
  <script>
document.addEventListener('DOMContentLoaded', () => {
  const milestones = document.querySelectorAll('.av-milestone-even');
  if (milestones.length === 0) return;
  const mediaQuery = window.matchMedia('(max-width: 989px)');
  const reorderMilestones = () => {
    if (mediaQuery.matches) {
      milestones.forEach(milestone => {
        const date = milestone.querySelector('.av-milestone-date');
        const icon = milestone.querySelector('.av-milestone-icon-wrap');
        const content = milestone.querySelector('.av-milestone-content-wrap');
        if (date && icon && content) {
          milestone.innerHTML = '';
          milestone.appendChild(date);
          milestone.appendChild(icon);
          milestone.appendChild(content);
        }
      });
    }
  };
  reorderMilestones();
  mediaQuery.addEventListener('change', reorderMilestones);
});
</script>
  <?php
}
add_action( 'wp_footer', 'change_the_order_of_milestone_even_on_mobile_screens', 99 );

Please ensure to copy the code from the forum and not an email notification so the symbols are not converted.
If you are not using a child theme you could use the WP Code plugin then add a new snippet, in the top right corner use the PHP snippet as the code type:

and ensure that it is activated, then add the above code and save.

Best regards,
Mike

Hey dondela,
Thanks, I added this to your child theme function.php

function move_cookie_consent_modal_buttons() { ?>
  <script>
var copyDiv = document.querySelector('#av-consent-extra-info .avia-cookie-consent-modal-buttons-wrap');
var appendtoDiv = document.querySelector("#av-consent-extra-info .av-special-heading");
if (!!copyDiv) {
    var clone = copyDiv.cloneNode(true);
    copyDiv.style.paddingTop = '25px';
    appendtoDiv.appendChild(copyDiv);
}	   
  </script>
  <?php
}
add_action( 'wp_footer', 'move_cookie_consent_modal_buttons', 99 );

Please check.

Best regards,
Mike