Then upon selecting the menu, the 2 options are cut off with the 2nd option (‘Donate’) appearing partially.

What settings do I need to change to ensure the toggle menu appears by default in view and the actual menu links are accessible/viewable?

The menu items are present on desktop view.

I have the following plugins installed:

Akismet Anti-spam: Spam Protection – 5.3.3
AMP – 2.5.4
BackWPup – 4.1.5
CF7 to Webhook – 3.0.4
Contact Form 7 – 5.9.8
Counter Number Showcase – 1.3.9
Disable Search – 2.1
Elementor – 3.24.6
FeedFocal – 1.3.0
Modern Events Calendar Lite – 6.5.6
Newsletter – 8.5.5
Orbit Fox Companion – 2.10.37
Really Simple Security – 9.0.2

Here is an image of my Appearance -> Menus:
https://ibb.co/XSgTHKw

Here is an image of my Appearance -> Customize -> Menu (Mobile):
https://ibb.co/SXzf2zj

thanks for any tips/solution

frank

++++++++++++

/* Change the Background Colour on Scroll */
.elementor-sticky--effects {
background: #ffffff!important;
transition: background 0.5s ease-in-out;
}

/* The scroll-logo is currently off./ .scroll-logo { display: none; } / Shut this logo off and activate the other logo after scroll*/
.elementor-sticky--effects .scroll-logo {
display: inline-block;
transition: display 0.5s ease-in-out, max-width 0.5s ease-in-out;
}

.elementor-sticky--effects .original-logo {
display: none;
transition: display 0.5s ease-in-out;
}

/* Change Text Colour and Links colour */
.elementor-sticky--effects .menutextcolours ul li a {
color: #000!important;
transition: color 0.5s ease-in-out, font-size 0.5s ease-in-out, line-height 0.5s ease-in-out;
}

/* Change the color of mobile menu toggle icon / .elementor-sticky--effects .elementor-menu-toggle__icon { color: #ff0000!important; / Change to the color you desire */
transition: color 0.5s ease-in-out;
}

== Server Environment ==
	Operating System: Linux
	Software: LiteSpeed
	MySQL version: MariaDB Server v10.3.36
	PHP Version: 7.4.33
	PHP Memory Limit: 1G
	PHP Max Input Vars: 10000
	PHP Max Post Size: 128M
	GD Installed: Yes
	ZIP Installed: Yes
	Write Permissions: All right
	Elementor Library: Connected

== WordPress Environment ==
	Version: 6.2.2
	Site URL: https://testbed.hotbed.a2hosted.com
	Home URL: https://testbed.hotbed.a2hosted.com
	WP Multisite: No
	Max Upload Size: 128 MB
	Memory limit: 40M
	Max Memory limit: 1G
	Permalink Structure: /%year%/%monthnum%/%day%/%postname%/
	Language: en-US
	Timezone: 0
	Debug Mode: Inactive

== Theme ==
	Name: Hello Elementor
	Version: 2.7.1
	Author: Elementor Team
	Child Theme: No

== User ==
	Role: administrator
	WP Profile lang: en_US
	User Agent: Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/113.0.0.0 Safari/537.36

== Active Plugins ==
	Elementor
		Version: 3.13.4
		Author: Elementor.com

== Elementor Experiments ==
	Optimized DOM Output: Active by default
	Improved Asset Loading: Active by default
	Improved CSS Loading: Active by default
	Inline Font Icons: Inactive by default
	Accessibility Improvements: Active by default
	Additional Custom Breakpoints: Active by default
	admin_menu_rearrangement: Inactive by default
	Flexbox Container: Inactive by default
	Upgrade Swiper Library: Active by default
	Grid Container: Inactive by default
	Hello Theme Header & Footer: Active by default
	Editor Top Bar: Inactive by default
	Landing Pages: Active by default
	Nested Elements: Inactive by default
	Lazy Load Background Images: Inactive by default

== Log ==
	
Log: showing 1 of 12023-06-01 13:36:25 



 Uploading Kit:  [array (
  'kit_id' => '61f6c406b3df350011ebb7b0',
  'referrer' => 'kit-library',
)]

PHP: showing 1 of 1PHP: 2023-06-01 13:36:30 [notice X 1][/home/hotbedah/public_html/testbed/wp-content/plugins/elementor/core/common/modules/ajax/module.php::175] Undefined index: data [array (
  'trace' => '
#0: Elementor\Core\Logger\Manager -> shutdown()
',
)]

== Elementor - Compatibility Tag ==

It seems to be adding a massive padding on the top and bottom of the logo on mobile.

Ive been trying to override with css – nothing is fixing this. Is there an issue with the astra theme? Really would love some help….

Could I change this with the breakpoints for toggle menu?
Does this work with CSS, can you help me?
I am using Astra only (no Elementor).

until the last theme update the toggle menu on mobile worked quite fine.
Now it stopped showing.

What’s the reason and how to fix it?

I use the theme version 4.5.

Any help appreciated.

By the way, if I make the screen on my laptop smaller than it is working. But on my mobile (Iphone 6 with Safari) the menu isn’t clickable.

I am looking forward to your tips!
[ Signature deleted ]

The main issue I’m facing with the mobile toggle menu is not closing while clicking outside of the menu item or outside of the menu.

I found a fix by searching your support threads but the main problem with this fix is when the menu has sub-menu items under a menu item, it closes without showing the submenu items when you again click on the toggle menu it shows the menu again with the submenu items opened.
Here’s the code from the thread’s support I found

wp_enqueue_script('jquery');

function custom_script() {
	?>
		<script type="text/javascript">
 			jQuery(document).ready(function($) {			

				$( document ).click( function( e ){

					if( 'fas fa-align-justify' != $( e.target ).attr( 'class') ) {
						
						var id = $( '.elementor-widget-navigation-menu' ).data( 'id' );

						if( window.matchMedia( "( max-width: 767px )" ).matches ){

							var $this = $( '.elementor-element-' + id + ' .hfe-nav-menu-icon' );
							var $selector = $this.parent().next();

							if ( $this.parent().hasClass( 'hfe-active-menu' ) ) {

								var layout = $( '.elementor-element-' + id + ' .hfe-nav-menu' ).data( 'layout' );
								var full_width = $selector.data( 'full-width' );
								var toggle_icon = $( '.elementor-element-' + id + ' nav' ).data( 'toggle-icon' );

								$( '.elementor-element-' + id).find( '.hfe-nav-menu-icon' ).html( toggle_icon );

								$this.parent().removeClass( 'hfe-active-menu' );
								$this.parent().attr( 'aria-expanded', 'false' );
								
								if ( 'yes' == full_width ){

									$this.removeClass( 'hfe-active-menu-full-width' );
								
									$selector.css( 'width', 'auto' );
									$selector.css( 'left', '0' );
									$selector.css( 'z-index', '0' );
								}				
							} 		
						}
					}
				});	
			});
		</script>
	<?php
}
add_action( 'wp_footer', 'custom_script' );