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.

Type: Discussion
Status: Resolved
View Replies:
pilipala replied on at Permalink Reply
pilipala
Hi

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

<div id="navbar" class="navbar-collapse collapse">

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
dgreer replied on at Permalink Reply
Thank you. I will give this a try.
pilipala replied on at Permalink Reply
pilipala
You're welcome :)

Jennifer

concrete5 Environment Information

Currently playing with Salix on my development server -- windows system. Will most to WebHostingHub apache enviorment for my live site -- hikingwalking.com

Browser User-Agent String

Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/63.0.3239.84 Safari/537.36

Hide Post Content

This will replace the post content with the message: "Content has been removed by an Administrator"

Hide Content

Request Refund

You may not request a refund that is not currently owned by you.