cre8-widgets

How to Make Duda's Mega Menu Work on Click (Instead of Hover)

admin@cre8mysite.com (Aj Pfeil) — Fri, 25 Apr 2025 02:02:52 GMT

Kill the Hover, Embrace the Click: Fixing Duda's Mega Menu

Let me guess — you were cruising through Duda’s new Flex Editor, feeling pretty good about life, and then BAM — you added a Mega Menu, hovered your mouse over it, and that sucker exploded open like it had a caffeine addiction.

You thought, “Cool, now how do I make this open on click instead of hover?”

Spoiler alert: you can’t — at least not out of the box.

But don’t worry, I cracked the code and now I’m giving it to you. For free. Because I’ve already lost enough time (and brain cells) figuring this out so you don’t have to.

The Problem (a.k.a. Why You’re Crying in Flex Editor)

Duda’s Mega Menu works like this: you hover over a menu item, and it reveals a beautifully designed dropdown full of links, columns, images, or whatever other fancy stuff you packed in there.

Sounds great, right?

Well, sure — until you want to open it with a click instead . That’s when things get weird.

Here’s what was happening before I fixed it:

The mega menu still opened on hover , even when I tried using custom code to stop it. It’s like Duda didn’t care what I wanted — it just did its own thing.
When I tried to add a click trigger, it wouldn’t work on the first click . You’d have to click the menu item twice like it was playing hard to get.
Sometimes the hover styles would sneak back in after page transitions or editor hydration. (Ghost styles, anyone?)
And every now and then the menu would just flicker like a busted neon sign , making your site look like it was built in 2004.

Not exactly the premium UX your clients are paying for, right?

The Solution (Cue the Hero Music)

Instead of arm wrestling Duda’s internal menu system, I decided to go full ninja mode:

I used event delegation to intercept clicks on mega menu links before Duda gets a chance to react.
I grabbed the associated mega menu section by its ID, manually toggled its visibility , and completely nuked hover behavior.
I made it work for multiple mega menus , because one just isn’t enough these days.
And yes — it all works on the first click without cloning, replacing, or sacrificing a goat to the JavaScript gods.

The Code (That Will Save Your Sanity)

Copy and paste this into your Body End HTML in Duda Site Settings:

Why It Works (And Why I’m So Damn Proud of It)

This approach is simple, scalable, and won’t break your editor experience. Here’s what makes it tick:

Event delegation means we’re not attaching click handlers to each item directly. We’re catching clicks at the top and letting them bubble up.

No cloning, replacing, or dark DOM rituals — just clean vanilla JavaScript.
Hover behavior gets nuked right at the root with one simple data-show-vertical-sub-items="HIDE" .
It scales. Want 2 mega menus? 5? 47? This thing handles them all without breaking a sweat.
It’s future-proof. Duda can update their internal logic all they want — we’re intercepting events before they get a chance to mess with them.

Final Thoughts

Let’s be real: Duda’s Mega Menu is beautiful, but the default hover behavior isn’t for everyone. Especially when you're trying to build a clean, click-driven UX that works across devices and keeps users in control.

This fix gave me total control back — and now, you’ve got it too.

Want help implementing this?

Hit me up at Cre8 My Site

Elevate Your Web Design: The Float Effect

admin@cre8mysite.com (Aj Pfeil) — Tue, 10 Dec 2024 15:37:54 GMT

Elevate Your Web Design: The Hover Float & Scale Effect

In the realm of web design, interactivity plays a crucial role in crafting unforgettable user experiences that stand out. A straightforward yet impactful method to infuse your website with a dynamic flair is through hover effects. Today, we explore a simple yet powerful hover effect that gives elements the illusion of floating, slightly scaling, and gliding in a specified direction—all with a seamless and sophisticated transition. The greatest advantage? It's lightweight and relies solely on pure CSS!

Why Use Hover Effects?

Hover effects are more than just eye candy. They:

Enhance user engagement by providing instant feedback when interacting with elements.
Direct attention to specific areas, such as buttons or clickable cards.
Create depth and polish, making your site feel modern and professional.

