Title: ShiftNav properly implementation
Last modified: August 24, 2016

---

# ShiftNav properly implementation

 *  Resolved [WPuser_78](https://wordpress.org/support/users/wpuser_78/)
 * (@wpuser_78)
 * [10 years, 10 months ago](https://wordpress.org/support/topic/shiftnav-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](http://goo.gl/TgJ8Ui) 
   and [mobile with hover](http://goo.gl/fSwqEJ) effect.
 * Taking in consideration your solution, I have a few questions:
    -Is there any
   possibility to modify the `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)?
 * 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](http://goo.gl/iopZlJ)?
 *     ```
       /* 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,
 * [https://wordpress.org/plugins/shiftnav-responsive-mobile-menu/](https://wordpress.org/plugins/shiftnav-responsive-mobile-menu/)

Viewing 2 replies - 1 through 2 (of 2 total)

 *  Plugin Author [sevenspark](https://wordpress.org/support/users/sevenspark/)
 * (@sevenspark)
 * [10 years, 10 months ago](https://wordpress.org/support/topic/shiftnav-properly-implementation/#post-6160433)
 * I believe we discussed and addressed this via a ShiftNav Pro support ticket, 
   but correct me if I’m wrong 🙂
 *  Thread Starter [WPuser_78](https://wordpress.org/support/users/wpuser_78/)
 * (@wpuser_78)
 * [10 years, 10 months ago](https://wordpress.org/support/topic/shiftnav-properly-implementation/#post-6160436)
 * Sure, You’re right. Honestly, I left the ShiftNav for a few while, in order to
   solve other problems but I’ll come back to the implementation/tweak process.
   
   Thank you for your support.

Viewing 2 replies - 1 through 2 (of 2 total)

The topic ‘ShiftNav properly implementation’ is closed to new replies.

 * ![](https://ps.w.org/shiftnav-responsive-mobile-menu/assets/icon-256x256.jpg?
   rev=2247219)
 * [ShiftNav - Responsive Mobile Menu](https://wordpress.org/plugins/shiftnav-responsive-mobile-menu/)
 * [Frequently Asked Questions](https://wordpress.org/plugins/shiftnav-responsive-mobile-menu/#faq)
 * [Support Threads](https://wordpress.org/support/plugin/shiftnav-responsive-mobile-menu/)
 * [Active Topics](https://wordpress.org/support/plugin/shiftnav-responsive-mobile-menu/active/)
 * [Unresolved Topics](https://wordpress.org/support/plugin/shiftnav-responsive-mobile-menu/unresolved/)
 * [Reviews](https://wordpress.org/support/plugin/shiftnav-responsive-mobile-menu/reviews/)

## Tags

 * [shiftnav](https://wordpress.org/support/topic-tag/shiftnav/)

 * 2 replies
 * 2 participants
 * Last reply from: [WPuser_78](https://wordpress.org/support/users/wpuser_78/)
 * Last activity: [10 years, 10 months ago](https://wordpress.org/support/topic/shiftnav-properly-implementation/#post-6160436)
 * Status: resolved