elementor icon indicating copy to clipboard operation
elementor copied to clipboard
verified publisher icon elementor

Broken Header Display

Open Gabriel-Chiu-Design opened this issue 1 year ago • 1 comments

Prerequisites

  • [X] I have searched for similar issues in open and closed tickets and cannot find a duplicate.
  • [X] I have troubleshooted my issue, and it still exists against the latest stable version of Elementor.

Description

After the Elementor updates, my header display is not longer displayed properly according to what I've created in the editor mode. Everything looks fine in the editor mode, but once I go to the preview mode or actual site url, the flexbox setting and some other css settings, especially the text style and icon size. It just break the entire user experience for the site.

I was originally used the "Wordpress Menu" widget and I tried the "Menu" widget as well, same issues happened. I saw some people suggested to disable "Improve CSS loading" but I actually don't see this option in the Feature setting page.

Steps to reproduce

  1. Created an Elementor Page
  2. Add a new section with a flexbox container
  3. Set the flex-direction to "row"
  4. Add the Elementor Widget, "Menu", into the container
  5. Create several items like "Home", "About", "Contact"...etc.
  6. Activate dropdown menu function for one of the menu items
  7. Enable and choose an icon for the dropdown menu item
  8. Set the header position to "Fixed" with paddings and a slight grey background
  9. Save and preview your site

Expected behavior

  1. The dropdown icon you chose wouldn't display properly
  2. The flexbox behavior would be "column" but not "row"
  3. Text style you applied on the menu-items would be different than what you see in the editor
  4. You will see duplicated menu items

Isolating the problem

  • [x] This bug happens when only the Elementor (and Elementor Pro) plugins are active.
  • [X] This bug happens with the Hello Elementor theme active.
  • [X] I can reproduce this bug consistently by following the steps I described above.

Elementor System Info

== Server Environment ==
	Operating System: Linux
	Software: nginx
	MySQL version: MariaDB Server v10.6.18
	PHP Version: 8.1.29
	PHP Memory Limit: 512M
	PHP Max Input Vars: 6144
	PHP Max Post Size: 2047M
	GD Installed: Yes
	ZIP Installed: Yes
	Write Permissions: All right
	Elementor Library: Connected

== WordPress Environment ==
	Version: 6.6.1
	Site URL: https://zenlifeartisans.com
	Home URL: https://zenlifeartisans.com
	WP Multisite: No
	Max Upload Size: 2 GB
	Memory limit: 512M
	Max Memory limit: 512M
	Permalink Structure: Plain
	Language: en_US
	Timezone: Asia/Hong_Kong
	Admin Email: [email protected]
	Debug Mode: Inactive

== Theme ==
	Name: Neve
	Version: 3.8.11
	Author: ThemeIsle
	Child Theme: No

== User ==
	Role: administrator
	WP Profile lang: en-US
	User Agent: Mozilla/5.0 (Macintosh; Intel Mac OS X 10_15_7) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/127.0.0.0 Safari/537.36

== Active Plugins ==
	Akismet Anti-spam: Spam Protection
		Version: 5.3.3
		Author: Automattic - Anti-spam Team

	Crisp
		Version: 0.46
		Author: Crisp

	Crowdsignal Forms
		Version: 1.7.2
		Author: Automattic

	Crowdsignal Polls & Ratings
		Version: 3.1.2
		Author: Automattic, Inc.

	Elementor
		Version: 3.24.0-dev1
		Author: Elementor.com

	Elementor Pro
		Version: 3.23.3
		Author: Elementor.com

	Gutenberg
		Version: 19.0.0
		Author: Gutenberg Team

	Jetpack
		Version: 13.8-a.7
		Author: Automattic

	Layout Grid
		Version: 1.8.4
		Author: Automattic

	Page Optimize
		Version: 0.5.5
		Author: Automattic

	WordPress.com Editing Toolkit
		Version: 4.30504
		Author: Automattic


== Must-Use Plugins ==
	wpcomsh-loader.php
		Version: 
		Author: 


