Adding Custom Shortcode Widget To Main Navigation

  • Resolved Andrew1977

    (@andrew1977)


    3 years, 5 months ago

    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.
    • This topic was modified 3 years, 5 months ago by Andrew1977.
    • This topic was modified 3 years, 5 months ago by Andrew1977.
Viewing 5 replies - 1 through 5 (of 5 total)
  • fernandoazarcon2

    (@fernandoazarcon2)

    3 years, 5 months ago

    Hi @andrew1977,

    You can add a conditional statement to check if the device used is a mobile device.

    Example:

    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

    (@andrew1977)

    3 years, 5 months ago

    Thanks @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.
    ying

    (@yingscarlett)

    3 years, 5 months ago

    There’s an error in your code, try this:

    https://pastebin.com/uFs0HBKr

    Thread Starter Andrew1977

    (@andrew1977)

    3 years, 5 months ago

    Thanks @yingscarlett

    That works!

    Appreciate all your time and help on this!

    Kind Regards,

    Andrew

    ying

    (@yingscarlett)

    3 years, 4 months ago

    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.