SVG Icon Implementation

February 10, 2025 · AI Conversations

User

Put below

Online-Termin

using jquery in unde this

Assistant

It looks like your message got cut off. Could you clarify what you want to add below this `div.details-logo` section? Are you adding more icons, text, or some other elements? Let me know how I can help!

User

using jquery in under this

Assistant

You can use jQuery to manipulate the `.fusion-mobile-nav-holder` navigation element. What exactly do you want to achieve with jQuery? Some common actions you might want to perform:

### 1️⃣ **Toggle Mobile Menu**
If you want to toggle the mobile menu on button click:

jQuery(document).ready(function($) {
    $('.menu-toggle-btn').on('click', function() {
        $('.fusion-mobile-nav-holder').toggleClass('active');
    });
});

Add CSS to show/hide it properly:

.fusion-mobile-nav-holder {
    display: none;
}
.fusion-mobile-nav-holder.active {
    display: flex;
}

### 2️⃣ **Append/Modify Menu Items**
If you need to add an extra menu item dynamically:

jQuery(document).ready(function($) {
    $('.fusion-mobile-nav-holder').append('<li><a href="/custom-link">Custom Link</a></li>');
});

### 3️⃣ **Change the Menu Display Style**
If you want to control the menu's visibility:

jQuery(document).ready(function($) {
    $('.fusion-mobile-nav-holder').css('display', 'block'); // or 'flex'
});

Let me know what exact functionality you're looking for! 🚀

User

prepend this

Online-Termin

Assistant

It looks like your message was cut off at the end. Do you want me to prepend this HTML to a specific section in your WordPress, Laravel, or Vue project? Let me know where you need this change, and I'll guide you accordingly.

User

fusion-mobile-nav-holder prepend under this one time
div with class "molo"

Assistant

To prepend the given “ inside the `fusion-mobile-nav-holder` but under a `div` with class `"molo"`, you can use JavaScript or modify your template directly.

If you're using JavaScript (jQuery-based method for WordPress/Avada):

jQuery(document).ready(function($) {
    $('.fusion-mobile-nav-holder').prepend('<div class="molo"><div class="details-logo"> ... </div></div>');
});

If modifying the template directly, place:

<div class="fusion-mobile-nav-holder">
    <div class="molo">
        <div class="details-logo">
            <div class="contact-icons">
                <!-- Your SVG icons go here -->
            </div>
        </div>
    </div>
    <!-- Existing content -->
</div>

Let me know if you need this dynamically added in a specific way!

User

prepend only oce

Assistant

If you want to ensure the “ is prepended **only once**, you can use JavaScript with a check to prevent duplicate inserts.

### **Using jQuery**

jQuery(document).ready(function($) {
    if (!$('.fusion-mobile-nav-holder .molo').length) { 
        $('.fusion-mobile-nav-holder').prepend('<div class="molo"><div class="details-logo"> ... </div></div>');
    }
});

### **How It Works?**
1. `$('.fusion-mobile-nav-holder .molo').length` checks if `.molo` already exists inside `.fusion-mobile-nav-holder`.
2. If it doesn’t exist, it prepends the “ only once.

This ensures that even if the script runs multiple times, the “ won't be duplicated.

Let me know if you need it in plain JavaScript! 🚀

SVG Icon Implementation

Leave a Comment Cancel