Adding a search box to the header
Permalink Browser Info Environment
Hi-
First of all -- great theme. Just started playing with the theme on my development server and I love it!
I am trying to figure out the best way to add a search box to the header. What I want is a header that looks like the header in the Clonemental theme -- see: http://www.concrete5.org/marketplace/themes/cloneamental... -- i.e. the brand is to the left, the nav is centered and the search box is to the right. I understand how Cloneamental does this with columns. The Salix site uses CSS to float the nav to the right so I am not sure how to add the search box to the header under this scenario. Is there a version of the header with the package that includes the search? Otherwise, can I modify the header to use columns and not screw up keeping the headers situated at the top of the page at all time. (I know enough CSS to be dangerous.)
If not, could I please suggest that you consider adding option this in the future? I know I can create a separate page -- but that is not very user friendly.
Thanks again for creates such a great theme.
First of all -- great theme. Just started playing with the theme on my development server and I love it!
I am trying to figure out the best way to add a search box to the header. What I want is a header that looks like the header in the Clonemental theme -- see: http://www.concrete5.org/marketplace/themes/cloneamental... -- i.e. the brand is to the left, the nav is centered and the search box is to the right. I understand how Cloneamental does this with columns. The Salix site uses CSS to float the nav to the right so I am not sure how to add the search box to the header under this scenario. Is there a version of the header with the package that includes the search? Otherwise, can I modify the header to use columns and not screw up keeping the headers situated at the top of the page at all time. (I know enough CSS to be dangerous.)
If not, could I please suggest that you consider adding option this in the future? I know I can create a separate page -- but that is not very user friendly.
Thanks again for creates such a great theme.
| Type: | Discussion |
|---|---|
| Status: | Resolved |
I apologise for the delay in our response, for some reason your support ticket did not come through to our email.
Thank you for your kind comments and your suggestion. In our Salix theme we do not have the styles added for a menu search form. In our other themes, we have added other areas in the menu, but Salix uses a more compact menu. In our demo, we have put the search form in the footer, which is an option. You can add columns in using Bootstrap classes if you are going to edit the header.php. You can also use Bootstrap's classes to align the navigation menu items.
Example without editing header.php
You can just drag a search block to the editable area "Sitewide Header Nav". Then you need to click on the Search block you have just added and choose Design and Custom Template > Click on the cog icon and add navbar-right under custom class. Click save.
Example editing header.php
Add this code
<div class="navbar-right"> <?php $a = new GlobalArea('Nav Right'); $a->display(); ?> </div>Right after this line
Then upload your changes and add the search block to this area.
If you want to make columns in your header.php, you can use the Bootstrap grid system as described here:
https://getbootstrap.com/docs/3.3/css/#grid...
As long as the columns are within the <nav></nav> then you won't change the behaviour of the menu staying fixed to top of the page.
Thanks,
Jennifer