Black Friday sale! Get up to 25% off GP Premium! Learn more ➝

[Resolved] Show search icon only, not search bar (Full Amp Site)

Home Forums Support [Resolved] Show search icon only, not search bar (Full Amp Site)

Home Forums Support Show search icon only, not search bar (Full Amp Site)

Viewing 9 posts - 1 through 9 (of 9 total)
  • Author
  • #1575849

    Me again 🙂

    If I want to display only the little search icon rather than the whole bar, what would be the best way to do?

    Would using inserting it with a hook by using the block element work? In fact, now that I think about it, would it be worth getting rid of GP’s headers via the customizer entirely and using the block element for all of these?

    NB: Our site is fully AMP.

    Customer Support

    Hi there,

    AMP doesn’t support anything that requires Javascript, which our Navigation Search function requires. Would a simple switch to open and close the default WP search field suffice ?

    Header Elements currently have one advantage over the Block Element in that they can display dynamic content using the {{template tags}} without the need for shortcodes like would be required in todays Block element.


    Yeah, anything like that is fine… just so long as it is not the hideous search bar widget that WP thrusts on us.

    However, the reason I asked about the blocks is that the default WP search block in there looks miles better. I know you mentioned switching not needing short codes on the cards is in the works, but my needs for a menu/nav is super simple.

    Logo, navigation and search.

    Worth switching it all over into the block Element and then just getting rid of the shortcode once that functioanlity is available?

    Customer Support

    Can you share a link to your site so i can see the layout.
    Aah ok – do you mean using a Block element to replace the site header – to add your logo / nav / search ? If so – it wouldn’t at this time as there is no Navigation Block yet.


    Correct. Could I not generate a shortcode for the nav?

    You can see the site here.

    Or just use the nav as the header and use the Element block with the logo + search above it.

    Customer Support

    No easy way to output a Menu with a shortcode and we shouldn’t need to re-invent the wheel for this one. So we can try this:

    1. Create a new Hook element:

    2. Add this HTML to your Hook Element content:

    <form role="search" method="get" class="search-form" action="<?php echo home_url( '/' ); ?>">
            <span class="screen-reader-text">Search for:</span>
            <input type="search" class="search-field" placeholder="Search …" value="" name="s" title="Search for:" />
        <input type="submit" class="search-submit" value="Search" />

    3. In the Hook List select: generate_menu_bar_items
    4. Check the Execute PHP option.
    5. Set the Display Rules to the Entire Site

    Now we need some CSS:

    menu-bar-items {
        margin-left: 50px;
    .menu-bar-items .search-form {
        position: absolute;
        right: 0;
    .menu-bar-items .search-field {
        background-color: #ccc;
        background-image: url(URL_TO_YOUR_ICON/icon.png);
        background-position: 5px center;
        background-repeat: no-repeat;
        background-size: 24px 24px;
        border: none;
        cursor: pointer;
        height: 37px;
        margin: 3px 0;
        padding: 0 0 0 34px;
        position: relative;
        -webkit-transition: width 400ms ease, background 400ms ease;
        transition: width 400ms ease, background 400ms ease;
        width: 0;
    .menu-bar-items .search-field:focus {
        background-color: #fff;
        border: 2px solid #c3c0ab;
        cursor: text;
        outline: 0;
        width: 230px;
    .menu-bar-items .search-form .search-submit {
        display: none;

    In the CSS you will see this line:
    background-image: url(URL_TO_YOUR_ICON/icon.png);

    You will need to upload a JPEG,PNG or SVG image to your media attachments and replace the URL in that CSS.


    Thanks David. I’ll give that a whirl in the coming days.


    Finally got around to this and it works like a charm ^_^
    Thank you!

    Don’t suppose you know of any useful bits of PHP to help filter/improve the default WP search results?
    [happy to open a new topic if that’s a common q]

    Customer Support

    Glad to hear that.
    Create a new topic and let us know what sort of improvements you require and we’ll see what we can find.

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