Title: Adding Custom Shortcode Widget To Main Navigation
Last modified: January 22, 2023

---

# Adding Custom Shortcode Widget To Main Navigation

 *  Resolved [Andrew1977](https://wordpress.org/support/users/andrew1977/)
 * (@andrew1977)
 * [3 years, 5 months ago](https://wordpress.org/support/topic/adding-custom-shortcode-widget-to-main-navigation/)
 * Trying to place a custom shortcode widget to the main navigation area of our 
   website for mobile users only.
 * This shortcode widget has a live search feature for the website.
 * Using the code below adds this, but it also adds it to the desktop devices as
   well.
 * add_action( ‘generate_inside_navigation’,’tu_add_to_mobile_bar’ );
   function tu_add_to_mobile_bar(){?
   >    <div class=”search”>        <?php echo do_shortcode(“search widget shortcode”]’);?
   >    </div><?php}
 * How could the above code be adapted so that this only shows on mobile devices,
   without the need for hiding this on desktop devices with some CSS?
 * Also, we have disabled the built in navigation search in the primary navigation
   of this theme, which then moves the mobile menu to the middle of the screen on
   mobile devices.
 * The CSS below moves the menu button to the left on mobile devices:
 * button.menu-toggle {
 * text-align:left;
 * }
 * Trying to work out the best way to align our custom search widget to the right
   of the menu, so that it sits neatly across mobile devices?
 * Kind Regards,
 * Andrew
    -  This topic was modified 3 years, 5 months ago by [Andrew1977](https://wordpress.org/support/users/andrew1977/).
    -  This topic was modified 3 years, 5 months ago by [Andrew1977](https://wordpress.org/support/users/andrew1977/).
    -  This topic was modified 3 years, 5 months ago by [Andrew1977](https://wordpress.org/support/users/andrew1977/).

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

 *  [fernandoazarcon2](https://wordpress.org/support/users/fernandoazarcon2/)
 * (@fernandoazarcon2)
 * [3 years, 5 months ago](https://wordpress.org/support/topic/adding-custom-shortcode-widget-to-main-navigation/#post-16398739)
 * Hi [@andrew1977](https://wordpress.org/support/users/andrew1977/),
 * You can add a conditional statement to check if the device used is a mobile device.
 * Example:
 *     ```wp-block-code
       if(wp_is_mobile()){
       echo do_shortcode(“search widget shortcode”]’ );
       }
       ```
   
 * For the second issue, can you share the link to the site in question?
 *  Thread Starter [Andrew1977](https://wordpress.org/support/users/andrew1977/)
 * (@andrew1977)
 * [3 years, 5 months ago](https://wordpress.org/support/topic/adding-custom-shortcode-widget-to-main-navigation/#post-16400793)
 * Thanks [@fernandoazarcon2](https://wordpress.org/support/users/fernandoazarcon2/)
 * Can’t seem to get your code to work with our function.
 * Working on a development site with this at the moment.
 * Once we’ve got this ready, I’ll push to the live site for you to have a look 
   at.
 * In the meantime, would you be able to send through the function below with the
   conditional statement added. For some reason we can’t seem to get this to work.
 * add_action( ‘generate_inside_navigation’,’tu_add_to_mobile_bar’ );
   function tu_add_to_mobile_bar(){?
   >    <div class=”search”>        <?php echo do_shortcode(“search widget shortcode”]’);?
   >    </div><?php}
 * Kind Regards,
 * Andrew
    -  This reply was modified 3 years, 5 months ago by [Andrew1977](https://wordpress.org/support/users/andrew1977/).
 *  [ying](https://wordpress.org/support/users/yingscarlett/)
 * (@yingscarlett)
 * [3 years, 5 months ago](https://wordpress.org/support/topic/adding-custom-shortcode-widget-to-main-navigation/#post-16400948)
 * There’s an error in your code, try this:
 * [https://pastebin.com/uFs0HBKr](https://pastebin.com/uFs0HBKr)
 *  Thread Starter [Andrew1977](https://wordpress.org/support/users/andrew1977/)
 * (@andrew1977)
 * [3 years, 5 months ago](https://wordpress.org/support/topic/adding-custom-shortcode-widget-to-main-navigation/#post-16405137)
 * Thanks [@yingscarlett](https://wordpress.org/support/users/yingscarlett/)
 * That works!
 * Appreciate all your time and help on this!
 * Kind Regards,
 * Andrew
 *  [ying](https://wordpress.org/support/users/yingscarlett/)
 * (@yingscarlett)
 * [3 years, 4 months ago](https://wordpress.org/support/topic/adding-custom-shortcode-widget-to-main-navigation/#post-16405751)
 * No problem 🙂 Glad to help!

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

The topic ‘Adding Custom Shortcode Widget To Main Navigation’ is closed to new replies.

 * ![](https://i0.wp.com/themes.svn.wordpress.org/generatepress/3.6.1/screenshot.
   png)
 * GeneratePress
 * [Support Threads](https://wordpress.org/support/theme/generatepress/)
 * [Active Topics](https://wordpress.org/support/theme/generatepress/active/)
 * [Unresolved Topics](https://wordpress.org/support/theme/generatepress/unresolved/)
 * [Reviews](https://wordpress.org/support/theme/generatepress/reviews/)

 * 5 replies
 * 3 participants
 * Last reply from: [ying](https://wordpress.org/support/users/yingscarlett/)
 * Last activity: [3 years, 4 months ago](https://wordpress.org/support/topic/adding-custom-shortcode-widget-to-main-navigation/#post-16405751)
 * Status: resolved