Hi,

To fix the header overlap issue, you can add this css code:

.html_header_transparency #main {
    padding-top: 90px!important;
}

View post on imgur.com

Best regards,
Ismael

Hi,

Thank you for the update.

Did you try the second set of css rules without the UID av-4hiz9z-633b1e0ab579d3c11a88073322c9de8f?

You can also apply a unique css class name to the Grid Row element where the modification is needed, for example “av-custom-grid-eq-height”, and then use the following css code.

.responsive #top #wrap_all .av-layout-grid-container.av-custom-grid-eq-height {
    display: flex;
}

.responsive #top #wrap_all .av-custom-grid-eq-height .flex_cell.av_one_half .flex_cell_inner,
.responsive #top #wrap_all .av-custom-grid-eq-height .flex_cell.av_one_half .flex_cell_inner .avia-image-container,
.responsive #top #wrap_all .av-custom-grid-eq-height .flex_cell.av_one_half .flex_cell_inner .avia-image-container div,
.responsive #top #wrap_all .av-custom-grid-eq-height .flex_cell.av_one_half .flex_cell_inner .avia-image-container div div,
.responsive #top #wrap_all .av-custom-grid-eq-height .flex_cell.av_one_half .flex_cell_inner .avia-image-container div div img {
    width: 100%;
    height: 100%;
    display: block;
    object-fit: cover;
}

— https://kriesi.at/documentation/enfold/add-custom-css/#enable-custom-css-class-name-support

Best regards,
Ismael

Hi,
In your example site, I don’t see a widget, if you mean the “announcement-banner” across the top, this can be created better with javascript than a widget.
Nonetheless to center the logo in the menu, to start, try this solution.
Please note that it is best to have an even menu count so it can be split in half.

Best regards,
Mike

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

@media only screen and (max-width: 989px) {
    .html_mobile_menu_tablet #top #wrap_all .header_color.av_header_transparency .phone-info .avia-svg-icon svg:first-child {
        fill: #fff;
    }
}

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

Hi,

The only part of that CSS that I can find the Quick CSS is this:

body.woocommerce-checkout {
    max-width: 100vw;
    overflow-x: hidden;
}

Please make sure that you copy all the CSS, or try pasting it at the top so that you know where it is. You could also try a lint tool to check your CSS for errors.

Best regards,
Rikard

Hi,

Try to add this css code:

.responsive #top #wrap_all .av-layout-grid-container.av-5enyt3-e3a17494e866bcf05416abe291c1d6a0 {
    display: flex;
}

.responsive #top #wrap_all .flex_cell.av-4hiz9z-633b1e0ab579d3c11a88073322c9de8f .flex_cell_inner,
.responsive #top #wrap_all .flex_cell.av-4hiz9z-633b1e0ab579d3c11a88073322c9de8f .flex_cell_inner .avia-image-container,
.responsive #top #wrap_all .flex_cell.av-4hiz9z-633b1e0ab579d3c11a88073322c9de8f .flex_cell_inner .avia-image-container div,
.responsive #top #wrap_all .flex_cell.av-4hiz9z-633b1e0ab579d3c11a88073322c9de8f .flex_cell_inner .avia-image-container div div,
.responsive #top #wrap_all .flex_cell.av-4hiz9z-633b1e0ab579d3c11a88073322c9de8f .flex_cell_inner .avia-image-container div div img {
    width: 100%;
    height: 100%;
    display: block;
    object-fit: cover;
}

If you need this applied to every grid row element using 1/2 + 1/2 layout, use this instead:

.responsive #top #wrap_all .av-layout-grid-container {
    display: flex;
}

.responsive #top #wrap_all .flex_cell.av_one_half .flex_cell_inner,
.responsive #top #wrap_all .flex_cell.av_one_half .flex_cell_inner .avia-image-container,
.responsive #top #wrap_all .flex_cell.av_one_half .flex_cell_inner .avia-image-container div,
.responsive #top #wrap_all .flex_cell.av_one_half .flex_cell_inner .avia-image-container div div,
.responsive #top #wrap_all .flex_cell.av_one_half .flex_cell_inner .avia-image-container div div img {
    width: 100%;
    height: 100%;
    display: block;
    object-fit: cover;
}

View post on imgur.com

Best regards,
Ismael

Hi,

Thank you for the update.

Please include this css code to center-align the items in the phone info container:

#top #header_meta .phone-info div {
    display: flex;
    justify-content: space-between;
    align-items: center;
}

