Hey rjalthar,

Thank you for the inquiry.

It seems to be an issue with the image overlay. Could you confirm the current version of the theme? Make sure the theme is updated to version 7.1, then try to temporarily toggle or disable the settings under Enfold > Performance > File Compression.

To fix the issue temporarily, you can add the following css code to disable the image overlay:

#top .image-overlay.overlay-type-image {
    display: none !important;
}

Best regards,
Ismael

Hey Diana,

Thank you for the inquiry.

Try to add this css code to make the .avia_hidden_link_text accessible but still not visible in the slider links.

#top .avia_hidden_link_text {
    display: block;
    position: absolute !important;
    height: 1px;
    width: 1px;
    overflow: hidden;
    clip: rect(1px, 1px, 1px, 1px);
    white-space: nowrap;
}

Another option is to add aria-label to the slider links by editing the slider template directly or with javascript. Example:

document.addEventListener('DOMContentLoaded', function() {
  document.querySelectorAll('a.next-slide').forEach(function(link) {
    link.setAttribute('aria-label', 'Weiter');
  });
});

Best regards,
Ismael

Hey bonsaimedia,

Thank you for the inquiry.

Try targeting the content wrapper of the second color section instead.

#av_section_2 .entry-content-wrapper {
	margin-top: -600px;
}

If you need to apply this to specific color sections, try to assign a Advanced > Developer Settings > Custom CSS Class to them, then adjust the css rule accordingly.

Firefox screenshot:

View post on imgur.com

Best regards,
Ismael

Hi,

Thank you for the info.

We are not certain why the search SVG icon is not displaying, but we managed to work around the issue by adding this code in the Quick CSS field:

#top .menu-item-search-dropdown > a.avia-svg-icon svg:first-child, #top .menu-item-search-dropdown > a.avia-svg-icon img[is-svg-img="true"] {
    z-index: 1;
}

We also added this script to make sure that when the SVG icon is clicked, it displays the AJAX search field.

add_action( 'wp_footer', 'av_custom_script', 100 );
function av_custom_script() {
    ?>
    <script>
    // trigger ajax search field
    document.addEventListener("DOMContentLoaded", () => {
        const svg = document.querySelector("#menu-item-search svg");

        if (svg) {
            svg.addEventListener("click", (e) => {
                e.preventDefault();
                e.stopPropagation();

                const parentLink = svg.closest("a");
                const parentLi = svg.closest("li");

                if (parentLink) {
                    parentLink.click();
                } else if (parentLi) {
                    parentLi.click();
                }
            });
        }
    });
    </script>
    <?php
}

Best regards,
Ismael

Hey GWS,

Thank you for the inquiry.

Try to include this css code.

#scroll-top-link.avia-svg-icon svg:first-child, #scroll-top-link.avia-svg-icon:hover svg:first-child {
    stroke: #ffffff;
    fill: #ffffff;
}

Result:

View post on imgur.com

Best regards,
Ismael

Hi,

Thank you for the update.

We cannot find the snippet “Child Pages Top Level Shortcode” in the list, only the “Shortcode: Child Pages List” which we enabled and added to the “verein” page. This seems to be working as expected.

View post on imgur.com

Best regards,
Ismael

Hi,

1.) You can adjust the width of the widgets inside the header to reduce the gaps between them and create space on the right side.

Example:

.responsive #top #header #header_main .inner-container .widget:nth-child(3) {
    order: 2;
    flex-basis: 10%;
}

Try to do the same for the other widgets, then apply a right margin to the last one.

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

The value of 570px is based on the maximum container width of 1340px.

2.) Try removing the padding from the menu container and set its width.

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

Best regards,
Ismael

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

.av_minimal_header .avia-menu-fx {
    display: block;
    top: 155%;
    width: calc(100% - 26px);
    left: 13px;
}

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

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

#top .avia-slideshow-arrows a.avia-svg-icon svg:first-child {
    fill: #ee1d85;
}
#top .avia-slideshow-arrows.avia-slideshow-controls a {
    background: transparent !important;
}

for this effect:

Best regards,
Mike

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

.gm-style-iw-chr button {
	height: 0 !important;
  top: -10px !important;
}
.gm-style-iw-ch {
	padding: 0 !important;
}

for this result:

Best regards,
Mike

Hi,
For your /making-a-remote-control/ page I see that you are not using a sidebar, it would be better if you follow Guenni007’s instructions as you will need a parent container. But you can try this css:

@media only screen and (min-width: 1905px) { 
.responsive #top #wrap_all .av-d0kp1-a2d2e6eb6b73ac933b7b21ac10cbf36f {
    position: fixed;
    width: 435px;
    right: 19%;
    top: 57%;
  }
  .responsive #top #header.header-scrolled ~ #main .av-d0kp1-a2d2e6eb6b73ac933b7b21ac10cbf36f {
    position: fixed;
    width: 435px;
    right: 19%;
    top: 18%;
  }
}

This will make your author box fixed (sticky) under your header after scrolling, it would be better if your column had a custom class name, right now it is: .av-d0kp1-a2d2e6eb6b73ac933b7b21ac10cbf36f
I also note that your author box is quite tall on my desktop, you may want to make it shorter so it will fit in smaller screens.
For this the css only works after 1905px so the whole box is shown, you will not be able to scroll in the box to see all of the content.
Another option would be to use the WP Sticky Anything plugin.

Best regards,
Mike

Hi,
Glad that the update worked for you. I have not used the GT Translate plugin and I don’t see any errors in the browser console on your site.
Please open a new thread for this new issue, since the opening title for this thread is now solved, this helps other users find solutions based on the opening subject line quicker and helps keep the thread length manageable and on topic for multiple mods to assist. Thank you for your understanding.

Best regards,
Mike

Hi,

Thank you for the update.

You can also try this css code:

#top .slide-entry .slide-content {
    min-height: 400px;
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
}

You may need to remove the previous css code and adjust the min-height on different screen sizes using css media queries.

View post on imgur.com

Best regards,
Ismael