[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
    Posts
  • #1492785
    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

    #1493147
    David
    Staff
    Customer Support

    Hi there,

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

    #1493456
    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?

    #1493543
    Tom
    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?

    #1493639
    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?

    #1494686
    Tom
    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.