Join the Soledad Facebook Users Group here
for Share, assistance, discussion, and Updates related to Soledad WordPress Theme.

If you can't create a new ticket - you can send us an email via our contact form and we will get back to you.

Okay
  Public Ticket #3041644
Search bar header
Closed

Comments

  •  1
    tim-nieuwpoort started the conversation

    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.

  •  2,610
    PenciDesign replied

    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.

  •  1
    tim-nieuwpoort replied
  •  2,610
    PenciDesign replied

    Hi,

    For this case, please build your page with the Elementor or build the custom header layout by following the document here: https://soledad.pencidesign.net/soledad-document/#header-footer-builder

    Regards,
    PenciDesign.


  •  1
    tim-nieuwpoort replied

    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!

  •  2,610
    PenciDesign replied

    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.


  •  1
    tim-nieuwpoort replied

    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 replied privately
  •  1
    tim-nieuwpoort replied

    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.

  •  2,610
    PenciDesign replied

    Hi,

    You can view the video tutorial here:

    Regards,
    PenciDesign.


  •  1
    tim-nieuwpoort replied

    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?
  •  2,610
    PenciDesign replied

    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.



  •  1
    tim-nieuwpoort replied

    Hi,

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

  •  2,610
    PenciDesign replied

    Hi,

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

    Regards,
    PenciDesign.


  •  1
    tim-nieuwpoort replied

    Hi,

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

  •  2,610
    PenciDesign replied

    Hi,

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

    Regards,
    PenciDesign.


  •  1
    tim-nieuwpoort replied

    Hi,

    You can check it :)

  •  2,610
    PenciDesign replied

    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.


  •  1
    tim-nieuwpoort replied

    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:

     

  •  2,610
    PenciDesign replied

    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.


  •  1
    tim-nieuwpoort replied

    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?

  •  2,610
    PenciDesign replied

    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.


  •  1
    tim-nieuwpoort replied

    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?

  •  2,610
    PenciDesign replied

    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.


  •  1
    tim-nieuwpoort replied

    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.

  •  2,610
    PenciDesign replied

    Hi,

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

    Regards,
    PenciDesign.


  •  1
    tim-nieuwpoort replied

    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;
    }


  •  2,610
    PenciDesign replied

    Hi,

    Yes. The search bar will work properly.

    Regards,
    PenciDesign.


  •  1
    tim-nieuwpoort replied

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

  •  2,610
    PenciDesign replied

    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.


  •  1
    tim-nieuwpoort replied

    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 replied privately
  •   tim-nieuwpoort replied privately
  •  2,610
    PenciDesign replied

    Hi,

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

    Regards,
    PenciDesign.


  •  1
    tim-nieuwpoort replied

    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?

  •  2,610
    PenciDesign replied

    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.


  •  1
    tim-nieuwpoort replied

    Hi,

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

  •  2,610
    PenciDesign replied

    Hi,

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



    Regards,
    PenciDesign.