Tagged: , , , ,

Viewing 14 posts - 1 through 14 (of 14 total)
  • Author
    Posts
  • October 31, 2020 at 7:52 pm #1257313
    StrategyDriven

    Hello!

    Rather than having the search icon in the main menu, I would like to add a search box to the header socket (on the right side).

    Is this possible and, if so, how can it be done?

    Thank you!

    All the Best,
    Nathan

    November 1, 2020 at 12:15 am #1257348
    Jordan Shannon

    Hey StrategyDriven,

    Refer to the following:

    https://kriesi.at/support/topic/how-to-add-a-search-bar-in-the-top-header-area/#post-1179089

    Best regards,
    Jordan Shannon

    November 1, 2020 at 11:09 pm #1257477
    StrategyDriven

    Thank you Jordan! That worked to get a search into the top bar / header socket.

    I used the approach from the article to add the short code for the search and that worked well. However, I have two styling problems at this time. My goal was to provide a phone number to the far left followed by the search. As entered, the phone number appears above the search box. I found an article indicating how to add a ‘class’ to each element and a CSS Quick Code to get each element on the same horizontal line. However, adding the ‘class’ to the search element via the ‘developer’ option does not seem to help. I would greatly appreciate any help you can provide for me to get things all on one line.

    The other styling issue I’m having is reducing the height of the search box. I adjust the code to “custom_height=’20′” and get the perfect height. However, the label ‘Search’ in the button does not recenter (as does the label in the data entry text box). Any help you can provide me with this item is also greatly appreciated.

    Thank you again for all of your help and for getting me on the right path. Enjoy the day!

    All the Best,
    Nathan

    November 3, 2020 at 4:57 am #1257864
    Rikard

    Hi Nathan,

    Thanks for the update. Could you post a link to where we can see the results you are getting please?

    Best regards,
    Rikard

    November 8, 2020 at 12:35 am #1259083
    StrategyDriven

    Hi Rikard,

    The webpage where you can observe my challenge is: https://sidevelopment.wpengine.com/

    I forgot to mention that the Search text box is too narrow horizontally and needs to be wider.

    I greatly appreciate your continued help. Be safe, stay healthy, and enjoy the day!

    All the Best,
    Nathan

    November 9, 2020 at 7:08 pm #1259340
    Victoria

    Hi StrategyDriven,

    Here is the code you can put in Enfold > General Styling > Quick Css,  if it does not work, put into themes/enfold/css/custom.css

    
#top .avia_search_element #s {
    padding: 0 1em;
    height: 40px !important;
    line-height: 40px !important;
    min-width: 250px;
}

    If you need further assistance please let us know.

    Best regards,
    Victoria

    November 10, 2020 at 5:14 am #1259463
    StrategyDriven

    Hi Victoria,

    Thank you for your help. I may be doing something wrong. I do have an Enfold Child Theme loaded. I added the code to the Quick CSS and did not get a change in the result. I then went to the Appearance/Theme Editor and added the code to the Enfold Child: style.css file with no change. I then went to the Appearance/Theme/Enfold Child/Customize/Additional CSS and added the code here with no result.

    I made the changes in the manner above because of my use of the Enfold Child theme. I’m uncertain if this was the correct action to take and would greatly appreciate your guidance.

    Thank you again for your help. Be safe, stay healthy, and enjoy the day!

    All the Best,
    Nathan

    November 10, 2020 at 10:59 pm #1259686
    Victoria

    Hi Nathan,

    Can you give us temporary admin access to your website in the private content box below, so that we can have a closer look?

    Best regards,
    Victoria

    November 11, 2020 at 3:57 am #1259749
    StrategyDriven

    Hi Victoria,

    Thank you for the help. I’ve included login credentials in the Private Content area for your Administrator access.

    Please let me know if you need anything else. Be safe, stay healthy, and enjoy the day!

    All the Best,
    Nathan

    November 16, 2020 at 10:30 pm #1260797
    Victoria

    Hi StrategyDriven,

    Could you please clear the cache, check again and get back to us.

    Best regards,
    Victoria

    November 17, 2020 at 4:32 am #1260880
    StrategyDriven

    Hi Victoria,

    I cleared my cache and viewed the website and saw the same thing as before with the text and search box stacked one on top of the other vertically rather than being side by side horizontally which is our goal.

    I appreciate your continued help to resolve my issue.

    Be safe, stay healthy, and enjoy the day!

    All the Best,
    Nathan

    November 23, 2020 at 8:31 pm #1262469
    Victoria

    Hi StrategyDriven,

    Could you please attach a mockup of what you’re trying to achieve?

    Best regards,
    Victoria

    December 12, 2020 at 3:55 am #1266719
    StrategyDriven

    Hi Victoria,

    I’m sorry for the delayed response. Below is an image of what we are attempting to achieve with the placement of a Search box in the header socket.

    Enfold Theme header socket with Search box

    Thank you again for all of your help. Enjoy the day!

    All the Best,
    Nathan

    December 17, 2020 at 8:06 am #1268031
    Ismael

    Hi,

    Thank you for the screenshot.

    We can use the avia_meta_header hook to insert additional elements in the top header and the get_search_form function to render the search bar. Please add this snippet in the functions.php file.

    add_action('avia_meta_header', function() { 
	get_search_form();
}, 10);

add_filter('avf_execute_avia_meta_header', '__return_true');

    It might require a few css or style adjustments.

    Best regards,
    Ismael

  • Author
    Posts
Viewing 14 posts - 1 through 14 (of 14 total)
  • You must be logged in to reply to this topic.