[Resolved] customize search field in primary navigation

Home Forums Support [Resolved] customize search field in primary navigation

Home Forums Support customize search field in primary navigation

Viewing 12 posts - 1 through 12 (of 12 total)
  • Author
    Posts
  • #701527
    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?

    GeneratePress 2.1.4
    GP Premium 1.7.2
    #701742
    Tom
    Lead Developer
    Lead Developer

    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 πŸ™‚

    #702322
    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

    #702700
    Tom
    Lead Developer
    Lead Developer

    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.

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

    #703744
    Tom
    Lead Developer
    Lead Developer

    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 πŸ™‚

    #704270
    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

    #704355
    Tom
    Lead Developer
    Lead Developer

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

    Let me know πŸ™‚

    #704624
    Eva

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

    #704690
    Tom
    Lead Developer
    Lead Developer

    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;
        }
    }
    #704972
    Eva

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

    #705343
    Tom
    Lead Developer
    Lead Developer
Viewing 12 posts - 1 through 12 (of 12 total)
  • You must be logged in to reply to this topic.