The Float & Scale Effect achieves all of these benefits, making it perfect for buttons, images, or feature cards.

How It Works.

The effect integrates three essential CSS properties:

transform: Shifts the element, creating the illusion of movement.
transition: Guarantees that the alterations unfold seamlessly over a specified duration.
box-shadow: Provides depth to emulate the element rising from the page.

Step-by-Step: Create the Hover Float & Scale Effect

Implementing this concept on a Duda website is quite straightforward. We aim to apply the CSS to either the specific page or the entire site, depending on where you wish the effects to take place. For a sitewide effect, it's best to place the CSS within the site.css folder in "Dev Mode." If you're uncertain about how to access Dev Mode, just click the </> Icon located in the top Context Bar of your Duda Editor. Once you're in Dev Mode, navigate to the site.css folder from the left sidebar.

Step 1: The CSS

Insert the following code into the site.css folder of your website. This can be accomplished using either the classic editor or the new 2.0 editor. Remember to include the pesky !important that Duda appears to need.

/* Base float effect - add smooth transition */

.float-up, .float-down, .float-left, .float-right {

transition: transform 0.3s ease, box-shadow 0.3s ease !important;

}

/* Float directions with scale */

.float-up:hover {

transform: translateY(-10px) !important;

box-shadow: 0 8px 15px rgba(0, 0, 0, 0.2) !important;

}

.float-down:hover {

transform: translateY(10px) !important;

box-shadow: 0 -8px 15px rgba(0, 0, 0, 0.2) !important;

}

.float-left:hover {

transform: translateX(-10px) !important;

box-shadow: 8px 0 15px rgba(0, 0, 0, 0.2) !important;

}

.float-right:hover {

transform: translateX(10px) !important;

box-shadow: -8px 0 15px rgba(0, 0, 0, 0.2) !important;

}

Step 2: Adding the Classes

After pasting the code into the folder, it's crucial to learn how to "Edit the HTML/CSS" of an element. The 2.0 editor currently faces some limitations regarding the modification of the HTML/CSS for a flex element. However, Duda offers an excellent feature that allows you to seamlessly add a custom class name to any flex element. You can assign the Class Name to any element you desire, whether it's a Button, Image, Title, Column, or anything in between! The effect will become apparent when you hover over this element. The classes in this case are as follows.

float-up
float-down
float-left
float-right

Remember when adding a class to the html of an element, you do not need to add the . that starts each class in the CSS. So for the .float-up effect, the class to add is float-up

Breaking it down.

transform: scale(1.05): Enlarges the element by 5%, producing a gentle pop effect.
translateX() and translateY(): Shifts the element in a defined direction (up, down, left, or right).
box-shadow: Creates an illusion of depth by placing a shadow below the element.
transition: Eases the effect over 0.3 seconds, resulting in a refined and polished appearance.

Where to use this effect.

This effect is excellent for:

Call-to-action buttons: Enhance their visibility to drive clicks.
Feature cards: Introduce subtle interactivity to highlight key content.
Images: Develop an engaging gallery or portfolio.

Keep in mind that when incorporating animations, LESS IS MORE! While their eye-catching allure may tempt you to inundate your website with sleek and appealing animations, it's best to use them judiciously.

Customizations

Experiment with more vibrant or colorful shadows. We like to use this shadow generator to design shadows for our elements. Once you create your shadow, apply it to the floating classes. You can also edit the Scale size, as well as the speed of the animation.

.float-up:hover {

transform: scale(1.05) translateY(-10px) !important;

}

.float-up:hover {

box-shadow: 0 8px 15px rgba(0, 0, 0, 0.2), 0 0 10px rgba(255, 255, 255, 0.5) !important;

}

transition: transform 0.5s ease, box-shadow 0.5s ease !important; (0.3 to 0.5 is a standard transition timing).

Final Thoughts.

