Viewing 10 posts - 1 through 10 (of 10 total)
  • Author
    Posts
  • March 14, 2024 at 5:51 pm #1437244
    khrntanya

    Hi, I’m having some trouble styling my search bar in the header.

    I would like the following it to look like the kriesi.at search bar but instead of a blue square for the square with the icon red. Also when I do search the title of the pages are in white – I need them to be in black so they are visable

    March 16, 2024 at 10:32 pm #1437387
    Mike

    Hey khrntanya,
    Thank you for your patience, try this CSS in your Enfold Theme Options ▸ General Styling ▸ Quick CSS field:

    .ajax_search_response h4,
.header_color .av_ajax_search_title {
	color: #d90f38;
}

    the expected results:
    Enfold_Support_5088.jpeg

    Best regards,
    Mike

    March 18, 2024 at 6:42 pm #1437509
    khrntanya

    Thank you

    I would like the following it to look like the kriesi.at search bar but instead of a blue square for the square with the icon red.

    March 18, 2024 at 6:57 pm #1437513
    Mike

    Hi,
    The screenshot link you posted is not working, but when I check your site all of the search bars that I see are red, please see the screenshot in the Private Content area.
    Try linking to the page with the blue one, or if you are still seeing blue try clearing your browser cache.

    Best regards,
    Mike

    March 18, 2024 at 10:29 pm #1437525
    khrntanya

    The search bar I was referring to was on the kriesi.at. That is how I would like the search bar styled on my website but would like the blue box with the icon red not blue. The inner box is missing a boarder as well.

    March 19, 2024 at 2:25 am #1437530
    Ismael

    Hi,

    Thank you for the screenshot.

    The background of the search box icon is already red. Did you figure out the settings? If you prefer to adjust it manually, please use this css code.

    div .header_color .button, .header_color #submit, .header_color input[type='submit'] {
    background-color: #d90f38;
    color: #ffffff;
    border-color: #b70d16;
}

    Best regards,
    Ismael

    March 19, 2024 at 4:41 pm #1437590
    khrntanya

    Thank you sir, I tried adding that but it did not work. I’m trying to change the color of the search box and the search box boarder.

    March 19, 2024 at 6:24 pm #1437633
    Mike

    Hi,
    When I check the box with the icon is already red like you are requesting:
    Enfold_Support_5105.jpeg
    this css will add the border and change the background color of the search field:

    #top .av_minimal_header .avia-search-tooltip input#s {
	background-color: #f8f8f8;
    border: 1px solid #e1e1e1;
}

    After applying the css, please clear your browser cache and check.

    Best regards,
    Mike

    March 19, 2024 at 6:34 pm #1437634
    khrntanya

    Thank you! Yes this is what I needed.

    March 19, 2024 at 6:41 pm #1437636
    Mike

    Hi,
    Glad we were able to help, if you have any further questions please create a new thread and we will gladly try to help you. Thank you for using Enfold.

    Best regards,
    Mike

  • Author
    Posts
Viewing 10 posts - 1 through 10 (of 10 total)
  • The topic ‘Serach Bar in Header Styling’ is closed to new replies.