Hey MiaShia,

Thank you for the inquiry.

We encountered an error when we tried to access the site. The password for the specified username is incorrect.

Fehler: Das eingegebene Passwort für die E-Mail-Adresse REDACTED@gmail.com ist nicht korrekt. Passwort vergessen?

Please check the info provided or post an alternative account. In the meantime, please provide a screenshot of the element that you’d like to adjust.

If you want to adjust the font size of the portfolio gird title, please use this css code.

#top #wrap_all .all_colors h3.grid-entry-title {
    font-size: 30px;
    font-weight: normal;
}

Or edit the h3 element in the Enfold > Advanced Styling panel.

Best regards,
Ismael

Hey maisonutopies,

Thank you for the inquiry.

If you need the background image of the header to be fully visible, you can add this css code:

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

  /* Add your Mobile Styles here */
  .header_color .header_bg {
    background-size: contain;
  }
}

And if you want the background image to cover the header container, you can use the following css code but this will slightly distort the image.

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

  /* Add your Mobile Styles here */
  .header_color .header_bg {
    background-size: 100% 100%;
  }
}

For the slider, you can try the Full Width Easy Slider if you need the slider image to be fully visible.

Best regards,
Ismael

Hi,

Thank you for the update.

The container inside the color section is not animating as expected, so the content stays hidden because of this css code.

.js_active .av-minimum-height .container {
    z-index: 1;
    opacity: 0;
    transition: opacity 0.6s ease-in;
}

This might be due to this script error generated by the “duracelltomi-google-tag-manager” plugin.

nalytics-talk-content-tracking.js?ver=1.20:1 Uncaught TypeError: Cannot read properties of null (reading 'scrollTop')
    at n (analytics-talk-content-tracking.js?ver=1.20:1:593)

Please contact the plugin author for more info about the script error.

Best regards,
Ismael

Hey jaimemerz,
Thank you for the link to your site I added this snippet to your WP Code plugin and ensured that in the top right corner it was a code type: PHP snippet

then I added this code and saved.

function mobile_sub_menu_sticky() { ?>
<script>
window.addEventListener('DOMContentLoaded', function() {
  (function($){
  	var width = $(window).width();
    var $stickyTop = $('#sub_menu1');
    if (width <= 767) {
    $stickyTop.waypoint(function(direction) {
      if (direction === 'down') {
         $stickyTop.addClass('sticky-top');
      }
      if (direction === 'up') {
         $stickyTop.removeClass('sticky-top');
      }
    }, {
      offset: '0%'
    });
    }
  })(jQuery);
});
</script>
  <?php
}
add_action('wp_footer', 'mobile_sub_menu_sticky');

I then added a second snippet with this css:

.responsive #top #sub_menu1.av-switch-768.av-submenu-container.sticky-top {
	position:fixed!important;
	top:0!important;
	z-index:600!important;
}

and now on your page the fullwidth submenu is sticky when it reachs the top, and un-sticks with you scroll back to the top:

Please clear your browser cache and check.
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,

…and this:

#top #wrap_all .avia-slideshow-button, #top .avia-button {
  background-color: rgba(0, 0, 0, .4) !important;
}

Best regards,
Rikard

Hey Diana,

You have this added in Quick CSS:

#top.page-id-206 .avia-button.avia-color-light {
  color: #fcf7ea;
  border: 1px solid #2a3137 !important;
  background: transparent;
}

Please try removing it.

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

Hi,
As I understand you would like to be able to add icons next to your main menu items, here is a easy was to add icons like this:

We will add this function to the end of your child theme functions.php file in Appearance ▸ Editor or 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:

then add this code and save:

function enqueue_font_awesome() {
    wp_enqueue_style('font-awesome', 'https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.3/css/all.min.css');
}
add_action('wp_enqueue_scripts', 'enqueue_font_awesome');
function add_icon_to_menu_item($item_output, $item, $depth, $args) {
    $custom_classes = implode(' ', $item->classes);
    preg_match('/menu-item-icon-([^ ]+)/', $custom_classes, $matches);
    if (!empty($matches[1])) {
        $icon_class = esc_attr($matches[1]);
        $icon = '<i class="fa ' . $icon_class . '"></i>';
        $position = strpos($item_output, '<span class="avia-menu-text">');
        if ($position !== false) {
            $item_output = substr_replace($item_output, $icon, $position, 0);
        }
    }
    return $item_output;
}
add_filter('walker_nav_menu_start_el', 'add_icon_to_menu_item', 10, 4);

Please ensure to copy the code from the forum and not an email notification so the symbols are not converted.
Then add this CSS in your Enfold Theme Options ▸ General Styling ▸ Quick CSS field:

#top #header li.menu-item > i ~ a {
	display: inline-block;
}
#top #header li.menu-item > i:before {
	color: #fff;
}
.av-main-nav li[class*="menu-item-icon-"] > a > i ~ .avia-menu-text {
    border-left-style: none;
    border-left-width: 0;
    padding-left: 13px;
    margin-left: -6px;
}
#av-burger-menu-ul li > a > i ~ .avia-menu-text {
	  padding-left: 13px;
    margin-left: -6px;
}

Please note that you may want to change the color, in this example I’m using white because my menu is dark.
Then go to your menus and ensure that the Custom Class field is enabled for your menu items:

If you don’t see it go to the Screen Options and enable it.

Now we will use the Font Awesome icons because it will be easier to use a class name to determine the icon used in the custom class field, the built-in entypo-fontello icons don’t use class names the same way so it would be a little trickier for you. The function adds the icon next to the menu item based on the class used in the menu item custom class field.
Use this format: menu-item-icon-fa-home the first part menu-item-icon- tells the function that a icon will be used, and then the Font Awesome icon code is appened to the class fa-home, for example:

these are the classes I used in this example:
menu-item-icon-fa-home
menu-item-icon-fa-star
menu-item-icon-fa-life-ring
menu-item-icon-fa-users
menu-item-icon-fa-phone
menu-item-icon-fa-bullhorn
This also works for the sub-menu items:

and the mobile menu:

Best regards,
Mike

Hi,
Thanks for the screenshot, it looks like you are using the ALB for your single posts and currently the post body is a single column and you want to add a 1/5 column on both sides to reduce the post content width, but instead of editing each post you could use css.
So your two empty 1/5 columns would be about 40% of the page, so we will set the page width to 60% and we will have it only work on screens larger than 1024px.
Try this CSS in your Enfold Theme Options ▸ General Styling ▸ Quick CSS field:

@media only screen and (min-width: 1024px) { 
.responsive #top.single-post .container_wrap_first > .container {
	max-width: 60%;
}
}

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.
feel free to adjust to suit.

Best regards,
Mike

Hi,

Great, I’m glad that Ismael could help you out. Please let us know if you should need any further help on the topic, or if we can close it.

Best regards,
Rikard

Hey Lin84,

Thank you for the inquiry.

Which blog layout did you select? Did you toggle the Blog Post Date in the Enfold > Blog Layout > Blog Meta Elements section? If you’re using the Grid Layout, please try this css code:

.responsive #top.archive .slide-meta time, .responsive #top.archive .slide-meta time  + .slide-meta-del {
    display: none;
}

Best regards,
Ismael

Hi,

Thank you for the update.

Are you referring to the first section on every page? You can replicate this layout by adding a Color Section element at the very top of the pages and applying a different background image for each page. Please check the documentation below for more info:

// https://kriesi.at/documentation/enfold/color-section/

Best regards,
Ismael

Hey kristiankeegan,

Thank you for the inquiry.

You can replace the columns with a content slider on mobile view by toggling the visibility of the elements on different screen sizes. You can find these options in the elements’ Advanced > Responsive > Element Visibility section. So you’ll have the columns on desktop view and the content slider for smaller screens.

Best regards,
Ismael