The Hover Float & Scale Effect is an incredibly powerful tool that can significantly elevate your web design, making it an essential addition to any developer's toolkit. Its understated yet impactful nature introduces an engaging element of interactivity that captivates users and draws them into the experience. With merely a handful of CSS lines, you can not only enhance the appearance of your site but also improve the overall user experience, transforming it into a more vibrant and contemporary platform that stands out in today’s digital landscape.

So, why not give it a try? Dive into the world of hover effects and showcase your creative designs to your audience with confidence. Let’s embark on a journey towards superior web design, one hover effect at a time, and watch as your website comes to life, leaving a lasting impression on every visitor.

See the Effects

How to Make Your Website’s Tab Title Flash on a Specific Page

admin@cre8mysite.com (Aj Pfeil) — Sat, 07 Dec 2024 14:43:55 GMT

How to Make Your Website’s Tab Title Flash on a Specific Page

An eye-catching flashing tab title serves as an entertaining and efficient method to capture your visitors' attention when they leave your site. By alternating between two messages in the browser tab, you can prompt users to return, showcase special offers, or simply infuse a creative touch into your website. In this tutorial, you will discover how to create the flashing tab title effect and implement it on a specific page of your site. Let’s get started!

Why Use a Flashing Tab Title?

Flashing tab titles are a simple way to engage users when your website is not in focus. They can be used to:

Prompt users to return to your page.
Showcase a message or promotion.
Add personality and interactivity to your site.

But you may not want this feature across your entire website. Sometimes, it’s best to limit it to a specific page, like a landing page or promotion page.

What We’re Building

Here’s what will happen:

When the user navigates away from the specific page (in this case, this page), the tab title will alternate between two messages:
“Come Back” and “To Cre8 Widgets”.
The messages will flash every 3 seconds.
When the user returns to the tab, the original title will be restored.

Step 1: Basic HTML Structure

First, create the webpage where you want the effect to appear. We are using just this blog post for this feature.

Step 2: Adding the JavaScript for a Single Page

To make this effect work on just one page, we’ll use JavaScript to check the page’s URL or unique identifier.

Option 1: Check the Page URL

Since your website has unique URLs for each page, you can use this script to target specific page URLS:

html

<script>

// Check if the current page is the one you want the effect on

if (window.location.pathname === "/flashing-tab-page") {

const originalTitle = document.title;

const flashTitles = ["Come Back", "To My Blog Post"];

let flashIndex = 0;

let flashInterval;

function startFlashing() {

flashInterval = setInterval(() => {

document.title = flashTitles[flashIndex];

flashIndex = (flashIndex + 1) % flashTitles.length;

}, 1500);

}

function stopFlashing() {

clearInterval(flashInterval);

document.title = originalTitle;

}

document.addEventListener("visibilitychange", function () {

if (document.hidden) {

startFlashing();

} else {

stopFlashing();

}

});

}

</script>

In this example:

window.location.pathname : Checks the page's URL path (e.g., /flashing-tab-page).

The script runs only if the user is on the page /flashing-tab-page.

Option 2: Body End for sitewide Effect

Sitewide. You can place this script in the Body End of your Duda website (either with your SEO & Settings in the left context bar, or in Dev Mode). Simply edit the code with your effect (your messages, and time) and place it in the body end file on your Duda Website.

Option 3: Single Page without URL recognition.

The Following script will work in either the Body-End (option 2), or in an HTML Widget to apply it to just a single page!

<script>

// Store the original title

const originalTitle = document.title;

// Titles to flash

const flashTitles = ["Come Back", "To My Blog Post"];

let flashIndex = 0; // Index to track the current flashing title

let flashInterval; // To store the interval ID

// Function to start flashing titles

function startFlashing() {

flashInterval = setInterval(() => {

document.title = flashTitles[flashIndex];

flashIndex = (flashIndex + 1) % flashTitles.length; // Toggle between titles

}, 1500); // Change every 1.5 seconds

}

// Function to stop flashing and restore the original title

function stopFlashing() {

clearInterval(flashInterval); // Stop the interval

document.title = originalTitle; // Restore the original title

}

// Listen for visibility change

