[Support request] GeneratePress 3.0.2 navigation search CSS anomalous behavior

[vast]

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

[David]

Hi there,

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

[vast]

David,

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?

[Tom]

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?

[vast]

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?

[Tom]

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 🙂

[Author]

Posts