Properly implementation
-
Hello there,
First of all, thank you for sharing with us this great plugin.
I have a theme with two toggle menu options standard and mobile with hover effect.Taking in consideration your solution, I have a few questions:
-Is there any possibility to modify the below header menu section, in order to obtain the off-canvas effect on the right side as alternative to the hover menu, using the existing theme toggle menu option (between off-side and standard menu), also using the existing burger menu button (when off-canvas is activated), leaving untouched the animation that make the existing mobile hover menu appear in the area?The original theme mobile menu section in header.php looks like this:
... <body <?php body_class($class); ?> data-url="<?php echo esc_url(home_url()); ?>" data-cart-count="<?php if($woocommerce) { echo $woocommerce->cart->cart_contents_count; } ?>" data-sharrreurl="<?php echo THB_THEME_ROOT; ?>/inc/sharrre.php"> <div id="wrapper" class="open"> <!-- Start Mobile Menu --> <nav id="mobile-menu"> <div class="menu-container custom_scroll"> <a href="#" class="panel-close"></a> <div class="menu-holder"> <?php if ($page_menu) { ?> <?php wp_nav_menu( array( 'menu' => $page_menu, 'depth' => 2, 'container' => false, 'menu_class' => 'mobile-menu sf-menu', 'walker' => new thb_mobileDropdown ) ); ?> <?php } else if(has_nav_menu('nav-menu')) { ?> <?php wp_nav_menu( array( 'theme_location' => 'nav-menu', 'depth' => 2, 'container' => false, 'menu_class' => 'mobile-menu sf-menu', 'walker' => new thb_mobileDropdown ) ); ?> <?php } else { ?> <ul class="mobile-menu"> <li><a href="<?php echo get_admin_url().'nav-menus.php'; ?>">Please assign a menu from Appearance -> Menus</a></li> </ul> <?php } ?> </div> <div class="menu-footer"> <?php echo do_shortcode($menu_footer); ?> <?php if (ot_get_option('menu_ls') == 'on') { do_action( 'thb_language_switcher' ); } ?> </div> </div> <div class="spacer"></div> </nav> <!-- End Mobile Menu --> <!-- Start Quick Cart --> <?php do_action( 'thb_side_cart' ); ?> <!-- End Quick Cart --> <!-- Start Loader --> <div class="preloader"></div> <!-- End Loader --> <!-- Start Header --> <header class="header row no-padding <?php echo $header_style; ?>" data-equal=">.columns" role="banner"> <div class="small-7 medium-4 columns logo<?php if ($header_style == 'style1') { ?> show-for-large-up<?php } ?>"> <?php if ($header_style == 'style2') { ?> <a class="logotext" href="<?php echo esc_url( home_url( '/' ) ); ?>" title="<?php echo esc_attr( get_bloginfo( 'name', 'display' ) ); ?>" rel="home"><?php bloginfo( 'name' ); ?> </a> <?php } ?> </div> <?php if ($header_style != 'style2') { ?> <div class="small-7 medium-4 columns logo"> <?php if ($header_style == 'style1') { ?> <a class="logotext" href="<?php echo esc_url( home_url( '/' ) ); ?>" title="<?php echo esc_attr( get_bloginfo( 'name', 'display' ) ); ?>" rel="home"><?php bloginfo( 'name' ); ?> </a> <?php } ?> </div> <?php } ?> <div class="small-5 <?php if ($header_style == 'style2') { echo 'medium-8'; } else { echo 'medium-4';} ?> columns menu-holder"> <?php $full_menu_true = ($menu_mobile_toggle_view == 'style2' && $header_style == 'style2');?> <?php if ($full_menu_true) { ?> <nav id="full-menu" role="navigation"> <?php if ($page_menu) { ?> <?php wp_nav_menu( array( 'menu' => $page_menu, 'depth' => 2, 'container' => false, 'menu_class' => 'full-menu', 'walker' => new thb_mobileDropdown ) ); ?> <?php } else if(has_nav_menu('nav-menu')) { ?> <?php wp_nav_menu( array( 'theme_location' => 'nav-menu', 'depth' => 2, 'container' => false, 'menu_class' => 'full-menu', 'walker' => new thb_mobileDropdown ) ); ?> <?php } else { ?> <ul class="full-menu"> <li><a href="<?php echo get_admin_url().'nav-menus.php'; ?>">Please assign a menu from Appearance -> Menus</a></li> </ul> <?php } ?> </nav> <?php } ?> <?php if ($header_search != 'off') { do_action( 'thb_quick_search' ); } ?> <?php if ($header_cart != 'off') { do_action( 'thb_quick_cart' ); } ?> <a href="#" data-target="open-menu" class="mobile-toggle<?php if (!$full_menu_true) { ?> always<?php } ?>"> <div> <span></span><span></span><span></span> </div> </a> </div> </header> <!-- End Header --> ...-Also interested to know, is there any possibility to modify the transition/animation effect from push side effect to reveal for example using custom animation css’s like we have here?
/* Effect 4: Slide along */ .st-effect-4.st-menu-open .st-pusher { -webkit-transform: translate3d(300px, 0, 0); transform: translate3d(300px, 0, 0); } .st-effect-4.st-menu { z-index: 1; -webkit-transform: translate3d(-50%, 0, 0); transform: translate3d(-50%, 0, 0); } .st-effect-4.st-menu-open .st-effect-4.st-menu { visibility: visible; -webkit-transition: -webkit-transform 0.5s; transition: transform 0.5s; -webkit-transform: translate3d(0, 0, 0); transform: translate3d(0, 0, 0); } .st-effect-4.st-menu::after { display: none; }Thank you,
- The topic ‘Properly implementation’ is closed to new replies.
