[Resolved] customize search field in primary navigation

[Eva]

Hey Tom,

I am back again with another question 🙂
My client would like to see the primary navigation full width with a visible search field, like this: https://www.xanderuitgevers.nl/

I think I have managed to get the primary nav full width. Can you please tell me if it’s possible to adjust the search field? I have added the link in the field below.

Thanks!
Eva

PS. I need to make the logo full width too, but maybe I should open a new topic for that?

[Tom]

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 🙂

[Eva]

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

[Tom]

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.

[Eva]

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!!

[Tom]

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 🙂

[Eva]

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

[Tom]

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

Let me know 🙂

[Eva]

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

[Tom]

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;
    }
}

[Eva]

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

[Tom]

Glad I could help 🙂

[Author]

Posts