Menue/ Submenue

Hey Gabriele-Marie,

Could you post a link to where we can see the problem you are having please?

Best regards,
Rikard

Hi,

Thank you for the clarification.

We could adjust the width of the submenu a bit to make sure that the menu labels don’t break to the second line. Please add this css code in the Quick CSS field.

 .av-main-nav ul {
    margin-left: 0;
    left: 0;
    width: 250px;
}

Best regards,
Ismael

Hi,
To add custom images before menu items for both regular submenus and mega menus like this:
Main menu items:

Regular submenu items:

and mega menu items:

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

function add_image_before_menu_item_based_on_class($items) {
    // Define the images for specific CSS classes.
    $class_image_mapping = array(
        'custom-class-1' => 'https://swisspecial.com/wp-content/uploads/2023/09/png-e1695487023144.png',
        'custom-class-2' => 'https://swisspecial.com/wp-content/uploads/2023/09/siberian-husky-e1695493493574.png',
        // ... add more class-to-image mappings as needed
    );

    // Loop through each menu item
    foreach ($items as &$item) {
        // Check if any of the item's classes matches our custom classes
        foreach ($item->classes as $class) {
            if (isset($class_image_mapping[$class])) {
                // If a match is found, prepend the image to the title
                $item->title = '<img src="' . esc_url($class_image_mapping[$class]) . '" alt="" style="margin-right: 5px;width: 30px;vertical-align: middle;margin-left: -15px;" />' . $item->title;
                break;  // exit the loop once the first match is found
            }
        }
    }
    return $items;
}
add_filter('wp_nav_menu_objects', 'add_image_before_menu_item_based_on_class');

Note the custom classes have the image path assigned, and also not the inline css to set the width of the images and the margin and the vertical-align, while these work well in my example, you may wish to adjust to your specific menu style.
Then click on the Screen Options tab at the top-right corner of the screen in the menu panel and check the box next to “CSS Classes”, then click on any menu item to expand it. You will see an option named “CSS Classes” where you can add a custom class.

Best regards,
Mike