document.addEventListener("visibilitychange", function () {

if (document.hidden) {

startFlashing(); // Start flashing when the tab is inactive

} else {

stopFlashing(); // Stop flashing when the tab is active

}

});

</script>

Step 3: Test the Effect

Save and open the site > Switch to another tab > Watch the tab title alternate between “Come Back” and “To Cre8 Widgets” every 1.5 seconds.

Return to the tab, and the original title will be restored.

Customizing the Effect

You can easily tweak the script to fit your needs:

Change the Messages: Update the flashTitles array with your desired text.
Adjust the Timing: Modify 3000 in the setInterval function to change the interval (in milliseconds).
Add More Messages: Add more entries to the flashTitles array to cycle through additional messages.

Why Limit It to a Single Page?

While a flashing tab title can be a useful attention-grabber, it might not make sense across your entire website. Limiting it to a single page ensures:

A better user experience by not overwhelming visitors.
Focused messaging for specific goals, like highlighting a sale or encouraging engagement on a key page.

Conclusion

By targeting a specific page with a flashing tab title effect, you can effectively grab your visitors’ attention without overusing this feature. Whether you’re using a unique URL or a page-specific identifier, this guide gives you all the tools you need to implement it seamlessly.

Now it’s your turn! Add this effect to your site, and let your creativity shine. If you’ve implemented this, share your experience in the comments below. Happy coding! ��

Creating a Dynamic Header Animation on a Duda Website

admin@cre8mysite.com (Aj Pfeil) — Fri, 06 Dec 2024 16:28:23 GMT

Creating a Dynamic Header Animation on a Duda Website

Incorporating dynamic elements into your website can enhance both user experience and design aesthetics. A straightforward yet powerful feature is a scrolling header that disappears as users scroll down and reemerges when they scroll up. This is especially beneficial for maintaining accessible navigation while conserving valuable screen space. Here's an overview of how it functions and how you can integrate it into your Duda website.

What Does This Code Do?

This script enhances your website header, making it both intelligent and dynamic:

When you scroll down, the header gracefully slides out of sight, providing more room for your content.

When you scroll up, the header reemerges, ensuring easy access to navigation links.

This effect is accomplished by sensing the direction of the user’s scroll and applying CSS classes to the header for smooth animation.

How It Works

The JavaScript code monitors scroll events and evaluates the user's scroll position. Based on whether the user is scrolling upward or downward, it adds a scroll-up or scroll-down class to the header element. These classes initiate CSS animations that move the header in or out of view. The corresponding CSS specifies the visual behavior of the header: In its Default State, the header remains fixed at the top of the page. When scrolling down, the scroll-down class applies a transformation that conceals the header. Conversely, when scrolling up, the scroll-up class reverses the transformation, revealing the header once more.

The Code - JavaScript

<script>

