Add logo to mobile off-canvas

Hello, per my enquiry before buying theme, please assist me add the logo in the mobile off canvas above the search area. Thanks

https://www.awesomescreenshot.com/image/17261260?key=506d100724f6bf54d988b1f30735305f

Hi,

Thank you for using our theme and contacting us!

Try to add the following PHP code snippet to the child theme functions.php file to do this and replace the image URL with your own https://prnt.sc/20qto5i

function woodmart_mobile_menu() {

	$menu_locations = get_nav_menu_locations();

	$location = apply_filters( 'woodmart_main_menu_location', 'main-menu' );

	$menu_link = get_admin_url( null, 'nav-menus.php' );

	$search_args = array();
	$nav_classes = '';
	$tab_classes = '';
	$settings = whb_get_settings();

	$toolbar_fields = woodmart_get_opt( 'sticky_toolbar_fields' ) ? woodmart_get_opt( 'sticky_toolbar_fields' ) : array();

	if ( isset( $settings['search'] ) ) {
		$search_args['post_type'] = $settings['search']['post_type'];
		$search_args['ajax']      = $settings['search']['ajax'];
	}

	if ( isset( $settings['burger'] ) || in_array( 'mobile', $toolbar_fields ) || in_array( 'search_args', $toolbar_fields ) ) {
		$mobile_categories      = isset( $settings['burger']['categories_menu'] ) ? $settings['burger']['categories_menu'] : false;
		$search_form            = isset( $settings['burger']['search_form'] ) ? $settings['burger']['search_form'] : true;
		$position               = isset( $settings['burger']['position'] ) ? $settings['burger']['position'] : 'left';
		$mobile_categories_menu = ( $mobile_categories ) ? $settings['burger']['menu_id'] : '';
	} else {
		return '';
	}

	$nav_classes .= ' wd-' . $position;
	$nav_classes .= woodmart_get_old_classes( ' wd-' . $position );

	if ( 'light' === whb_get_dropdowns_color() ) {
		$nav_classes .= ' color-scheme-light';
	}

	$pages_active      = ' wd-active';
	$categories_active = '';

	if ( isset( $settings['burger']['tabs_swap'] ) && $settings['burger']['tabs_swap'] ) {
		$pages_active       = '';
		$categories_active .= ' wd-active';
		$tab_classes       .= ' wd-swap';
	}

	woodmart_enqueue_js_script( 'mobile-navigation' );

	echo '<div class="mobile-nav wd-side-hidden' . esc_attr( $nav_classes ) . '">';

	echo '<img src="YOUR_LOGO_URL" alt="logo">';

	if ( $search_form ) {
		woodmart_search_form( $search_args );
	}

	$tab_classes .= woodmart_get_old_classes( ' mobile-menu-tab mobile-nav-tabs' );

	if ( $mobile_categories ) {
		?>
			<ul class="wd-nav wd-nav-mob-tab wd-style-underline<?php echo esc_attr( $tab_classes ); ?>">
				<li class="mobile-tab-title mobile-pages-title <?php echo esc_attr( $pages_active ); ?>" data-menu="pages"><a href="#" rel="nofollow noopener"><span class="nav-link-text"><?php esc_html_e( 'Menu', 'woodmart' ); ?></span></a></li>
				<li class="mobile-tab-title mobile-categories-title <?php echo esc_attr( $categories_active ); ?>" data-menu="categories"><a href="#" rel="nofollow noopener"><span class="nav-link-text"><?php esc_html_e( 'Categories', 'woodmart' ); ?></span></a></li>
			</ul>
		<?php
		if ( ! empty( $mobile_categories_menu ) ) {
			wp_nav_menu(
				array(
					'container'  => '',
					'menu'       => $mobile_categories_menu,
					'menu_class' => 'mobile-categories-menu wd-nav wd-nav-mobile' . $categories_active . woodmart_get_old_classes( ' site-mobile-menu' ),
					'walker'     => new WOODMART_Mega_Menu_Walker(),
				)
			);
		} else {
			?>
				<div class="create-nav-msg"><?php esc_html_e( 'Set your categories menu in Theme Settings -> Header -> Menu -> Mobile menu (categories)', 'woodmart' ); ?></div>
			<?php
		}
	}

	if ( isset( $menu_locations['mobile-menu'] ) && $menu_locations['mobile-menu'] != 0 ) {
		$location = 'mobile-menu';
	}

	if ( has_nav_menu( $location ) ) {
		wp_nav_menu(
			array(
				'container'      => '',
				'theme_location' => $location,
				'menu_class'     => 'mobile-pages-menu wd-nav wd-nav-mobile' . $pages_active . woodmart_get_old_classes( ' site-mobile-menu' ),
				'walker'         => new WOODMART_Mega_Menu_Walker(),
			)
		);
	} else {
		?>
		<div class="create-nav-msg">
		<?php
			printf(
				wp_kses(
					__( 'Create your first <a href="%s"><strong>navigation menu here</strong></a>', 'woodmart' ),
					array(
						'a' => array(
							'href' => array(),
						),
					)
				),
				$menu_link
			);
		?>
		</div>
		<?php
	}
	?>

	<?php if ( is_active_sidebar( 'mobile-menu-widgets' ) ) : ?>
		<div class="widgetarea-mobile">
			<?php dynamic_sidebar( 'mobile-menu-widgets' ); ?>
		</div>
		<?php
	endif;

	echo '</div><!--END MOBILE-NAV-->';
}

