[Support request] GeneratePress 3.0.2 navigation search CSS anomalous behavior

Home Forums Support GeneratePress 3.0.2 navigation search CSS anomalous behavior

Viewing 6 posts - 1 through 6 (of 6 total)
  • Author
  • #1492785

    On upgrading to GeneratePress 3.0.2, the previous CSS selectors don’t apply.

    For example, prior to the update, the following CSS displayed the search box as intended.

    .search-field::placeholder{color:grey;text-transform:uppercase;vertical-align:middle}input[name='s'],input[name='s']:focus{display:inline-block;text-align:center;width:80%;padding:15px 22px;margin:10px 5px;box-sizing:border-box;border:5px solid #e8e8e8;border-radius:5px}

    After the upgrade, they no longer take effect. When attempting to update these as follows, its effect differs.

    .navigation-search input[type='search'], .navigation-search input[type='search']:active::placeholder{color:grey;text-transform:uppercase;vertical-align:middle}.navigation-search input[type='search'], .navigation-search input[type='search']:active:focus{display:inline-block;text-align:center;width:80%;padding:15px 22px;margin:10px 5px;box-sizing:border-box;border:5px solid #e8e8e8;border-radius:5px}

    While the styles now apply, the ‘x’ icon overlays it rather than positioning relative to the size of the box. Secondly, when out of focus i.e. clicking outside the box, a horizontal scroll appears at the bottom of the browser window as the width of the page has increased.

    View post on imgur.com

    Customer Support

    Hi there,

    can you provide a link to your site where i can see the issue?



    The site’s running on an internal server sharing a link isn’t an immediate option. What CSS would you recommend we try and we can report back?

    Lead Developer
    Lead Developer

    Hi there,

    It’s very difficult to tell without actually inspecting the code. Is there any way you can show us on a live staging server?


    Hi Tom,

    It’ll take some time to migrate it to a staging server. We are now able to display the desired effect.

    .navigation-search input[type='search']:not(:focus), .navigation-search input[type='search']:focus{display:inline-block;text-align:center;width:50%;padding:15px 22px;margin:10px 5px;box-sizing:border-box;border:5px solid #e8e8e8;border-radius:5px}.close-search .icon-search{width:auto;position:absolute;left:10px;top:-5px;}

    The difference though is the closing search icon is pushed slightly to the right and up of the magnifying glass when the screen resizes.

    Is there a different selector for mobile devices?

    Lead Developer
    Lead Developer

    No, the same element should be used on desktop and mobile.

    Let me know when it’s viewable and I’ll be happy to take a look 🙂

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