Skip to content
Public Ticket #21002

Search bar header

Conversation thread

PenciDesign Supporter replied

Staff Reply

Hi,

Please consider using the Header Builder, this feature will fit your requestion.


Regards,
PenciDesign.


tim-nieuwpoort replied

Customer Reply

Hi,

Can you then add the feature in the next update? It would be very helpfull.

PenciDesign Supporter replied

Staff Reply

Hi,

There are no ways to do that, you need to use a child theme and then add the custom code to it.

Regards,
PenciDesign.


tim-nieuwpoort replied

Customer Reply

Hi,

We don't have a child theme. Is there no other way to place a search field in the penci slider? 

Seems such a small effort and think other users also want the option.

Or, can it be add in the next theme update?

PenciDesign Supporter replied

Staff Reply

Hi,

If you want to keep all the current customize code after updating the theme, you need to use a child theme.

Regards,
PenciDesign.


tim-nieuwpoort replied

Customer Reply

Hi, 

I did al the things as you said, but the search bar is still not at the bottom in the header image (see attachment 1). Now it's above. And we'd like it as shown in the previous attachment.

This is what I did:

1. Go to Appearance → Widgets: drag & drop the search form to the Header Signup Form widget area,

2. Deleted the newsletter sign-up form

2. Go to Appearance → Customize → Custom CSS then add the following custom CSS code:

.penci-header-signup-form {
    background-color: transparent !important;
}

3. Go to Appearance → Customize → Logo & Header → Header Signup Form: turn off the "Move Header Sign-Up Form To Below Featured Slider" option.

Can you please help us with this? Their must be an easy way to show it at the bottom of the header image (in the image itself).

PenciDesign Supporter replied

Staff Reply

Hi,

Please go to Appearance → Customize → Logo & Header → Header Signup Form: turn off the "Move Header Sign-Up Form To Below Featured Slider" option.

Regards,

PenciDesign.


tim-nieuwpoort replied

Customer Reply

Will it be shown in the header penci slider, what we want?

PenciDesign Supporter replied

Staff Reply

Hi,

Yes. The search bar will work properly.

Regards,
PenciDesign.


tim-nieuwpoort replied

Customer Reply

Hi,

Well, ofcourse we use the newsletter sign-up form. But when I move it to another position, will the search bar be shown in the header image (see previous attachment) when I use your CSS?

.penci-header-signup-form {
    background-color: transparent !important;
}

PenciDesign Supporter replied

Staff Reply

Hi,

In case you don't use the newsletter sign-up form, you can move the search form below the header menu.

Regards,
PenciDesign.


tim-nieuwpoort replied

Customer Reply

Hi, 

Ok, I understand that a header like  https://www.francescakookt.nl is a lot of work.

So let's choose for the easiest way, we just want a search form at the bottom of the header image. See attachment.

There must be an easy solution for it right? For example, when I don't use the newsletter sign up, is it then possible?

Hope you can help us.

PenciDesign Supporter replied

Staff Reply

Hi,

1. Please publish your site or send me a custom header you've created. I need to check it on the live site,

2. If you want to make the header like https://www.francescakookt.nl, you need to customize a lot of CSS code and change some HTML structures of the default header.

Regards,
PenciDesign.


tim-nieuwpoort replied

Customer Reply

Hi,