dmAPI.runOnReady('runOnReady',function(){

let header = $('.dmHeaderContainer');

let lastScroll = 100;

$(window).scroll(function() {

let currentScroll = $(window).scrollTop();

if (currentScroll <= 100) {

header.removeClass('scroll-up');

return;

}

if (currentScroll > lastScroll) {

header.removeClass('scroll-up').addClass('scroll-down');

} else if (currentScroll < lastScroll) {

header.removeClass('scroll-down').addClass('scroll-up');

}

lastScroll = currentScroll;

});

</script>

The Code - CSS

.dmHeaderContainer.scroll-down {

transform: translate3d(0, -100%, 0);

}

.dmHeaderContainer.scroll-up {

transform: none;

}

.dmHeaderContainer {

position: fixed;

top: 0;

width: 100%;

left: 0;

z-index: 1000;

transition: transform 0.4s;

}

How to Implement It

Add the JavaScript:

Navigate to Site Settings > Body-End html in your Duda editor.

Paste the JavaScript code.

Add the CSS:

Go to Dev Mode > How To Access Dev Mode - Navigate to Site.CSS Folder.

Add the CSS code.

Test the Feature:

Preview your website and scroll up and down to see the header’s dynamic behavior.

Why Use This Feature?

Enhances Usability: Ensures navigation is readily accessible when required. Refines Design: Delivers a sleek, contemporary user experience. Tailorable: Modify the animation timing or look to align with your brand identity. This compact yet impactful feature can significantly boost both the functionality and visuals of your Duda website. Try it out and witness the improvement it brings!

How to Add a Table of Contents to Your Duda Site

admin@cre8mysite.com (Aj Pfeil) — Wed, 04 Dec 2024 14:17:06 GMT

Adding a Table of Content to your Duda Websites

A Table of Contents (TOC) is a fantastic addition to any webpage, especially for blogs or long-form content. It enhances the user experience by providing quick navigation links to different sections on a page, improving readability and engagement. In this guide, I’ll show you how to implement a fully functional Table of Contents on your Duda website using a simple JavaScript snippet.

Step 1: Create the HTML Structure

To start, add a placeholder for the Table of Contents in your Duda site. Here’s the HTML structure to include:

<div class="table-of-contents-widget">

<h2>Table of Contents</h2>

<ul class="toc-list">

</ul>

</div>

You can place this anywhere on your page—above your main content is typically the best spot.

Step 2: Add the JavaScript

Copy and paste the following JavaScript snippet into the HTML section of an HTML widget. This approach works because the Body End and Head HTML sections of the website do not properly inject the JavaScript into the page for this purpose. Using an HTML widget ensures the script works as intended.

<script>

document.addEventListener("DOMContentLoaded", function () {

const tocList = document.querySelector(".table-of-contents-widget .toc-list");

if (!tocList) {

return;

}

// Find all headings except H1

const headings = document.querySelectorAll("h2, h3, h4, h5, h6");

// Generate TOC links

headings.forEach(function (heading, index) {

if (!heading.id) {

heading.id = "toc-heading-" + index; // Assign a unique ID if none exists

}

const tocItem = document.createElement("li");

const tocLink = document.createElement("a");

tocLink.href = "#" + heading.id;

tocLink.textContent = heading.textContent;

tocItem.appendChild(tocLink);

tocList.appendChild(tocItem);

});

</script>

How the JavaScript Works

JavaScript: The script identifies all headings (<h2>, <h3>, etc.) in your content except <h1>.

Dynamic Linking: For each heading, it creates a clickable link inside the Table of Contents.

Unique IDs: If a heading doesn’t have an ID, the script automatically generates one, ensuring the links work seamlessly.

Step 3: Test Your Table of Contents

Preview Your Site: Open your site in preview mode or publish it to a test environment.

Check Links: Click on the TOC links to ensure they scroll smoothly to the corresponding headings.

Refine Styling: Add or adjust CSS to customize the look of your Table of Contents.

Why Use This Solution?

This simple yet effective Table of Contents is lightweight, requires no third-party injected scripts, and works seamlessly within Duda’s environment. By implementing it, you provide your audience with an improved reading experience while boosting your site’s usability and SEO.

While we attempted to create a fully functioning widget for this, we encountered issues getting the JavaScript to inject into the Body End section and render properly on Duda pages. Therefore, we’re offering this solution for FREE to our followers and fans!

For the entire code snippet in this post, use an HTML widget within Duda and paste the code inside.

That’s it! You’ve successfully added a dynamic, functional Table of Contents to your Duda site.

Purchase this as a widget instead

If you would rather purchase this as a widget, instead of using the DIY solution, we would greatly appreciate that. You can checkout the widget in this post at the top of the article. You can purchase the widget HERE

Website Scroll Bars

Sun, 03 Nov 2024 14:38:53 GMT

Custom Scrollbar Styling Tutorial for Duda Websites

Customizing the scrollbar adds a unique touch to your website's design. With the CSS provided, you can change the scrollbar’s color, size, and even its hover effects. By following this guide, you’ll learn how to apply this code to your Duda website and personalize it to match your brand.

Step 1: Understanding the CSS Code

Below is the code snippet we’ll be using. Each part of the code is explained in detail to help you make adjustments:

/* WEBSITE SCROLL BAR CSS */

::-webkit-scrollbar {

width: 15px;

}

::-webkit-scrollbar-track {

box-shadow: inset 0 0 10px #eeeeee;

border-radius: 5px;

}

::-webkit-scrollbar-thumb {

background: #23a0a3;

border-radius: 5px;

}

::-webkit-scrollbar-thumb:hover {

background: #1b7d7e;

}

Explanation of Each Selector:

::-webkit-scrollbar : This targets the scrollbar itself and allows us to set its width. Here, we set the width to 15px . You can adjust this to make the scrollbar narrower or wider, depending on your design preference.
::-webkit-scrollbar-track : This defines the track of the scrollbar—the area in which the scrollbar thumb moves. We use the box-shadow property to add a subtle inner shadow effect ( inset 0 0 10px #eeeeee ), giving it a more defined, styled appearance. The border-radius of 5px rounds the corners of the scrollbar track. Adjusting the radius here will make it more or less rounded.
::-webkit-scrollbar-thumb : This targets the thumb(the part of the scrollbar you drag to scroll). We set the background color to #23a0a3 (a teal color in this case). The border-radius of 5px rounds the corners of the thumb, making it more visually appealing and matching the style of the track.
::-webkit-scrollbar-thumb:hover : This modifies the thumb’s appearance when hovered over. We change the background color to a darker shade, #1b7d7e , to give users a visual cue when they hover.

Note: These properties apply to WebKit browsers like Chrome and Safari. Firefox and Internet Explorer require different properties, which aren’t supported in Duda at this time.

Step 2: Adding the Code to Your Duda Site

Navigate to Site CSS :

In Duda’s editor, go to Dev Mode > site.css
Alternatively, if you want this to apply only to a specific page, you can use the Page CSS section for that page.

Paste the Code : Copy the entire CSS code above and paste it into the CSS area.
Save and Preview : Save the changes and preview your site to see the custom scrollbar styling in action.

Step 3: Customizing the Scrollbar

The following are some adjustments you can make to personalize the scrollbar further:

Scrollbar Width( ::-webkit-scrollbar ):
Adjust width: 15px; to make the scrollbar thinner or thicker. For example, setting it to 10px will create a slimmer scrollbar.
Track Shadow Color and Radius( ::-webkit-scrollbar-track ):
Modify box-shadow: inset 0 0 10px #eeeeee; to change the shadow’s color and strength.
Change #eeeeee to any color that matches your site’s theme.
Adjust border-radius: 5px; to control the roundness. A smaller number (e.g., 2px ) makes it less rounded, while a larger number (e.g., 10px ) makes it more rounded.
Thumb Color and Radius( ::-webkit-scrollbar-thumb ):
Change background: #23a0a3; to any color that aligns with your brand.
Adjust border-radius similarly to control how rounded the thumb looks.
Hover Effect( ::-webkit-scrollbar-thumb:hover ):
The hover effect color ( #1b7d7e ) provides visual feedback to users. Feel free to change this color to create contrast with the regular thumb color.

Example Customization

Let’s say you want a thinner scrollbar with a dark gray track and a blue thumb that turns light blue on hover.

Here’s how that code might look:

::-webkit-scrollbar {

width: 8px;

}

::-webkit-scrollbar-track {

box-shadow: inset 0 0 5px #444444;

border-radius: 2px;

}

::-webkit-scrollbar-thumb {

background: #007bff;

border-radius: 2px;

}

::-webkit-scrollbar-thumb:hover {

background: #66b2ff;

}

Step 4: Preview and Test Across Devices

After customizing the scrollbar, make sure to:

Preview the site to ensure the scrollbar looks and functions as expected.
Test on mobile and desktop to ensure the design feels right on different devices, even though custom scrollbars are primarily desktop features.

That’s it! With these steps, you now have a customized scrollbar that matches your Duda site’s design and enhances user experience. Enjoy experimenting with different styles and colors to find the perfect fit for your website!