[Resolved] Custom Search in Header

Home Forums Support Custom Search in Header

Viewing 15 posts - 1 through 15 (of 20 total)
  • Author
    Posts
  • #1026649
    Carol

    I love this theme~! I’ve been looking for something like this for a while.

    Question: Can you please explain why using a CSS plugin isn’t good to do along side GP?

    Does it make the GP run slower or something?

    I’m new to all this, so really want to know.

    In header, I’d love to have my logo to the left, nav. menu in the middle, and custom search field to the right in header.

    I can build this, (except for blue icon), with the CSS plugin I have, but not in the header where I want it – just in sidebar or elsewhere.

    Hate to bug you guys, but truly wondering if I should just delete my CSS plugin or if it’s okay to use.

    Thanks for all the help.

    Fantastic theme and exceptional support!

    Carol

    X80Ws+031v45

    #1026846
    David
    Staff
    Customer Support

    Hi there,

    Some people have great experiences with them, others do not.
    My concern is the plugin adds extra code in order to add the CSS. Which is a bit overkill if you’re only looking to make a few styling changes.

    If you want we’re more then happy to provide some CSS to create the style you’re looking for.

    #1026869
    Carol

    Thanks for the reply.

    Would it be difficult to put that search above to the right of the nav menu?

    If not, no worries.

    Thank you.

    #1026875
    David
    Staff
    Customer Support

    You could add the search widget to the Customizer > Widgets > Header Widget.

    #1027021
    Carol

    That’s a great idea.

    I did that.

    Now, how to get the nav. menu center on header?

    Thank you so much!

    #1027044
    David
    Staff
    Customer Support

    Add this CSS:

    .inside-header {
        display: grid;
        grid-template-columns: auto auto;
        justify-items: end;
    }
    
    .site-logo {
        justify-self: start;
    }

    Then try this CSS for styling the search widget – adding the search icon isn’t really possible with the standard WP search widget:

    .search-form {
        display: flex;
    }
    
    .search-form>* {
        border-radius: 50px;
    }
    
    .header-widget {
        border-radius: 50px;
        background-color: #eee;
        padding: 5px;
    }
    
    .nav-float-right .header-widget .widget {
        padding-bottom: 0;
    }
    
    .search-form input.search-field {
        border: none;
        background-color: transparent;
        color: #000;
    }
    .search-form input[type=submit], input[type=search] {
        padding: 2px 15px; 
    }
    #1027087
    Carol

    Thanks.

    “Unknown property” in code.

    1) How to put Nav. menu center on same line as logo?

    2) Search style change

    – When entering text in search, text is white – needs to be black.

    – Height of search needs to be much less, maybe 60% of what’s there.

    – Don’t want search gold button or any image unless a little icon.

    – Can you add a magnifying glass?

    Thank you very much.

    #1027103
    David
    Staff
    Customer Support

    You can ignore those two warnings in the additional CSS – WordPress uses an old CSS lint which doesn’t do CSS Grid properties.

    I adjusted the CSS above to make those changes. The button uses the Customizer > Colors > Buttons settings.

    Adding an icon is not possible with the standard WP search widget unfortunately.

    #1027125
    Carol

    Okay, will ignore that message. Thank you!

    Still would like to…

    1) Don’t want any search button at all.

    2) Search field not as wide – decrease by about 1/4 (more like image example).

    3) Drop shadow and blur like image sample of blue search?

    3) ** Nav. menu still isn’t centered – it’s broken to the next line.

    Thank you so much.

    #1027153
    David
    Staff
    Customer Support

    I edited the CSS above to remove the button.
    The Nav looks ok to me – its inline with the logo ?

    #1027155
    Carol

    Thanks.

    I was editing my message above as you were posting. 😉

    This is my view:

    https://lowcarbhealthyfatlife.com/nav-next-line/

    Nav. menu still on second line…

    I know this is nitpicky, but can the Search word have no elipses? lol

    Thank you so much!!!

    I can wait on this…no hurry at all.

    #1027241
    David
    Staff
    Customer Support

    So do you want the logo – nav – search all in the inline ?

    #1027258
    Carol

    Yes.

    logo left, nav. menu center, search on the right.

    Thanks.

    #1027455
    David
    Staff
    Customer Support

    Ok totally misread that 🙂
    So replace the first part of the CSS with this:

    .inside-header {
        display: flex;
        align-items: center;
    }
    .header-widget {
        order: 5;
        top: unset !important;
    }
    
    .main-navigation {
        margin-left: auto;
        margin-right: auto;
    }

    To reduce the width of the search field try this:

    .widget .search-field {
        max-width: 15ch;
    }

    CH unit is characters so that would be 15 text characters wide.

    Box shadow will need to be applied to the header-widget eg.

    .header-widget {
        box-shadow: 0 2px 10px  3px rbga(0,0,0,0.5);
    }
    #1027507
    Carol

    David! My nav. menu is center on same line with logo! Yay!! 🙂 Thank you!

    * I don’t know where to put that code for “header widget”…I don’t think I have a header widget.

    This is my view:

    Could we tweak search a bit when you’re not too busy?

    1) Search field thinner – lessen height (like blue example pic)

    2) Remove elipses

    3) Font size of “Search” smaller, maybe by 2pt, and bold

    4) Background of search field white w/ drop shadow and blur/spread to mimic sample image. Color of blur is: #CDE1F2 (So technically, there’s no border, but the border will be the shadow/blur because the bg is white.)

    No hurry at all. Thank you very much!!!

    Carol

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