The strange thing is that when I follow your steps, and then preview, my menu turned into a mega menu (while we don't have that at the moment) and our logo is very small.

At the moment this is our header https://smaakmenutie.nl and we'd like to have something like this: https://www.francescakookt.nl

Is it possible that you make for us a something more extensive instruction video?

PenciDesign Supporter replied

Staff Reply

Hi,

1. The CSS code can't work in this case,

2. Yes. All the slider and page elements will be kept. Only the header elements will be changed.

Regards,
PenciDesign.


tim-nieuwpoort replied

Customer Reply

Ok, so you can't make custom CSS for us that shows the signup form in the header image?

When I'll follow these steps, will the header show my Penci Slider image that I use at the moment?

PenciDesign Supporter replied

Staff Reply

Hi,

Yes. Because your site currently inserts the signup form in this area, you can't use it to display the search form below the header.

Regards,
PenciDesign.


tim-nieuwpoort replied

Customer Reply

Hi,

But you said in this comment that it's the easiest way to insert the search form without using the Penci Header Builder. So these steps won't work?

1. Go to Appearance → Widgets: drag & drop the search form to the Header Signup Form widget area,

2. Please go to Appearance → Customize → Custom CSS then add the following custom CSS code:

PenciDesign Supporter replied

Staff Reply

Hi,

1. About this case, please follow the instruction I've sent in this reply, you only need to drag & drop the header elements, and assign the menu. All the analytics and custom code on Customizer settings still apply to the custom header.

2. OR you can send me the WordPress admin account, I'll modify the template file for your site.

Regards,
PenciDesign.


tim-nieuwpoort replied

Customer Reply

Hi,

You can check it :)

PenciDesign Supporter replied

Staff Reply

Hi,

Please keep all the settings, I need to check your settings and then help you config it correctly.

Regards,
PenciDesign.


tim-nieuwpoort replied

Customer Reply

Hi,

I did, but it didn't appear at the header image..

PenciDesign Supporter replied

Staff Reply

Hi,

Please follow the instruction I've sent in the previous reply, this will make a search form display like your screenshot.

Regards,
PenciDesign.


tim-nieuwpoort replied

Customer Reply

Hi,

Thanks, but I want the search field on the header image (see attachment).

PenciDesign Supporter replied

Staff Reply

Hi,

Here is the easiest way to insert the search form without using the Penci Header Builder:

1. Go to Appearance → Widgets: drag & drop the search form to the Header Signup Form widget area,

2. Please go to Appearance → Customize → Custom CSS then add the following custom CSS code:

.penci-header-signup-form {
    background-color: transparent !important;
}

Regards,
PenciDesign.



tim-nieuwpoort replied

Customer Reply

Ok, thanks for your efforts.

  • Do I have to place the menu by myself? I already have a menu (as you can see here https://smaakmenutie.nl)
  • Where can I choose a header image? At the moment I use Penci Slider
  • And do I have to add my custom code (like Google Analytics) inside the head again? Or is it still in the 'Logo & Header -> general' part?

PenciDesign Supporter replied

Staff Reply

Hi,

You can view the video tutorial here:

Regards,
PenciDesign.


tim-nieuwpoort replied

Customer Reply

Hi,

Is it possible that you sent me a (small) video tutorial with the first steps, the rest of the adjustments I can do on my own. And for the next time I can do it by myself. It's just a header image with a search element.

tim-nieuwpoort replied

Customer Reply

Hi,

Can you please make some screenshots (or video) how to do it, because when I do, my menu and logo are gone.

This is our website https://smaakmenutie.nl

Thanks.

PenciDesign Supporter replied

Staff Reply

Hi,

Please edit your header with the Penci Header Builder, then drag & drop the Search form element to the BottomBlock Bar & modify it.

Regards,
PenciDesign.


tim-nieuwpoort replied

Customer Reply

Hi,

We'd like to have a header like the picture in the attachment.

The pre-built headers (import) in the 'header builder' are not what we are looking for. It just must be a simple header image + search bar, that's it. The menu can stay the same (https://prnt.sc/TBQcrd6NysKx).

Do you have any tips how to create a header like this?

Thanks!

PenciDesign Supporter replied

Staff Reply

Hi,

Please send me a screenshot and note a position you want to add the search bar. I'll check and send you a solution.

Regards,
PenciDesign.

tim-nieuwpoort started the conversation

Conversation Start

Hi,

Can I add a search bar in the header (for example in the penci slider).

It's not clear enough for my visitors where to find the current search. So they can easy search through all the posts (recipes).

Thanks.

Want to join this conversation or access attachments? Sign in first.