Duda Tip: Creating An Overlapping Logo

Blog Layout

Duda Tip: Creating An Overlapping Logo

May 16, 2023

You’ve worked hard to customize your business’s brand, so your logo should stand out on your website! If you’re looking for a way to make your logo pop, allow it to overlap the header behind it. It draws the attention of every website visitor — and with Duda, it’s simple to do!

We used this tip to design the Nate’s Hot Chicken website header. Want to do the same for your own site? All you’ll need is a proportional version of your logo (60x60, for example) and a static header. Let’s get started! You can follow the instructions below to implement this Duda tip on your site, or check out the video below to watch each step in real time.

Step 1: In the Duda editor, right-click your logo.

This will open your editing options.

Step 2: Select "Edit HTML/CSS".

This will be the second option from the bottom in your menu.

Step 3: Edit the general CSS.

Under the CSS tab, you’ll be able to see a box that allows you to edit "General CSS for all devices."

Find the img selector and paste the following code:

position: absolute;

left:0; /*moves the image to the left most of the container - change the value in px if adjustment is needed */

/* top:0; /* optional in adjusting the image vertically - change the value in px if adjustment is needed */

z-index: 2;

Don’t have an img section? Just add the code to the rightmost part of the selector, like this:

Step 4: Remove width properties.

Under the "Device Specific CSS" tab (located to the right of "General CSS for all devices”), remove all the width properties. We’ve highlighted them here so you know exactly where to look!

Step 5: Add the final code.

While you’re in “Device Specific CSS,” add the following code snippet to the bottom of the code. Feel free to adjust to your desired width. Since we’re working with a proportional logo, no need to adjust height!

width: 120px; /* assigned width of the image depends on your preference */

position: absolute;

It’ll look like this:

Step 6: Update your site.

Click “Update” and you’re finished! Just as we promised, this tip is super simple to execute and provides eye-catching results. Your finished product should look something like this:

Or you can check out Nate’s Hot Chicken for some logo overlap inspiration!

< Older Post Newer Post >

test

Duda Tip: Custom Button - Icon Hover Animation

08 Mar, 2024

Have you enjoyed the last two Duda tips but want a more subtle yet creative hover animation to use on your custom button? If so, you are at the right place. In this Duda tip, we will go through the steps of changing the hover action we had in our first Custom Button Duda Tip to one that is a subtle animation for our third and final way of creating a custom button. Follow along with the instructions below to implement this Duda tip on your site or check out this video to watch each step in real time.

Duda Tip: Custom Buttons - Elevated Hover Animation

08 Jan, 2024

Ready for part two? Now that we have a custom button, let's add a more creative custom hover animation! Learn how with the easy steps below, or check out this video to watch each step in real time. Let's get started!

Duda Tip: Custom Buttons - Adding Your Own Icon

04 Dec, 2023

Need your website to stand out with subtle custom touches? Custom buttons might be the answer! In this step-by-step tutorial, we will take you through the process of adding a custom icon to your buttons which is the beginning of your very own custom buttons. Learn how with the easy steps below, or check out this video to watch each step in real time. Let's get started!

Duda Tip: Add Visual Emphasis to Text

03 Nov, 2023

Welcome to another Duda Tip! Today we will show you a simple and easy trick to add visual interest to your website's text by adding a custom underline. This technique can help you emphasize important sections of copy and increase the overall visual interest of your site. We used this tip in the recent redesign of Taylor's Educational Enrichment Foundation and by following these step-by-step instructions or the video below, you will be able to as well, adding creative emphasis to headers or text on your website in no time. So, let's dive in and get started!

Duda Tip: Adding a Hover Effect

13 Oct, 2023

In this Duda Tip, we will show you how to create a hover effect! If you want to add interactive flair to your website, a hover effect is a must-do. It can help you highlight crucial information or make your site more visually appealing by aiding user interaction. Check out how with the easy steps below, or check out this video to watch each step in real time.

Duda Tip: Adding Icons to Form Fields

31 Jul, 2023

Today, we are going to step up our game when it comes to forms. Check out the finished form at Rotary Control Lawn Services . There you will find a custom form that includes added icons in each form field to improve the overall user experience. This small but significant change makes it easier for users to understand and navigate the form fields. Here’s how the customized form looks on their site after adding the icons:

Duda Tip: Creating a Custom Shape Hero

16 Jun, 2023

Designing a well-structured and visually appealing hero is key to welcoming your website visitors. Located at the top of the visual hierarchy, the hero section of your website is the first visual element your visitors see, which is why we should make it as visually appealing as possible, and that is where this Duda tip comes in. We will walk you through a few simple steps to create a custom hero shape to visually enhances your hero section and perfectly complement your Duda site, just as we did for our client Assurecare Advisors . Their final result looked like this:

Duda Tip: Adding a Journey Element

17 Apr, 2023

Want to walk your website viewers through a step-by-step process? Adding a journey element to your site with DudaFlex can make your instructions seamless and simple — and the process will look good, too! This design element is a great way to highlight your services at a high level and help new clients know what to expect when they work with you. Our client True North Restoration used this Duda Tip to walk potential customers through their company process. Their final result looked like this:

Duda Tip: Adding Custom Image Shadows to Your Site

16 Mar, 2023

Want to add character to your website design? Add visual interest by making visual elements pop off the page! When Asher House wanted to highlight a few images on their home page, we knew a custom image shadow would do the trick. Custom image shadows draw attention to certain elements by creating an elevated look. Elevation creates visual hierarchy, drawing the eye to specific sections of a page first. How can you use “elevation” to your advantage on a flat screen? Well – elevation is defined as the relative distance between two surfaces on a z-axis. When we layer two images on top of one another, the distance between them appears to be zero. But when we add shadowing, we gain the illusion of dimension – proving once again that good design is like magic.

Duda Tip: Showing Page Scroll Progress

16 Feb, 2023

If you have a website page that’s on the longer side, it can be helpful to show viewers where they are in their scroll! The simplest way to do this: display a progress bar. It adds visual interest to your site, and it gives readers an important reference point as they move below the fold. With Duda, this is an easy addition — the Dear America Foundation created one that highlights their brand colors. Today, we’re here to show you how to show page scroll progress on your site. Follow the instructions below to implement this Duda tip on your site, or check out this video to watch each step in real time!