Move Search to Main Nav?

[Michael]

I see lot’s of help articles on moving the search to the secondary nav, but I need to try and move the search form to the main nav so that it remains on the sticky nav:

Here’s what I’m attempting to do:
http://prntscr.com/pelgy7

Currently using the Ajax Search Pro plugin and am effectively replacing the generic WP search form with the Ajax Search Pro search form. The plugin also offers shortcode [wd_asp id=1]

I tried adding the shortcode using the functions.php file per another support article, but I kept getting a syntax error.

I have yet to try adding the search shortcode using the elements>hook method.

Can you point me in the right direction please?

[David]

Hi there,

If you use the Navigation as Header then add your shortcode to the inside_navigation hook.
https://docs.generatepress.com/article/hooks-element-overview/

To provide some control wrap the shortcode in a div container like so:

<div class="nav-search hide-on-mobile">
<!-- Shortcode in here -->
</div>

Then add this CSS:

.inside-navigation {
    align-items: center;
}

.nav-search {
    order: 10;
    margin-left: 20px;
}

Documentation: http://docs.generatepress.com/
Adding CSS: http://docs.generatepress.com/article/adding-css/

[Michael]

Thank you for that. I’m definitely getting closer!

Now I’d like to move it down to the same line as the nav and have it appear last: http://prntscr.com/pojtpc

Possible? Appreciate any assistance. Thank you!

[David]

Try adding this CSS:

@media (min-width: 769px) {
    .inside-navigation {
        display: -webkit-box;
        display: -webkit-flex;
        display: -moz-box;
        display: -ms-flexbox;
        display: flex;
        -webkit-box-align: center;
        -webkit-align-items: center;
           -moz-box-align: center;
            -ms-flex-align: center;
                align-items: center;;
    }
    .nav-search {
        -webkit-box-ordinal-group: 11;
        -webkit-order: 10;
           -moz-box-ordinal-group: 11;
            -ms-flex-order: 10;
                order: 10;
    }
}

Documentation: http://docs.generatepress.com/
Adding CSS: http://docs.generatepress.com/article/adding-css/

[Michael]

Beautiful. Thank you.

[David]

You’re welcome

Documentation: http://docs.generatepress.com/
Adding CSS: http://docs.generatepress.com/article/adding-css/

[Author]

Posts