Archived topic
Move Search to Main Nav?
5 replies · Started by Michael on October 3, 2019
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?
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;
}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!
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;
}
}Beautiful. Thank you.
You're welcome
