Hi,

Thank you for the update.

You can try this css code to adjust the width of the header:

@media only screen and (min-width: 768px) {

  /* Add your Desktop Styles here */
  #top #header #header_main .container.av-logo-container {
    width: 100%;
    max-width: 100%;
    margin: 0;
    padding: 0;
  }

  .responsive #top #header #header_main .inner-container .logo {
    margin-left: 70px;
  }

  .responsive #top #header #header_main .inner-container .main_menu .avia-menu.av-main-nav-wrap {
    padding: 0 50px;
  }

  .responsive #top #header #header_main .inner-container .widget:nth-child(5) {
    margin-right: 50px;
  }
}

View post on imgur.com

Regarding the search form, please check this thread:

— https://kriesi.at/support/topic/how-to-move-the-search-box-into-the-sidebar/#post-1074058

Best regards,
Ismael

Hi,

Try to add this css code:

.responsive #top #main {
    margin-top: -1px;
}

View post on imgur.com

Best regards,
Ismael

Hey laptophobo,

Could you post a link to where we can see the results that you are getting please?

Best regards,
Rikard

Hi,

But I wonder how the top video is working now? Anyways, do you know why the bottom one still isn’t.

It’s working because we removed the query parameter as mentioned above. Please try it again.

Best regards,
Ismael

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