[Resolved] Placeholder text in nav not positioned correctly on iPhone

Home Forums Support [Resolved] Placeholder text in nav not positioned correctly on iPhone

Home Forums Support Placeholder text in nav not positioned correctly on iPhone

Viewing 4 posts - 1 through 4 (of 4 total)
  • Author
    Posts
  • #961871
    moderndev

    Hello GeneratePress forum,

    I have been developing a site on GeneratePress for the first time and so far I am loving it. I came from the Divi/Avada world. So this is just so much easier when it comes to theme customisation.

    Anyway I have been customising the header for both desktop and mobile and I have come across an issue I cannot seem to resolve.

    I added this snippet to implement a placeholder text in the nav search bar.

    // Adds Placeholder to search in main navigation
    add_filter( 'generate_navigation_search_output', function() {
        printf(
            '<form method="get" class="search-form navigation-search" action="%1$s">
                <input type="search" placeholder="Search..." class="search-field" value="%2$s" name="s" title="%3$s" />
            </form>',
            esc_url( home_url( '/' ) ),
            esc_attr( get_search_query() ),
            esc_attr_x( 'Search', 'label', 'generatepress' )
        );
    } );

    It seems to work reasonably well on most devices. However, I have noticed that on Apple iPhone the text does not sit correctly in the search box.

    When you test this on Crome it looks correct, but on Safari and on an actual iPhone it looks like this.

    https://snag.gy/wGAEkv.jpg

    Any tips would be much appreciated?

    #962156
    Tom
    Lead Developer
    Lead Developer
    #962277
    moderndev

    Hey Tom,

    That did seem to resolve it somewhat. I may play around with the CSS and see if I can get it to look a little better. Thanks.

    Best,

    Peter

    #962362
    Tom
    Lead Developer
    Lead Developer

    No problem ๐Ÿ™‚

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