add_action( 'woodmart_before_wp_footer', 'woodmart_mobile_menu', 130 );

Kind Regards

I got the error below

The snippet has been deactivated due to an error on line 2:

Cannot redeclare function woodmart_mobile_menu.

You need to add it to the functions.php file in the child theme, not the parent theme.

I was using code snippets plugin but i now added it to the child theme and it worked. i am trying to get the class of the newly added logo area so i can style it. I want to make it sticky while i scroll at the category menu.

You can add your CSS class to the image tag like this example my-custom-logo

echo '<img src="YOUR_LOGO_URL" alt="logo" class="my-custom-logo">';

Kind Regards

I added the class but then it seems the image is not wrapped as a div element so its not working the way it should be. I would like the image to be in a container/div just like the search product box so i can style it properly.

I have the css below for the image. Please watch the attached video to see how to applied to better understand what i mean. Thanks

https://www.awesomescreenshot.com/video/6168369?key=76ebea4c47aa5661eebd964c6d4775d3

.mobile-nav-logo {
  display: block;  
  margin-left: auto;  
  margin-right: auto;
  margin-bottom: 6px;
  position: sticky;
  top: 0;
  background-color: pink;
  max-width: 100%
}

I found a site which has the sticky kind of mobile nav i wanted so i wrote a little CSS to add my logo to it just to demonstrate what i want to achieve.

Video demo https://www.awesomescreenshot.com/video/6168894?key=957d21a31c5d11561c219299d55e581c

The website(mobile view) https://avantehs.com/c/air-filtration/1253

The CSS

.canvas__heading{
  background-color: whitesmoke;
  width: 100%;
}

/*alignment & height*/
.canvas__heading{
  text-align: center;
  min-height: 100px;
}

/*logo*/
.canvas__heading:before{
content: "";
  background-image:url(https://gigmedicals.com/wp-content/uploads/2021/10/logo@2x.png);
  background-size: 100% 75px;
  background-repeat: no-repeat;
  display: inline-block;

  /*size of the image*/
  height: 75px;
  width:125px;

  /*position & margins:*/
  position:relative;
  top:5px;
}

You can modify your logo HTML as you need and add any tag there. If you want to wrap it with div, use the following HTML for example

echo '<div class="logo-wrapper"><img src="YOUR_LOGO_URL" alt="logo" class="my-custom-logo"></div>';

This worked just as expected. One last thing, no matter what color i set as the div background color, it comes out transparent, Am I missing something?

Could you please send us a screenshot?

Please find it attached. I also noticed you could click a link behind the div. https://www.awesomescreenshot.com/video/6174544?key=c4c161e07b652d855a90f1b72531db28

Attachments:

You must be logged in to view attached files.

Please, send us your admin access because we can’t see your website now.

I have added the login.

PS: i haven’t added the css to the theme settings because am still working on it. Incase you need it, find it below

.mobile-nav-logo {
  display: block;  
  margin-left: auto;  
  margin-right: auto;
  margin-bottom: 1px;
}

.logo-wrapper {
  position: sticky; top: 0;
  padding-block: 5px;
  background-color: #f2f6fc;
  box-shadow: 0px 2px 4px rgba(34, 56, 101, 0.15);
}

Try to add this rule to your logo wrapper z-index: 200;

Awesome. this did the magic. Thanks so much

You are welcome! Feel free to contact us if you have any further questions.

[Author]

Posts