Home Forums WoodMart – Premium Template Add logo to mobile off-canvas

This topic contains 16 replies, has 2 voices, and was last updated by Artem Temos Artem Temos 6 days, 3 hours ago.

Viewing 17 posts - 1 through 17 (of 17 total)
  • Author
    Posts
  • #334045

    blissguy
    Customer

    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

    #334149

    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

    #334345

    blissguy
    Customer

    I got the error below

    The snippet has been deactivated due to an error on line 2:
    
    Cannot redeclare function woodmart_mobile_menu.
    #334409

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

    #334474

    blissguy
    Customer

    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.

    Private Content Hidden
    #334546

    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

    #334636

    blissguy
    Customer

    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%
    }
    #334652

    blissguy
    Customer

    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;
    }
    • This reply was modified 6 days, 17 hours ago by  blissguy.
    #334735

    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>';

    #334749

    blissguy
    Customer

    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?

    #334753

    Could you please send us a screenshot?

    #334764

    blissguy
    Customer

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

    • This reply was modified 6 days, 5 hours ago by  blissguy.
    • This reply was modified 6 days, 5 hours ago by  blissguy.
    Attachments:
    You must be logged in to view attached files.
    #334778

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

    #334787

    blissguy
    Customer

    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);
    }
    Private Content Hidden
    • This reply was modified 6 days, 4 hours ago by  blissguy.
    #334792

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

    #334793

    blissguy
    Customer

    Awesome. this did the magic. Thanks so much

    #334796

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

Viewing 17 posts - 1 through 17 (of 17 total)

The topic ‘Add logo to mobile off-canvas’ is closed to new replies.