== Elements Usage ==
	
	container : 5
		button : 1
		container : 39
		heading : 35
		html : 1
		icon : 34
		image : 9
		nav-menu : 2
		nested-accordion : 1
		nested-carousel : 1
	popup : 1
		container : 2
		image : 1
		nav-menu : 1
	wp-page : 7
		button : 5
		container : 263
		heading : 286
		html : 7
		icon : 76
		icon-list : 3
		image : 46
		nav-menu : 7
		nested-accordion : 2
		nested-carousel : 6
		video : 35


== Settings ==
	
	cpt_support: e-landing-page, page, post
	disable_color_schemes: yes
	disable_typography_schemes: yes
	allow_tracking: yes
	unfiltered_files_upload: 1
	font_display: swap


== Features ==
	Custom Fonts: 0
	Custom Icons: 0

== Integrations ==
	


== Elementor Experiments ==
	Improved CSS Loading: Active by default
	Inline Font Icons: Active
	Additional Custom Breakpoints: Active
	Flexbox Container: Active
	Grid Container: Active
	Upgrade Swiper Library: Active by default
	Nested Elements Performance: Active by default
	Optimized Control Loading: Inactive
	Optimized Markup: Inactive by default
	Conditionally load Swiper CSS files: Inactive by default
	Plugin Onboarding: Active by default
	Default to New Theme Builder: Active by default
	Elementor Home Screen: Active by default
	Build with AI: Active by default
	Landing Pages: Active by default
	Launchpad Checklist: Inactive by default
	Nested Elements: Inactive by default
	Editor Top Bar: Inactive by default
	Element Caching: Inactive by default
	Elementor Editor Events: Inactive by default
	Atomic Widgets: Inactive by default
	Display Conditions: Active by default
	Form Submissions: Active by default
	Menu: Inactive by default
	Taxonomy Filter: Active by default
	Search: Inactive by default


== Log ==
	
Log: showing 20 of 372024-07-18 00:47:07 [info] elementor-pro::elementor_pro_updater Started 
2024-07-18 00:47:07 [info] Elementor Pro/Upgrades - _on_each_version Start  
2024-07-18 00:47:07 [info] Elementor Pro/Upgrades - _on_each_version Finished 
2024-07-18 00:47:07 [info] Elementor data updater process has been completed. [array (
  'plugin' => 'Elementor Pro',
  'from' => '3.22.1',
  'to' => '3.23.0',
)]
2024-07-18 00:47:08 [info] Elementor data updater process has been queued. [array (
  'plugin' => 'Elementor Pro',
  'from' => '3.22.1',
  'to' => '3.23.0',
)]
2024-07-30 12:17:21 [info] elementor-pro::elementor_pro_updater Started 
2024-07-30 12:17:21 [info] Elementor Pro/Upgrades - _on_each_version Start  
2024-07-30 12:17:21 [info] Elementor Pro/Upgrades - _on_each_version Finished 
2024-07-30 12:17:21 [info] Elementor data updater process has been completed. [array (
  'plugin' => 'Elementor Pro',
  'from' => '3.23.0',
  'to' => '3.23.2',
)]
2024-07-30 12:17:21 [info] Elementor data updater process has been queued. [array (
  'plugin' => 'Elementor Pro',
  'from' => '3.23.0',
  'to' => '3.23.2',
)]
2024-08-09 12:50:36 [info] elementor-pro::elementor_pro_updater Started 
2024-08-09 12:50:36 [info] Elementor Pro/Upgrades - _on_each_version Start  
2024-08-09 12:50:36 [info] Elementor Pro/Upgrades - _on_each_version Finished 
2024-08-09 12:50:36 [info] Elementor data updater process has been completed. [array (
  'plugin' => 'Elementor Pro',
  'from' => '3.23.2',
  'to' => '3.23.3',
)]
2024-08-09 12:50:36 [info] Elementor data updater process has been queued. [array (
  'plugin' => 'Elementor Pro',
  'from' => '3.23.2',
  'to' => '3.23.3',
)]
2024-08-26 02:01:47 [info] elementor::elementor_updater Started 
2024-08-26 02:01:47 [info] Elementor/Upgrades - _on_each_version Start  
2024-08-26 02:01:47 [info] Elementor/Upgrades - _on_each_version Finished 
2024-08-26 02:01:47 [info] Elementor data updater process has been completed. [array (
  'plugin' => 'Elementor',
  'from' => '3.23.0-dev6',
  'to' => '3.24.0-dev1',
)]
2024-08-26 02:01:47 [info] Elementor data updater process has been queued. [array (
  'plugin' => 'Elementor',
  'from' => '3.23.0-dev6',
  'to' => '3.24.0-dev1',
)]

