"The Avada theme on Wordpress is causing a glitch where the header and logo jerk uncontrollably out of the sticky header

I'm currently working on a website and have made tweaks to everything except for some logo/header issues.

One specific problem I'm facing is with the sticky header animation. When scrolling back up quickly, the logo jumps out of the bottom of the header for a second, creating a jerky effect that looks strange to the user.

You can view the site at www.Dev.smithermancpa.com and see this issue in action by scrolling the page.

I made a small improvement by adjusting the animationDuration in the avada-header.js file (from 300 ms to 100 ms), but I'm hoping for a more effective solution. I've seen smoother sticky header animations on other sites, so there must be a better way to address this problem that I am not aware of yet.

javascriptjquerycsswordpress

Answer №1

Dealing with a similar issue here. Currently using Avada 5.2.1.

What I've observed across all browsers is a noticeable two-step animation when transitioning from the large logo to the small logo, without any intermediary animations.

I may have discovered a method to achieve a smoother animation right away. My approach involves setting a background for the logo while ensuring this background remains transparent. A specific theme setting allows for adjusting the logo background. Simply choose black as the color and reduce the opacity to its minimum level.

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

Occasionally, data may fail to be fetched when using a Jquery GET

Here's what I've narrowed it down to: $.getJSON('/drinks/getColors', function(items) { colors = items; }); $.each(colors, function(index2, value2) { if (value.name == value2.name) { curColor = value2.color; } }); ...

javascriptjquerynode.jsexpress

The SVG image does not display in browsers other than Internet Explorer (IE)

I am encountering an issue with adding a menu toggle image in SVG format to my HTML. Unfortunately, the image is not displaying as expected. Here are screenshots for comparison between Explorer and Chrome: https://i.stack.imgur.com/74sqh.png https://i. ...

javascripthtmlcsssvg

Ways to prevent an empty iframe from triggering a load event upon injection

I have implemented a technique where I am using an empty frame to handle pseudo-asynchronous form submission. This involves referencing the frame's name attribute in the form's target attribute, allowing the form's action URI to resolve in t ...

javascripthtmljquerydomjquery-events

Customizing Echart tooltip appearance

I've integrated echart () into my Vue.js application, and I'm attempting to personalize the tooltip on a ring chart. However, I'm facing challenges in achieving this customization. My goal is to show my own JSON data in the tooltip when hove ...

javascriptc#asp.net.netjson

What is the most reliable way to verify when knockout has completed data binding?

Implementing the panelBar feature from KendoUI into an app at work has been a challenge. It seems that KendoUI and KnockOut don't play nicely together. The issue I am facing is that the panelBar implementation is being disrupted by a dynamic knockout ...

javascriptbindingknockout.jskendo-ui

Waveform rendering in HTML5 using wavesurfer.js struggles to handle large mp3 files

Recently, I was considering incorporating wavesurfer.js into one of my projects so I decided to explore the demo on To test it out, I uploaded a large mp3 file (approximately 2 hours long) onto the designated area in the middle of the page. It appeared to ...

javascripthtmlhtml5-audioweb-audio-api

Steps for transferring PHP variables to a Bootstrap 4 modal

I am working on a Laravel project where I have implemented recursion to create different HTML elements for each item. My goal is to open a modal when clicking on these links and pass the appropriate variable based on the clicked element. EDIT: Changes mad ...

javascriptphphtmllaravelbootstrap-4

Error: The JavaScript SRC cheat is malfunctioning

Having an issue with the code below. The 'dummy1' and 'dummy2' variables are not loading their content as expected on the page. Any suggestions? <html> <head> <title>JavaScript On-line Test</title> <script LA ...

javascripthtml

Should I generate a new object or utilize an already existing one?

When working with JavaScript and needing to replace existing data with new data, what is considered a good or "correct" practice? I currently utilize Dojo's Memory and dGrid to showcase my data. The information is refreshed each time the user clicks ...

javascriptobjectdojo

Guide on assigning a value to a concealed type input using JavaScript

Currently, I am utilizing jsp technology and facing an issue where I need to establish a value from JavaScript to an HTML hidden type input so that I can transmit the data to another webpage. This is the part of my HTML code where I am encountering this c ...

javascripthtmljsp

The Discord.js Avatar command does not support mentioning users

Everything seems to be working fine when I check my own avatar, but it doesn't work properly when I mention another user. Here's the code I'm using: client.on('message', message => { if (message.content === `${prefix}ava`) { ...

javascriptdiscord

The Autocomplete feature from the @react-google-maps/api component seems to be malfunctioning as it returns

I'm encountering some difficulties with the Autocomplete component in @react-google-maps/api. While Autocomplete is working and displaying options, clicking on an option fills the input box but I'm only getting 'undefined' from the Plac ...

javascriptreactjsgoogle-maps

Unable to insert an array within a function

I've searched for the answer but couldn't find it - my array is not pushing to datahasil. How can I push the array hasil into datahasil...?? const data1 = await JadwalBooking.aggregate([{ $project: { "keterangan": "$keterangan", ...

javascriptnode.jsexpressmongoose

Swapping out meshes on the fly using three.js動态替换单个网格与

I have a unique idea for a breakout game where the paddle is shaped like a piece of roof trim, with its shape changing based on the pitch of the roof. Hitting special bricks will alter the pitch variable, thus changing the "steepness" of the paddle. Howeve ...

javascriptobjectdynamicreplacethree.js

"Revealing the specific row and column of the selected element in each table when hovering over it

On my webpage, I have set up two tables positioned side by side like this: <!DOCTYPE html> <table> <tr> <td> <table> <tr><td>1</td><td>2& ...

jqueryhtmlcsshtml-tablehover

The combination of jQuery 1.8.2 autocomplete, .live(), and .create() is causing issues and not functioning properly when

I am currently working on an asp.net MVC web application and utilizing jQuery version 1.8.2 along with jQuery-ui 1.8.24. The autocomplete code I have implemented is as follows: $("#ServerTag,#SDTag,#FirewallTag,#RouterTag,#SwitchTag").live("focus.autocomp ...

javascriptjqueryjquery-uiautocompletejquery-1.8

Tips for cropping an image using CSS with dimensions specified for width, height, and x and y coordinates

As I work on implementing a cropping feature using react-easy-crop, my goal is to store the user's image along with pixel coordinates that dictate their preferred cropping area. My objective is to utilize the parameters provided by react-easy-crop in ...

javascripthtmlcssreactjs

Creating a table with adjustable row heights is a great way to enhance the user

Can the height of an HTML table row be adjusted dynamically by dragging and dropping, similar to how it's done in this demo (https://reactdatagrid.io/docs/row-resize), but for free? ...

htmlcssreactjs

Efficiently process and handle the responses from Promise.all for every API call, then save the retrieved data

Currently, I am passing three API calls to Promise.all. Each API call requires a separate error handler and data storage in its own corresponding object. If I pass test4 to Promise.all, how can I automatically generate its own error and store the data in ...

javascriptreactjstypescriptasync-awaites6-promise

Issue with date comparison operator logic

Here's a simple JavaScript function I have: function checkTime() { var current = new Date(); var target = new Date('April 10, 2017 12:11:00'); if (current < target) { $('#modalnew').modal('show'); } els ...

javascriptdatedate-comparison