customize search field in primary navigation

Hi there,

You can add a search field to the navigation by adding a new "Hook" element in "Appearance > Elements".

In the hook content field, add this:

<?php get_search_form(); ?>

In the hook settings, set it to the inside_navigation hook, and execute PHP: http://prntscr.com/l6i2nw

Then add this CSS:

.inside-navigation .search-form {
    float: right;
    line-height: 60px; /* height of your navigation */
}

Let me know if you need more info :)

Hi Tom,

Yes, it works :-)!! I tried to work a bit more on the looks, but I can't get done what I want....
- The word 'zoeken' (search) appears two times: in the search field and again right from the search field. How can I get rid of the second one? Or is it possible to change it to a looking glass, as at https://www.xanderuitgevers.nl.
- How can I reduce the padding of the search field?
- Is it possible to line the text in the search field with the menu items?
- I would like to hide the search form on mobile, because it doesn't look nice there...

Sorry for so many questions...

Thanks again,
Eva

Any chance you can link me to what it is right now? I can't find your GP site within the link you shared in your private field.

I am sorry Tom, the link had expired but now it's active again. Hope you will have time to take another look.
Thank you!!

That link is taking me to a page with 4 book covers. Each book cover takes me to the site you used as an example - not the GP site.

Let me know :)

That's weird, because I send it to my client and it worked... I activated the link again, and I will send it to you via the contact page. Hope that works out :-)
Sorry!!
Eva

No worries! Have you already sent the details? I'm not seeing them.

Let me know :)

Sorry Tom, Iwas out. Just send you the link. Hope it works.

So to change the search submit to a search icon, you'd need to replace:

<?php get_search_form(); ?>

With this:

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

Then add this CSS:

.main-navigation .search-submit {
    font-family: GeneratePress;
}

Then for your other questions, try this CSS:

.main-navigation input[type=search] {
    padding: 5px 10px;
}

.main-navigation .search-form {
    position: relative;
    top: -10px;
}

@media (max-width: 768px) {
    .main-navigation .search-form {
        display: none;
    }
}

Thank you so much Tom! It works fine now.
Best theme, best support!!

Glad I could help :)