Hey Rocuant,

Thank you for the inquiry.

We added this code in the functions.php file to insert the widget area in the header.

<?php

//--------------------------------
// Header widget area
//--------------------------------

add_action( 'ava_after_main_menu', 'enfold_customization_header_widget_area' );
    function enfold_customization_header_widget_area() {
    dynamic_sidebar( 'header' );
}

We then created a custom widget area named “header” in the Appearance > Widgets panel and added a Text widget. To adjust the widget’s position within the header, we added the following code in the Quick CSS field:

#top #header #header_main .widget {
    position: absolute;
    right: 50%;
    transform: translateX(-50%);
}

Please check the documentation below for more info: https://kriesi.at/documentation/enfold/header/#adding-a-header-widget-area

Best regards,
Ismael

Hey northorie,

Thank you for the inquiry.

You can replicate the layout by adding a Text Block within a Column element, apply the yellow background to the column, then go to Advanced > Developer Settings. In the Custom CSS Class name field, add “av-custom-header-column”. Then add the following code in the Quick CSS field to adjust the position of the text block within the column.

#top .av-custom-header-column .avia_textblock {
    padding: 40px 20px;
    background: white;
    position: absolute;
    right: -50px;
    top: 50px;
}

Best regards,
Ismael

Hi,

Thank you for the update.

Please add this code at the very bottom of the css modifications.

#top #wrap_all #social .social_bookmarks {
    margin: 0;
    display: flex;
    float: none;
    justify-content: center;
    margin-left: -50px;
}

Best regards,
Ismael

Hi,

Thank you for the update.

You can adjust the order property to reverse the location of the button widget and burger menu. Then, set the left margin of the widget to auto to keep it close to the burger menu icon.

.responsive #top #header #header_main .inner-container .widget {
    order: 2;
    flex-basis: auto;
    padding: unset;
    clear: none!important;
    align-self: center;
    align-items: flex-end;
    z-index: 1;
    margin-left: auto;
}

.responsive #top #header #header_main .inner-container .main_menu {
    order: 3;
    flex-basis: auto;
    align-items: center;
    align-self: center;
}

This should also fix the layout of the header on smaller screens.

Best regards,
Ismael

Hey mvi,

Thank you for the inquiry.

Did you add this script?

jQuery(document).ready(function($) {
    // Replace the accordion selectors with your own accordion toggler selectors
    var accordions = $('#skillspring-process .toggler');

    function forceSlideChange(slideshow, targetIndex) {
        var slides = slideshow.find('.avia-slideshow-inner li');
        var activeSlide = slides.filter('.active-slide');
        var targetSlide = slides.eq(targetIndex);

        // Stop any ongoing animations
        slides.stop(true, true);

        // Hide the current active slide
        activeSlide.removeClass('active-slide').css({ 'opacity': 0, 'visibility': 'hidden' });

        // Show the target slide
        targetSlide.addClass('active-slide').css({ 'opacity': 1, 'visibility': 'visible' });

        // Update the active control dot
        slideshow.find('.avia-slideshow-dots .goto-slide').removeClass('active').eq(targetIndex).addClass('active');
    }

    accordions.on('click', function() {
        // Get the index of the clicked accordion toggler
        var index = accordions.index(this);

        // Replace the slideshow selector with your own slideshow selector
        var slideshow = $('#skillspring-process-slideshow');

        // Check if the slideshow exists on the page
        if (slideshow.length) {
            forceSlideChange(slideshow, index);
        }
    });
});

You should also apply the ID “skillspring-process” to the Accordion element and the ID “skillspring-process-slideshow” to the Easy Slider element.

Best regards,
Ismael

Hi,

Thanks for the update. Please let us know if you should need any further help on the topic, or if we can close it.

Best regards,
Rikard

Hi,
Glad to hear that this helped, an easy way to change the color of your widget items is add this CSS in your Enfold Theme Options ▸ General Styling ▸ Quick CSS field:

#top.single-post .widget_recent_entries a {
	color: #444444;
}

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

Best regards,
Mike

