Tagged: ,

Viewing 5 posts - 1 through 5 (of 5 total)
  • Author
    Posts
  • April 24, 2025 at 4:16 pm #1482197
    GWS

    Hi,
    I’m following up on a similar topic I started about the search widget: https://kriesi.at/support/topic/search-widget-no-longer-working-correctly-since-update-to-enfold-7/

    I couldn’t respond to the topic earlier, but I appreciate your help with the custom search box widget. The CSS you provided works perfectly for the custom search widget located below the layerslider on the homepage. However, it also affected the search icon on the navigation menu bar. Instead of displaying the default SVG image for the navbar search box, it’s showing the custom widget’s image. Moreover, the search icon is misaligned within the text box entry area. When I attempt to modify the CSS for the navbar search box, it inadvertently changes the search icon in the page content widget. While the custom search widget is in great shape now, we need to restore the default SVG image and its position for the navbar search widget.

    Could you guide me on restoring the SVG image to the navbar search box without it impacting the custom search widget in the homepage content area?

    April 28, 2025 at 5:47 am #1483267
    Ismael

    Hey GWS,

    Thank you for the inquiry.

    Did you add the following css code somewhere? The previous css code should not have affected the default search field because it was specific to the search form inside the #chsearchbox container.

    #top #searchsubmit, .ajax_load {
    width: 62px;
    height: 100%;
    line-height: 40px;
    position: absolute;
    right: auto;
    top: 0px;
    z-index: 2;
    min-width: 40px;
    left: 8%;
    padding: 0px;
    margin: 0px;
    border-radius: 0px;
    background: url("https://riseandshine.childrensnational.org/wp-content/uploads/2017/07/ch-search-icon.png") center center / contain no-repeat;
    background-position: center center;
}

    Best regards,
    Ismael

    April 28, 2025 at 4:25 pm #1483301
    GWS

    Yes, that CSS is there but whatever is changed on it affects both the navigation bar search box and the content custom search widget. Below is the CSS for the home page content custom search widget. Is anything is this customization affecting the navigation search box? It was working correctly for several years up until the latest version of Enfold. I don’t know what changed, but rolling back to previous versions of Enfold in a staging area corrects it.

    #chsearchbox {
    position: relative;
    background-color: transparent!important;
    margin-top: -15px;
    z-index: 55;
    border: none!important;
    }
    #search-3 #s {
    left: 35px;
    content: url(‘https://riseandshine.childrensnational.org/wp-content/uploads/2017/07/ch-search-icon.png’);
    width: 85%;
    margin: -32px auto !important;
    padding: 41px;
    border: none!important;
    box-shadow: 0px 5px 15px 0px #cccccc;
    }
    #search-3 .avia-font-entypo-fontello {
    background-image: url(https://riseandshine.childrensnational.org/wp-content/uploads/2017/07/ch-search-icon.png);
    background-repeat: no-repeat;
    background-position: 50% 50%;
    background-size: contain;
    background-color: transparent!important;
    width: 67px!important;
    }
    #search-3 #searchform #searchsubmit {
    _font-size: 2.5em; /*set the size of the magnifying icon*/
    font-size: 1.5em;
    color: transparent;
    }
    #search-3 input[type=”text”] {
    font-size: 30px; /*set the size of the search box input font*/
    }
    #search-3 .button {
    left: 95px;
    }
    #searchsubmit .avia-font-entypo-fontello {
    display: none!important;
    }

    April 28, 2025 at 11:06 pm #1483313
    Guenni007

    try :

    #top #searchform.av_disable_ajax_search  #searchsubmit {
  right: auto;
  left: 8%;
}

#top .cn-page-heading-container #searchform {
  background-color: #FFF;
}

#top .cn-page-heading-container #searchform > div {
  max-width: 320px;
  display: block;
  margin: 0 50px;
}

#top .cn-page-heading-container #searchform  #searchsubmit,
#top #avia-menu #searchsubmit,
#top #searchform #searchsubmit {
  right: 0px !important;
  left: auto;
}

    and have a look to your search page itself – if this is o.k. for you too!
    see : https://riseandshine.childrensnational.org/?s=web

    April 29, 2025 at 5:37 am #1483320
    Ismael

    Hi,

    Have you tried removing the css code? Keep the css rules with the #chsearchbox selector, or replace it with:

    #top #chsearchbox #searchsubmit, #chsearchbox .ajax_load {
    width: 62px;
    height: 100%;
    line-height: 40px;
    position: absolute;
    right: auto;
    top: 0px;
    z-index: 2;
    min-width: 40px;
    left: 8%;
    padding: 0px;
    margin: 0px;
    border-radius: 0px;
    background: url("https://riseandshine.childrensnational.org/wp-content/uploads/2017/07/ch-search-icon.png") center center / contain no-repeat;
    background-position: center center;
}

    Best regards,
    Ismael

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