[Support request] Search Bar Customization

Home Forums Support Search Bar Customization

Viewing 15 posts - 1 through 15 (of 17 total)
  • Author
    Posts
  • #858745
    David

    Hi Tom and Team,

    Is it possible to change the search bar to something like this? With the white arrow at the top? And text below the placeholder?

    (Also can you change the color of the font as it’s typed into the placeholder)?

    Please see pic for reference.

    Thank you!

    Pic of Search

    GeneratePress 2.2.2
    #858850
    Tom
    Lead Developer
    Lead Developer

    Hi there,

    This CSS will take you most of the way:

    .navigation-search.nav-search-active {
        top: 60px;
        width: 300px;
        left: auto;
        background: #fff;
        padding: 30px;
        box-shadow: 0 0 5px 5px rgba(0,0,0,0.05);
    }
    
    .navigation-search input[type="search"], 
    .navigation-search input[type="search"]:active, 
    .navigation-search input[type="search"]:focus {
        background: #efefef;
        height: auto;
        border-radius: 5px;
        border: 1px solid #ddd;
        color: #000;
    }
    
    .navigation-search.nav-search-active:after {
        content: "Your test content";
        margin-top: 10px;
        display: block;
        font-size: 13px;
        text-align: center;
    }
    
    .search-item.active:after {
        content: "";
        position: absolute;
        bottom: 0;
        left: calc(50% - 7px);
        width: 0; 
        height: 0; 
        border-left: 7px solid transparent;
        border-right: 7px solid transparent;
        border-bottom: 7px solid #fff;
        z-index: 100;
    }

    The arrow is harder simply because the search area isn’t aware of where the search icon is. Is your account the last item in your navigation?

    #858888
    David

    Hi Tom. Thanks for this!

    Regarding the arrow, yes, search is the last item on the right.

    #859634
    Tom
    Lead Developer
    Lead Developer

    Any chance you can link me to your site so I can see what it looks like so far?

    #859665
    David

    For sure. I added the link in the original message. The password to access it is “Orange991”

    #859675
    Tom
    Lead Developer
    Lead Developer

    That password doesn’t seem to be working. Can you double-check?

    #859719
    David

    Hi Tom. Still had cache enabled. Could you kindly try again?

    #859994
    Tom
    Lead Developer
    Lead Developer

    I actually thought of a way to add the arrow regardless of how the menu items are positioned. I’ve adjusted the CSS above 🙂

    #860430
    David

    That worked beautifully! One final question about it. I am trying to move the box over to the left so that the right side of it is parallel with the magnifying glass square. Here is what I added to accomplish it:

    .navigation-search.nav-search-active {
    position: absolute;
    top: 47px;
    width: 350px;
    left: auto;
    background: #fff;
    padding-top: 25px;
    padding-bottom: 15px;
    padding-right: 15px;
    padding-left: 15px;
    margin-right: 228px; ***What I added***
    box-shadow: 0 0 5px 5px rgba(0,0,0,0.05);
    }

    The problem with this is that it is in the right position on my laptop/resolution but on another (larger, more pixels), it is pushed too far to the left.

    Is there anyway to fix this? I toyed around with em and vw as well but got the same results.

    #860967
    Tom
    Lead Developer
    Lead Developer

    I’m not sure if this is possible (without javascript), unfortunately, as the search form isn’t aware of where the search item is.

    I’ll ping David to see if he has any ideas.

    #860973
    David
    Staff
    Customer Support

    Try this CSS:

    .navigation-search.nav-search-active {
        top: 47px;
        width: 350px;
        left: auto;
        background: #fff;
        padding-top: 25px;
        padding-bottom: 15px;
        padding-right: 15px;
        padding-left: 15px;
        box-shadow: 0 0 5px 5px rgba(0, 0, 0, 0.05);
        transform: translatex(100%);
        right: 50%;
    }
    #861026
    David

    Hey Tom and Dave,

    Thanks so much for trying to help me. The problem is, as the screen size (width) increases, the search box is pushed over more and more. I only have a 14′ and 15′ … I imagine on even larger monitors it’ll be pushed too far over and look odd.

    Does that make any sense?

    #861197
    David
    Staff
    Customer Support

    It looks great to me – this is on a 27″ monitor ( 90% of screen width):

    https://www.useloom.com/share/f5d2237f7b694208be8b2f80eb837b7b

    Maybe your browser cache needs clearing

    #879018
    David

    Confused here… this was working. Now it appears that it isn’t. Checked my style.css and all style seems to be intact. Any ideas?

    #879181
    David
    Staff
    Customer Support

    You have some broken CSS in your child theme style sheet:

    @media (max-width: 768px) {
    .main-navigation {
        border-bottom: 1px solid #E9E9E9;
    }

    This is missing the closing } for the media query.

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