My mobile header includes my logo (text) on the left and an offcanvas menu by royal addons on the right.

Yet the logo doesn’t display anymore as the offcanvas menu immediately shows up dropped down, although I haven’t clicked on the menu button to open it, it opens by itself.

The menu is not covering the web page anymore, there’s no overlay showing, the page sections are actually following the menu which looks now like a fixed section.

Neither the menu button or the close button even show.

This is how it displays on my builder and the way I want it to be: https://imgur.com/a/SwA665N

Yet it displays differently on mobile when published: https://imgur.com/a/jXQzvo0

Theme Hello Elementor

Thank you for your help

I got issue with logo in mobile offcanvas menu…. Somehow even when the proper logo is set on WordPress Customize section, in my mobile menu i have “Web Agnecy” svg logo instead. What is weird the attribute src of <img> tag have url from creativethemes.com, not of my site.

Why is that? How can I change this logo?

I was wondering if there was a way to set a different logo – than the one on the main header – on the offcanvas menu which automatically shows the main header one and only gives the one option to show it or hide it.

Another way would be to set any additional element on top of the menu links. Would anyone happen to know how to do that?

I would really appreciate your help. Thank you!

Are you able to provide a code which will close my menu when clicked so this error won’t occur on any screen size.

Thanks!

what is wrong with my code?

<header id="masthead" class="site-header sticky-top" role="banner">
	<nav class="navbar navbar-expand-lg navbar-dark bg-dark">
    <div class="container-xl">
      <a class="navbar-brand" href="#">Logo</a>
      <button class="navbar-toggler" type="button" data-bs-toggle="offcanvas" data-bs-target="#primaryNav" aria-controls="primaryNav" aria-expanded="false" aria-label="Toggle navigation">
        <span class="navbar-toggler-icon"></span>
      </button>

	  <div class="offcanvas offcanvas-start" tabindex="-1" id="primaryNav" aria-labelledby="primaryNavLabel">
		 <div class="offcanvas-header">
			<a class="navbar-brand offcanvas-title" id="primaryNavLabel" href="#">Logo</a>
			<button type="button" class="btn-close text-reset" data-bs-dismiss="offcanvas" aria-label="Close"></button>
		</div><!--offcanvas-header-->
		  

							<?php
			wp_nav_menu( array(
				'theme_location'    => 'primary',
				'depth'             => 2,
				'container'         => 'div',
				'container_class'   => 'offcanvas-body',
				'container_id'      => false,
				'menu_class'        => 'navbar-nav ms-auto mb-2 mb-lg-0 py-lg-3',
				'fallback_cb'       => 'WP_Bootstrap_Navwalker::fallback',
				'walker'            => new WP_Bootstrap_Navwalker(),
			) );
			?>
			 
        <?php get_search_form(); ?>   
      </div>
    </div>
  </nav>

I have built an off canvas menu using the popup template and set it to be triggered through a button.

However, I have a CSS to hide overflow-x on my site, so the popup will show all the way at the end of the page (below the footer)

Any ideas on how to fix this?

Thanks

I am an Issue on Mobile Devices, The Woo-commerce Product Filters are present after the products,
1) Is there any way to make it above the products
2) Also, Is there any way to make it OFF-CANVAS Way like how menu bar are showed ?