Viewing 6 posts - 1 through 6 (of 6 total)
  • Author
    Posts
  • November 15, 2020 at 5:59 pm #1260592
    coresensors

    Hello,

    I recently did some customization work on the search results page and I got it to where I like it. I have placed a link to the search results page in the private info.

    I added a search bar on the results page so people can re-search right on the page. I modified the search bar that I added by targeting #top #s and #top #searchsubmit. Everything worked fine but using those id’s had an unintended consequence. The search bar in the header, when clicking the magnifying glass, was also changed which I did not think about at the time. The search bar now does not fit inside the container and it overflows off the screen. This is due to the width of the search bar that I placed on the search results page.

    Is there a way to target the search bar that appears in the header when clicking the magnifying glass? I tried a few different techniques without much luck. Alternatively, is there a way to add a custom class to the search bar that I added to the results page? The get_search_form function in search.php is wrapped in a span class but I can’t seem to target like that.

    November 16, 2020 at 11:50 am #1260672
    Rikard

    Hey coresensors,

    Please try adding this class before the searchsubmit ID, for example:

    .search-header-section #searchsubmit {
  Your CSS goes here. 
}

    Best regards,
    Rikard

    November 16, 2020 at 8:29 pm #1260781
    coresensors

    Hi Rikard,

    Thank you for your speedy reply! This is a good start. However, it only fixes the search submit button in the main menu header. The width of the actual search box is still much wider than the container that is there.

    I tried adding the same class before the #s id (which is what I used to modify the overall width and height of the actual search box where you type the search term) but it did not seem to have an effect.

    November 17, 2020 at 11:29 am #1260939
    Rikard

    Hi,

    This CSS is applying to the search field in the header:

    #top #s {
    width: 600px;
    height: 50px;
    right: 50px;
}

    If you replace the top ID with main for example, then it should work after that.

    Best regards,
    Rikard

    November 17, 2020 at 6:34 pm #1261077
    coresensors

    You are awesome! I knew I was doing something wrong but I could not figure it out. Thank you! You guys rock.

    Everything looks great now.

    November 18, 2020 at 1:41 am #1261171
    Jordan Shannon

    Hi,

    I’m glad this was resolved. If you need additional help, please let us know here in the forums.

    Best regards,
    Jordan Shannon

  • Author
    Posts
Viewing 6 posts - 1 through 6 (of 6 total)
  • The topic ‘Adjusting the size of the search bar field when clicking magnifying glass’ is closed to new replies.