Slight modification header on mobile

[Chris]

Here’s how my current mobile header looks like: http://prntscr.com/qer9v8

How can I make it look like this: http://prntscr.com/qer80v

[David]

Hi there,

try adding this CSS to make the search occupy the width of the nav – with some border around it:

@media (max-width: 768px) {
    .custom-search-form {
        width: 90%;
        margin-left: auto;
        margin-right: auto;
        margin-bottom: 10px;
    }
    .custom-search-form input[type="search"] {
        max-width: 80%;
    }
    .custom-search-form button {
        display: none;
    }
}

Documentation: http://docs.generatepress.com/
Adding CSS: http://docs.generatepress.com/article/adding-css/

[Chris]

Great, how do I remove the search icon: http://prntscr.com/qes9di

[David]

Edited the CSS above

Documentation: http://docs.generatepress.com/
Adding CSS: http://docs.generatepress.com/article/adding-css/

[Chris]

Sanks!

[David]

You’re welcome

Documentation: http://docs.generatepress.com/
Adding CSS: http://docs.generatepress.com/article/adding-css/

[Author]

Posts