PHP: showing 4 of 4PHP: 2024-08-02 12:14:56 [notice X 9][/srv/htdocs/wp-content/plugins/elementor/includes/base/controls-stack.php::229] hexdec(): Passing null to parameter #1 ($hex_string) of type string is deprecated [array (
  'trace' => '
#0: Elementor\Core\Logger\Manager -> shutdown()
',
)]
PHP: 2024-08-02 12:15:00 [warning X 10][/srv/htdocs/wp-content/plugins/elementor-pro/modules/dynamic-tags/tags/site-logo.php::32] Trying to access array offset on value of type bool [array (
  'trace' => '
#0: Elementor\Core\Logger\Manager -> shutdown()
',
)]
PHP: 2024-08-13 06:07:24 [warning X 4][/srv/htdocs/wp-content/plugins/elementor/includes/conditions.php::87] Undefined array key "background_color" [array (
  'trace' => '
#0: /srv/htdocs/wp-content/plugins/elementor/includes/conditions.php(87): Elementor\Core\Logger\Manager -> rest_error_handler()
#1: /srv/htdocs/wp-content/plugins/elementor/includes/conditions.php(83): Elementor\Conditions :: check()
#2: /srv/htdocs/wp-content/plugins/elementor/includes/base/controls-stack.php(1438): Elementor\Conditions :: check()
#3: /srv/htdocs/wp-content/plugins/elementor/includes/base/controls-stack.php(1222): Elementor\Controls_Stack -> is_control_visible()
#4: /srv/htdocs/wp-content/plugins/elementor/includes/base/controls-stack.php(1263): Elementor\Controls_Stack -> get_active_settings()
',
)]
PHP: 2024-08-26 05:48:24 [warning X 3][/srv/htdocs/wp-content/plugins/elementor/includes/conditions.php::87] Undefined array key "background_color" [array (
  'trace' => '
#0: Elementor\Core\Logger\Manager -> shutdown()
',
)]

JS: showing 1 of 1JS: 2024-08-02 04:19:16 [error X 6][https://zenlifeartisans.com/wp-content/plugins/elementor/assets/js/0e842fae60df2bcb2a30.bundle.min.js:2:7789] Cannot read properties of null (reading 'dataset') 



== Elementor - Compatibility Tag ==
	
	Elementor Pro: Incompatible

== Elementor Pro - Compatibility Tag ==

Agreement

  • [X] I agree that my issue may be closed without action if it doesn't meet all the requirements.

Gabriel-Chiu-Design avatar Aug 28 '24 10:08 Gabriel-Chiu-Design

We have the exact same issue, please let us know when this is resolved. Thank you

Mark-This avatar Aug 29 '24 12:08 Mark-This

Hi. Rolling back the version fixed the issue for me for now - https://github.com/elementor/elementor/issues/28533#issuecomment-2314116068

radarhere avatar Aug 29 '24 22:08 radarhere

Hello @Gabriel-Chiu-Design!

Thank you for reaching out! 🙏

We noticed that you're using the Elementor Beta (Developer Edition) plugin. This edition is a playground for developers to test their plugins and themes with the most recent features of Elementor, and it's not quite intended for use on live websites.

In the most recent release of this Developer Edition plugin, a conflict between the Core version (3.24.0-dev3) and older versions of the Pro plugin has caused an incompatibility in the rendering of the CSS. This should be fixed with the release of the Elementor Core (Free) version 3.24.0, and Elementor Pro version 3.24.0 tomorrow.

🧪 Due to the experimental nature of this Developer Edition plugin, we're unable to provide support for it.

But don't worry! Our stable versions are full of great features that are ready for prime time on your website.

🔄 Please, revert back to a stable version of Elementor if you're working on a production site.

Kind regards

nicholaszein avatar Sep 09 '24 23:09 nicholaszein