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

Hi,
Try this CSS in your Enfold Theme Options ▸ General Styling ▸ Quick CSS field:

.responsive #top.home #wrap_all .flex_cell.av_one_third {
    padding: 0 !important;
}
.responsive #top.home #wrap_all .flex_cell.av_one_third .av_textblock_section {
	padding: 0 25px;
}
.responsive #top.home #wrap_all .flex_cell.av_one_third #rotesQuadrat {
	margin-left: 25px;
}

After applying the css, please clear your browser cache and check.

Best regards,
Mike

Hi,
Try this then:

.avia-caption {
    top: 17px;
}

If this doesn’t work then link to your page so we can examine.

Best regards,
Mike

Hi,
Try this CSS in your Enfold Theme Options ▸ General Styling ▸ Quick CSS field:

@media only screen and (max-width: 767px) { 
#top #wrap_all #av-burger-menu-ul > li,
#top #wrap_all #av-burger-menu-ul > li a {
	top:0 !important;
	opacity:1 !important;
	padding: 4px 0 !important;
}
}
@media only screen and (min-width: 768px) { 
#top #wrap_all #av-burger-menu-ul > li,
#top #wrap_all #av-burger-menu-ul > li a {
	top:0 !important;
	opacity:1 !important;
}
}

Please ensure to copy the code from the forum and not an email notification so the symbols are not converted.
After applying the css, please clear your browser cache and check.

Best regards,
Mike

Hey stefpasi,
You probably have the caption set to “bottom without frame” in the slide:

Try this CSS in your Enfold Theme Options ▸ General Styling ▸ Quick CSS field:

.caption_fullwidth {
    position: relative;
    top: 20em;
}

adjust to suit.

Best regards,
Mike

Hey nm,
Thank you for your patience, to move cookie consent bar to top of the DOM so it is first in the tabindex, add the following code to the end of your child theme functions.php file in Appearance ▸ Editor.
The code also adds tabindex to the hidden checkboxes in the moral and hides the “toggle” switches, so the checkboxes can be tabbed to.
When tabbing in the moral you will first be able to tab though the tabs and use the enter key to select one, then keep tabbing to get inside the tab content and tab through the checkboxes. You can use the spacebar to enable/disable the checkboxes.

function move_cookie_consent_bar_to_top_of_dom_so_it_is_first_in_tabindex() { ?>
  <script>
	  document.addEventListener('DOMContentLoaded', function() {
    const messageBar = document.querySelector('.avia-cookie-consent-wrap');
    const body = document.querySelector('body#top');
    body.prepend(messageBar);
});
document.addEventListener('DOMContentLoaded', () => {
  document.querySelectorAll('#av-consent-extra-info input[type="checkbox"]').forEach(checkbox => {
    checkbox.setAttribute('tabindex', '0');
  });
});
  </script>
<style>
#top .av-toggle-switch input[type="checkbox"] {
    display: inline;
}
#top .av-toggle-switch .toggle-label-content {
    display: inline;
}
#top .av-toggle-switch label .toggle-track {
    display: none;
}
</style>
  <?php
}
add_action( 'wp_footer', 'move_cookie_consent_bar_to_top_of_dom_so_it_is_first_in_tabindex', 99 );

Please ensure to copy the code from the forum and not an email notification so the symbols are not converted.
This may not seem intuitive, so perhaps you will want to try a cookie bar plugin like Borlabs, I don’t know how keyboard tabbing works with it but many Enfold users like it.
If you are happy with just tabbing to accept or reject cookies with just a few tab keys then the above script will work fine, I see that your consent moral only has two checkboxes.

Best regards,
Mike

Hey dondela,
When I check with Safari v17.6 on Mac Monterey v12.7.6 the video autoplay works for me in desktop and in Responsive Design Mode emulating mobile.
Unfortunately, my Mac won’t update to Sequoia, but from what I can tell Safari v17.6 is the latest version for all Macs.
Are you seeing the cookie message and clicking it?

Best regards,
Mike

Hey schweg33,
These are hidden on mobile devices, try this CSS in your Enfold Theme Options ▸ General Styling ▸ Quick CSS field:

@media only screen and (max-width: 325px) {
    .responsive #top .avia-post-nav {
        display: block;
        top: 20%;
    }
}
@media only screen and (min-width: 325px) and (max-width: 380px) {
    .responsive #top .avia-post-nav {
        display: block;
        top: 23%;
    }
}
@media only screen and (min-width: 381px) and (max-width: 450px) {
    .responsive #top .avia-post-nav {
        display: block;
        top: 25%;
    }
}
@media only screen and (min-width: 451px) and (max-width: 767px) {
    .responsive #top .avia-post-nav {
        display: block;
        top: 38%;
    }
}

After applying the css, please clear your browser cache and check.

Best regards,
Mike

Hi,
When I first checked, the white area was not fullwidth:

but now it is:

Perhaps you want this:

if so try adding this css:

@media only screen and (max-width: 767px) {
    #top #wrap_all .avia-caption-content p {
    width: 80%;
    margin: auto;
}
    #top #wrap_all .avia-slideshow .avia-caption-title {
        width: 80%;
        margin: auto;
}
}

After applying the css, please clear your browser cache and check.

Best regards,
Mike

Hey a_edemirci,
I recommend adding two more social media profiles, ones that you don’t plan on using. Then add the link to your language pages, for example 500px & behance:

Then add this css:

.social_bookmarks_five_100_px a:before {
	content: url(https://img.icons8.com/officexs/16/000000/great-britain.png);
	top: 12%;
  position: relative;
}
.social_bookmarks_five_100_px a svg {
	display: none;
}
.social_bookmarks_behance a:before {
	content: url(https://img.icons8.com/officexs/16/000000/switzerland.png);
	top: 12%;
  position: relative;
}
.social_bookmarks_behance a svg {
	display: none;
}

for this result:

to remove the hover title, add this code to the end of your child theme functions.php file in Appearance ▸ Editor:

function custom_script() { ?>
  <script>
(function($){
  $(".social_bookmarks_five_100_px a, .social_bookmarks_behance a").hover(function(){
    $(this).removeAttr("title");
  });  
})(jQuery);
</script>
  <?php
}
add_action( 'wp_footer', 'custom_script', 99 );

Best regards,
Mike

Hi,
Try this CSS in your Enfold Theme Options ▸ General Styling ▸ Quick CSS field:

@media only screen and (max-width: 767px) {
    .responsive #top #wrap_all .container.caption_container {
        width: 100%;
        max-width: 100%;
    }
}

After applying the css, please clear your browser cache and check.

Best regards,
Mike

Hi,
*update* I tested the above script that you posted “Fix Yoast SEO pagination compatibility with Enfold theme using avia-element-paging” and it solved the issue on my site
<link rel="canonical" href="https://enfold.site.com/blog/blog-default/?avia-element-paging=2" class="yoast-seo-meta-tag">
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 without the leading <?php and save.

Best regards,
Mike

Hey ricedean,

Thank you for the inquiry.

What happens when you toggle or temporarily disable the Enfold > Performance > File Compression settings? To temporarily fix the issue, try adding this code in the Quick CSS field.

#top .avia-buttonrow-wrap {
    display: flex;
    flex-direction: row;
    justify-content: center;
    flex-wrap: wrap;
    align-content: center;
}

Best regards,
Ismael

Hey manchust,

Thank you for the inquiry.

Did you add another logo slider for mobile view? Make sure that the Styling > Slider or Grid > Column count is set to 4, then add this css code:

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

  /* Add your Mobile Styles here */
  .responsive #top #wrap_all .slide-entry {
    width: 24%;
    margin-left: 2%;
  }
}

Best regards,
Ismael

Hey MAJO_Agency,

Thank you for the inquiry.

1.) The scroll-to-top button is hidden by default on mobile view because most mobile devices have built-in ways to navigate to the top. If you like to display it again, add the following css:

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

  /* Add your Mobile Styles here */
  .responsive #scroll-top-link {
    display: block;
  }
}

2.) We may need to inspect the site to better understand the issue. Please provide the site URL and login details in the private field.

Best regards,
Ismael