Hey Monika,
Thanks for the link to your page but I don’t find “auch nice” or a large gap, is this only on certain screen sizes? Do you mean the “Was haben wir gemacht?” section?
Typically with parallax you also need to use negative margins for the items up more so as the top items more up they show the item under.
Give this a try and if you use the duplicate feature and create a test page with an admin login we can demonstrate how the negative margin could help.
Perhaps a screenshot would help us know where the gap is.

Best regards,
Mike

Hey carmen,
Thank you for the link to your site, I downloaded your video and it looks like the top and bottom black bars are in your video, so you will need to edit your video to crop these out:

For the form drop downs try this CSS in your Enfold Theme Options ▸ General Styling ▸ Quick CSS field:

#top .entry-content-wrapper select.wpcf7-form-control {
border-radius: 10px;
}

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

Best regards,
Mike

Hey Katja,
Thank you for the link to your site, on your first level menu items they are blue until mouse-over then they are yellow, but the backend of the second level is already yellow so what colors do you want the mouse-over and active page second level menu items to be?
mobile devices don’t have a mouse-over function, if you want the first level active menu items to have a yellow background you could try this CSS in your Enfold Theme Options ▸ General Styling ▸ Quick CSS field:

#top #wrap_all #av-burger-menu-ul li.current-menu-item a {
    background-color: #fff236;
}

but second level mobile menu items all share the same background color.
To add the header image to your category pages try the Unique Headers plugin.
For your search field try this CSS in your Enfold Theme Options ▸ General Styling ▸ Quick CSS field:

#top .header_color .avia-search-tooltip input[type='text']#s {
	background-color: #fff;
	color: #30302f;
}

Fot your widget item, try this CSS in your Enfold Theme Options ▸ General Styling ▸ Quick CSS field:

#top #wrap_all .main_color .tribe-events-widget-events-list__header-title {
    color: #c3512f;
    text-align: left;
    font-size: 16px;
    font-weight: 600;
}
#top .main_color .tribe-events-widget-events-list__header-title {
    border-style: solid;
    border-width: 1px;
    border-color: rgb(235, 232, 226);
    padding: 10px 0;
    border-left: none;
    border-right: none;
    margin-bottom: 15px;
}

For your last question, some items have text some don’t they are not the same.
Please note that we kindly ask that each thread is for a single topic, it is hard to manage threads with many questions, typically it causes confusion when other Mods try to help or when clients answer but are not so clear, Thank you for your patience and understanding and for using Enfold.

Best regards,
Mike

Hey Alwin,
This looks similar to your other thread
In this case versions before 5.3 had a different directory structure, typically updating the theme should have corrected this, but you were using WP Rocket cache which contenued to look the file in the old location, so when you cleared the cache it was solved.
Deleting the old folder also caused WP Rocket to rebuild it’s cache, I don’t believe that this was necessary it was just another way around the WP Rocket cache, but it still comes back to clearing the WP Rocket cache, because the theme on it’s own would not be looking for the wrong file location.
So I also recommend clearing your WP Rocket cache as Ismael pointed out in your other thread.

Best regards,
Mike

Hi,

Thanks for the update. Please let us know if you should need any further help on the topic, or if we can close it.

Best regards,
Rikard

Hey jmjwebsites,

Please try the following in Quick CSS under Enfold->General Styling:

#top .avia-smallarrow-slider .avia-slideshow-arrows a::before {
  line-height: 0;
  padding-left: 9px;
  padding-right: 15px;
  padding-top: 12px;
  padding-bottom: 15px;
}

Best regards,
Rikard

Hi,

Thanks for the update. Please let us know if you should need any further help on the topic, or if we can close it.

Best regards,
Rikard

Hey Jason,
Thanks for your patience, the blog element layout is dependent on the Enfold Theme Options ▸ Blog Layout ▸ Blog Styling
it looks like you are using the Modern Business

you also could use Elegant

and Default (Business)

So I recommend choosing the one that is closest to your overall goal, which in this case seems to be Default (Business) and then adjust from there. So in this example it looks like we only need to move the date above the title, I recommend using jQuery in your child theme functions.php instead of customizing the element php file in your child theme, \enfold\config-templatebuilder\avia-shortcodes\postslider\postslider.php, because future features may not work correctly if you use an older version of the file.
For example:

