Home › Forums › WoodMart support forum › Add logo to mobile off-canvas
Add logo to mobile off-canvas
- This topic has 16 replies, 2 voices, and was last updated 2 years, 5 months ago by Artem Temos.
-
AuthorPosts
-
November 23, 2021 at 3:39 pm #334045
blissguyParticipantHello, 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
November 24, 2021 at 7:10 am #334149
Artem TemosKeymasterHi,
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
November 24, 2021 at 8:30 pm #334345
blissguyParticipantI got the error below
The snippet has been deactivated due to an error on line 2: Cannot redeclare function woodmart_mobile_menu.
November 25, 2021 at 7:07 am #334409
Artem TemosKeymasterYou need to add it to the
functions.php
file in the child theme, not the parent theme.November 25, 2021 at 11:21 am #334474
blissguyParticipantI 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.
November 25, 2021 at 1:03 pm #334546
Artem TemosKeymasterYou 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
November 25, 2021 at 7:20 pm #334636
blissguyParticipantI 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% }
November 25, 2021 at 8:30 pm #334652
blissguyParticipantI 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; }
November 26, 2021 at 7:10 am #334735
Artem TemosKeymasterYou 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>';
November 26, 2021 at 7:55 am #334749
blissguyParticipantThis 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?
November 26, 2021 at 8:04 am #334753
Artem TemosKeymasterCould you please send us a screenshot?
November 26, 2021 at 8:14 am #334764
blissguyParticipantPlease 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.November 26, 2021 at 9:23 am #334778
Artem TemosKeymasterPlease, send us your admin access because we can’t see your website now.
November 26, 2021 at 9:43 am #334787
blissguyParticipantI 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); }
November 26, 2021 at 9:59 am #334792
Artem TemosKeymasterTry to add this rule to your logo wrapper
z-index: 200;
November 26, 2021 at 10:01 am #334793
blissguyParticipantAwesome. this did the magic. Thanks so much
November 26, 2021 at 10:01 am #334796
Artem TemosKeymasterYou are welcome! Feel free to contact us if you have any further questions.
-
AuthorPosts
The topic ‘Add logo to mobile off-canvas’ is closed to new replies.
- You must be logged in to create new topics. Login / Register