Archived topic
GeneratePress 3.0.2 navigation search CSS anomalous behavior
5 replies · Started by vast on October 16, 2020
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.
Hi there,
can you provide a link to your site where i can see the issue?
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?
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?
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 :)