function custom_move_time_script() { ?>
  <script>
(function($){
  $( '.slide-entry' ).each(function() {
  $( this ).find( 'time.slide-meta-time' ).insertBefore( $(this).find('header'));
  });

})(jQuery);
</script>
  <?php
}
add_action( 'wp_footer', 'custom_move_time_script', 99 );

Then you can make the rest of the adjustments with css, like hiding the comments, making the date larger & gold, adding top padding, making the read more gold, etc.

.slide-content .slide-meta {
	display: none;
}
.slide-content .slide-meta-time {
	font-size: 14px;
	color: gold;
}
.slide-content .slide-entry-title {
	font-size: 28px;
	padding-bottom: 10px;
}
.slide-content {
	padding-top: 20px;
}
.slide-content .read-more-link a {
	color: gold;
}

So give this a try and if you need further help please create a test page so we can examine your element and offer more help.

Best regards,
Mike

Hey M-Graphics24,
Thanks for your patience, you can try this CSS in your Enfold Theme Options ▸ General Styling ▸ Quick CSS field:

.avia_mobile #top .avia-full-stretch {
    background-attachment: fixed !important;
}

but please note that this will not work for all iPhones or iPads, and may behave oddly, this is due to a limitation on these devices that can not be changed, so to offer a uniform experience across devices the background-attachment was changed to scroll on mobile devices.
If this doesn’t work for you then it’s best to not use it.

Best regards,
Mike

Hi,
Thank you for your patience, I see that these images are grid cell background images which do not have a height in the same way as a image, typically the background image fills the grid but the grid height comes from the grid content, which in this case there is no content. Nonetheless I have added this css to your Quick CSS and this seems to heml for mobile devices. please clear your browser cache and check.

@media only screen and (max-width: 767px) { 
.responsive #top #wrap_all #welcome.av-flex-cells .no_margin.flex_cell.avia-full-stretch.avia-builder-el-1 {
	height: 550px !important;
}
.responsive #top #wrap_all #meet.av-flex-cells .no_margin.flex_cell.avia-full-stretch.avia-builder-el-21 {
	height: 420px !important;
}
.responsive #top #wrap_all #events.av-flex-cells .no_margin.flex_cell.avia-full-stretch.avia-builder-el-23 {
	height: 420px !important;
}
.responsive #top #wrap_all #meetillustratror.av-flex-cells .no_margin.flex_cell.avia-full-stretch.avia-builder-el-47 {
	height: 420px !important;
}
.responsive #top #wrap_all #recent.av-flex-cells .no_margin.flex_cell.avia-full-stretch.avia-builder-el-62 {
	height: 420px !important;
}
.responsive #top #wrap_all #contact.av-flex-cells .no_margin.flex_cell.avia-full-stretch.avia-builder-el-64 {
	height: 420px !important;
}
}

Best regards,
Mike

Hi,

Thank you for the update.

We get an error in the console when the WP Rocket plugin is activated. The error is generated from the themes/SI-SUITES/js/custom.js file:

jQuery(document).ready(function() {
    var sections = jQuery('.avia-section')
      , menu = jQuery('.av-submenu-container')
      , nav_height = menu.outerHeight();
    jQuery(window).on('scroll', function() {
        var cur_pos = jQuery(this).scrollTop();
        var activeMenuItem = menu.find('.active-menu-item');
        sections.each(function() {
            var section = jQuery(this);
            var top = section.offset().top - 300;
            var bottom = top + section.outerHeight();
            if (cur_pos >= top && cur_pos <= bottom) {
                var activeLink = menu.find('a[href="#' + section.attr('id') + '"]');
                activeMenuItem.removeClass('active-menu-item');
                activeLink.addClass('active-menu-item');
                if (activeLink) {
                    var activeItemOffset = activeLink.offset().left - menu.offset().left;
                    menu.scrollLeft(activeItemOffset)
                }
            }
        })
    })
})

Did you add this script? Please remove the script temporarily, then check the page again.

Best regards,
Ismael