#top #header_meta .phone-info div .avia-icon-pos-left {
    margin-left: 10px;
    top: 0;
    position: relative;
}

Result:

View post on imgur.com

Best regards,
Ismael

Hi,

Thank you for the update.

The image home_backround-keil.svg is not being preloaded when we check the site, and its file size is still at 96.5 kB, which is relatively large for mobile view. Regardless, the performance score on mobile is now 91, and 95 on desktop. Have you tried using the Preload LCP Image plugin?

Best regards,
Ismael

Hi,

We adjusted the scroll position a bit.

const offsetPosition = elementPosition + 142;

Please try it again:

function av_hotspot_smooth_scroll() { ?>
  <script>
  document.addEventListener('DOMContentLoaded', function () {
    document.querySelectorAll('.av-image-hotspot .avia-tooltip .inner_tooltip a[href^="#"]').forEach(function(anchor) {
      anchor.addEventListener('click', function(e) {
        e.preventDefault();

        const targetID = this.getAttribute('href').substring(1);
        const targetElement = document.getElementById(targetID);

        if (targetElement) {
          const elementPosition = targetElement.getBoundingClientRect().top + window.pageYOffset;
          const offsetPosition = elementPosition + 142;

          window.scrollTo({
            top: offsetPosition,
            behavior: 'smooth'
          });

          history.pushState(null, null, '#' + targetID);
        }
      });
    });
  });
  </script>
<?php
}
add_action( 'wp_footer', 'av_hotspot_smooth_scroll', 99 );

Adjust the value 142 as needed.

Best regards,
Ismael

Hey peterolle,

Thank you for the inquiry.

You can use the wp_head or wp_footer hook to add the script to a specific page.

Example:

function ava_json_ld_mod() {
    /// replace placeholder slug-of-your-page with the actual slug or ID of the page
    if (is_page('slug-of-your-page')) { 
        ?>
        <script type="application/ld+json">
        {
          "@context": "https://schema.org/",
          "@id": "https://www.example.com/advancedCpp",
          "@type": "Course",
          "name": "Learn Advanced C++ Topics",
          "description": "Improve your C++ skills by learning advanced topics.",
          "publisher": {
            "@type": "Organization",
            "name": "CourseWebsite",
            "url": "https://www.examplecoursewebsite.com"
          },
          "provider": {
            "@type": "Organization",
            "name": "Example University",
            "url": "https://www.example.com"
          }
        }
        </script>
        <?php
    }
}
add_action('wp_head', 'ava_json_ld_mod');

Make sure to the adjust the value of the is_page conditional function.

Best regards,
Ismael

Hey icarogioiosi,

Thank you for the inquiry.

You can add this css code to move the title to the right of the image, position it at the top, reduce the font size, remove the borders, and add space below each portfolio entry. Please make sure to toggle or temporarily disable the Enfold > Performance > File Compression settings, then purge the cache after adding the modification.

#top .isotope-item.special_av_fullwidth .inner-entry {
    text-align: left;
    display: flex;
    flex-direction: row-reverse;
}

#top .grid-entry .inner-entry {
    box-shadow: none;
}

#top .isotope-item.grid-entry {
    margin-bottom: 20px;
}

#top .isotope-item.special_av_fullwidth .av_table_col .entry-title {
    margin: 0 0 20px;
    font-size: 16px;
}

If you have any additional questions at this time we kindly ask that you open them up in a separate thread. The longer threads get in the forum, they become more difficult to support as they tend to drift off topic and they also make it troublesome for users trying to search for solutions. Keeping threads relevant to their original inquiry ensures that we can keep better track of what has been resolved and that users can more effectively find answers to similar issues they might be experiencing.

Thanks!

Best regards,
Ismael

Hey amollde,

Thank you for the inquiry.

Did you set the Logo and the Transparency Logo in the Enfold > Theme Options panel? Please make sure that both of these options have an image selected.

View post on imgur.com

You can also try this css code:

#top .av_header_transparency.av_alternate_logo_active .logo a > img, #top .av_header_transparency.av_alternate_logo_active .logo a > svg {
    opacity: 1;
}

Best regards,
Ismael

Hi,

Thank you for the info.

Please add this css code to move the account and mobile menus after the cart icon.

@media only screen and (max-width: 1024px) {
    .responsive #top #wrap_all .main_menu {
        display: flex;
        position: absolute;
        flex-direction: row-reverse;
    }
}

Let us know the result.

Best regards,
Ismael