Menus with Images

[Allan]

Spoiler

<li class="menu-item menu-item-type-post_type menu-item-object-page menu-item-has-children menu-item-1122 has-children">
    <a href="services/index.html" class="mega-menu-img mega-menu-img-left" data-level="1"><i
            class="fa-fw fas fa-folder-open" style="margin: 0px 6px 0px 0px;"></i><span class="menu-item-text"><span
                class="menu-text">Self Services</span></span></a><i class="next-level-button"></i>
    <ul class="sub-nav level-arrows-on" style="left: 0px; opacity: 0; visibility: hidden;">
        <li class="menu-item menu-item-type-post_type menu-item-object-page menu-item-1114 first">
            <a href="#" class="mega-menu-img mega-menu-img-left" data-level="2">
                <img class="preload-me lazy-load is-loaded" src="assets/images/s023-40x40.jpg" alt="Menu icon"
                    width="40" height="40" style="border-radius: 0px; margin: 0px 10px 0px 0px; will-change: auto;"
                    srcset="assets/images/s023-40x40.jpg 40w, assets/images/s023-80x80.jpg 80w">
                <span class="menu-item-text">
                    <span class="menu-text">Self Service</span>
                </span></a>
        </li>
        <li class="menu-item menu-item-type-custom menu-item-object-custom menu-item-358"><a href="#"
                class="mega-menu-img mega-menu-img-left" data-level="2"><img class="preload-me lazy-load is-loaded"
                    src="assets/images/s021-40x40.jpg" alt="Menu icon" width="40" height="40"
                    style="border-radius: 0px; margin: 0px 10px 0px 0px; will-change: auto;"
                    srcset="assets/images/s021-40x40.jpg 40w, assets/images/s021-80x80.jpg 80w"><span
                    class="menu-item-text"><span class="menu-text">Self Service</span></span></a></li>
        <li class="menu-item menu-item-type-custom menu-item-object-custom menu-item-359"><a href="#"
                class="mega-menu-img mega-menu-img-left" data-level="2"><img class="preload-me lazy-load is-loaded"
                    src="assets/images/s025-40x40.jpg" alt="Menu icon" width="40" height="40"
                    style="border-radius: 0px; margin: 0px 10px 0px 0px; will-change: auto;"
                    srcset="assets/images/s025-40x40.jpg 40w, assets/images/s025-80x80.jpg 80w"><span
                    class="menu-item-text"><span class="menu-text">Self Service</span></span></a></li>
        <li class="menu-item menu-item-type-custom menu-item-object-custom menu-item-360"><a href="#"
                class="mega-menu-img mega-menu-img-left" data-level="2"><img class="preload-me lazy-load is-loaded"
                    src="assets/images/s026-40x40.jpg" alt="Menu icon" width="40" height="40"
                    style="border-radius: 0px; margin: 0px 10px 0px 0px; will-change: auto;"
                    srcset="assets/images/s026-40x40.jpg 40w, assets/images/s026-80x80.jpg 80w"><span
                    class="menu-item-text"><span class="menu-text">Self Service</span></span></a></li>
        <li class="menu-item menu-item-type-custom menu-item-object-custom menu-item-361"><a href="#"
                class="mega-menu-img mega-menu-img-left" data-level="2"><img class="preload-me lazy-load is-loaded"
                    src="assets/images/s027-40x40.jpg" alt="Menu icon" width="40" height="40"
                    style="border-radius: 0px; margin: 0px 10px 0px 0px; will-change: auto;"
                    srcset="assets/images/s027-40x40.jpg 40w, assets/images/s027-80x80.jpg 80w"><span
                    class="menu-item-text"><span class="menu-text">Self Service</span></span></a></li>
        <li class="menu-item menu-item-type-custom menu-item-object-custom menu-item-362"><a href="#"
                class="mega-menu-img mega-menu-img-left" data-level="2"><img class="preload-me lazy-load is-loaded"
                    src="assets/images/s020-40x40.jpg" alt="Menu icon" width="40" height="40"
                    style="border-radius: 0px; margin: 0px 10px 0px 0px; will-change: auto;"
                    srcset="assets/images/s020-40x40.jpg 40w, assets/images/s020-80x80.jpg 80w"><span
                    class="menu-item-text"><span class="menu-text">Self Service</span></span></a></li>
    </ul>
</li>

 

How do i go about this?

[kongondo]

Hi @Allan,

Welcome to ProcessWire and the forums.

moderator note:

I merged your two posts. I also added code blocks around your HTML code for better readability. In addition, I wrapped it inside a spoiler because it is a long piece of code. This also helps with readability (and scrolling).

[Clarity]

Hi, @Allan!

Could you please explain more precisely the matter of the problem?