Hi,

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

Best regards,
Rikard

Hey profumopuntoit,
This is pretty tricky to get it exactly as your screenshot, but try this CSS in your Enfold Theme Options ▸ General Styling ▸ Quick CSS field:

@media only screen and (max-width: 767px) {
.responsive table.shop_table td {
    display: table-cell;
}
.responsive .shop_table .product-quantity {
	display: inline !important;
}
#top .order_details .product-name li {
	 margin: auto;
	 padding: 0;
	 border-right: none;
}
#top .order_details li {
	 border-right: none;
}
#top table.shop_table td {
    padding: 5px;
}
}

this is the expected results:

Best regards,
Mike

Hi,
To have very large menu items and align them at the top try this CSS in your Enfold Theme Options ▸ General Styling ▸ Quick CSS field:

#top #av-burger-menu-ul {
	vertical-align: top;
}
@media only screen and (max-width: 767px) { 
#av-burger-menu-ul .avia-menu-text {
	font-size: 60px;
}
}
@media only screen and (min-width: 767px) { 
	#av-burger-menu-ul .avia-menu-text {
	font-size: 80px;
}
}

feel free to adjust to suit, this is the expected results:

Since the original question has been answered we will close this thread as it has now covered multiple topics, please note that we ask each thread to limit to one topic.
If you have any further questions please create a new thread and we will gladly try to help you. Thank you for using Enfold.

Best regards,
Mike

Hi,
Thank you for your patience and the link to your site, I cloned your last slider item and saw the font size error on the frontend, it looks like the css for the slide was not added to the style for some reason, if you add this css to your Enfold Theme Options ▸ General Styling ▸ Quick CSS field it will correct this if you want to add more slides:

#top #wrap_all .avia-slideshow .av-slideshow-caption .avia-caption-title {
    font-size: 36px;
}
#top .avia-slideshow .avia-caption-content p {
    font-size: 20px;
}

I didn’t add this and I removed the cloned slide I created.
I don’t know why this has occurred, I tried looking at your Enfold Theme Options ▸ Performance settings and your plugins, etc but didn’t find a cause.
I created a test page on my site with 10 slides and your layout and font sizes and they all worked correctly. So you could try using this css for now and if you find any other issues in the future perhaps they will also point to a cause for this.
Or you could try disabling all of your plugins. If that resolves the issue, reactivate each one individually until you find the cause.
Perhaps your server is also caching, so try clearing your server cache and if it is using object-oriented cache such as Memcached, Redis, Varnish, Litespeed, etc try disabling it to see if this helps. Otherwise if you don’t have any other issues I would try using the css for now.

Best regards,
Mike

Hi,
Thank you for your patience, to add the descriptions below the mega menu items and show a icon next to the menu items:

Try adding this code to the end of your child theme functions.php file in Appearance ▸ Editor:

function enfold_menu_description($item_output, $item, $depth, $args) {
    if (!empty($item->description)) {
        $item_output .= '<span class="menu-description">' . esc_html($item->description) . '</span>';
    }
    return $item_output;
}
add_filter('walker_nav_menu_start_el', 'enfold_menu_description', 10, 4);
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) {
    // Get the custom icon class from the menu item's CSS Classes
    $custom_classes = implode(' ', $item->classes);
    preg_match('/menu-item-icon-([^ ]+)/', $custom_classes, $matches);

    if (!empty($matches[1])) {
        // Use the custom icon class specified in the menu item
        $icon_class = esc_attr($matches[1]);
        $icon = '<i class="fa ' . $icon_class . '"></i>';
        $item_output = $icon . $item_output;
    }
    return $item_output;
}
add_filter('walker_nav_menu_start_el', 'add_icon_to_menu_item', 10, 4);

The first one adds the description below the menu item, the second one adds the Font Awesome icons because it is easier to use a class name to determine the icon used, entypo-fontello icons don’t use class names the same way, and the third function adds the icon next to the menu item based on the class used in the menu item.
So to show the menu item description and custom classes please enable it in the menu page screen options at the top of the page:

then add your description and the icon you want to use in this format menu-item-icon-fa-users
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-users

these are the classes I used in this example:
menu-item-icon-fa-users
menu-item-icon-fa-phone
menu-item-icon-fa-question
menu-item-icon-fa-life-ring
then add this CSS in your Enfold Theme Options ▸ General Styling ▸ Quick CSS field:

#top #header .avia_mega_div > .sub-menu > li > ul > li.menu-item > i ~ a {
	display: inline-block;
}
#top #header .avia_mega_div > .sub-menu > li > ul > li.menu-item .menu-description {
	display: block;
    padding: 0 25px;
}

Please give this a try.
Please ensure to copy the code from the forum and not an email notification so the symbols are not converted.

Best regards,
Mike

Hi,
I found that this is due to the title length of some of your elements, earlier it looks like we offered a customization to move the portfolio title, but now for smaller screens some of the titles are three lines and others are one line, so when the grid is created they will all have the height of the larest item giving the smaller items some white space. I have adjusted the css a little but it you could change the length of the items to similar it would be better.

Best regards,
Mike

Hi,

Great, I’m glad that Mike 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

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 Lene,

1. Please try this in Quick CSS:

#footer .flex_column.av_one_fourth:nth-child(2), #footer .flex_column.av_one_fourth:nth-child(3) {
    margin-left: 22px;
}

2. I’m not sure I understand your second request, do you mean the scroll to top button? If so then that will be difficult, since it’s positioned outside the container.

Best regards,
Rikard

Hello,

I added the code I provided to you here https://kriesi.at/support/topic/submenu-buttons/#post-1419867 and it worked. I attached a screenshot in the private content field below.

We are providing you custom CSS codes, even though it is out of the scope of our support, providing you instructions on how you can add them but you are asking us to do it. Whenever we do it, it works.

We are not a customization service and we will not be providing you any help with customization from now on.

Best regards,
Yigit

Hello,

Please add the following code to Quick CSS

#custom_html-12 {
  width: 40px;
  z-index: 99;
}

@media only screen and (max-width: 767px) { 
#custom_html-12 {
  position: fixed;
  top: 0;
  padding-top: 20px;
}
}

Regards,
Yigit

Hello,

No, we didn’t change anything. After fixing your CSS errors, CSS is now correctly applied and you are seeing the results of your custom CSS code.

You can remove the following code from the Additional CSS field to fix this:

 .responsive #top .av-logo-container, .responsive #top .logo a, .responsive #top .logo img, .responsive #top .logo svg {
    height: 60px !important;
    max-height: 60px !important;
    line-height: 60px !important;
  }

Cheers!
Yigit

Hi,

Thank you for the update.

Yes, we can now see the image, but we can’t see the content of the “Inicio” page. We saved the content as template named “inicio template a” and applied it to another page. Please delete the current home page then replace it with the page in the private field.

To adjust the style of the column shown in your screenshot, consider using this css code. Avoid setting a fixed width in pixels because it will not respond properly on different screen sizes.

.responsive #top #wrap_all .flex_column.av-3p5h0yj-7ac6c7bb93c2a48afb5f04e07516a84b {
    width: 60%;
}

Best regards,
Ismael