Search box in secondary navigation

[johnzoro]

I have installed this plug in

https://wordpress.org/plugins/bop-search-box-item-type-for-nav-menus/

This means that I can add it to my secondary navigation

Is there a way to add styling to it to make the search box smaller and the go button that says “search box” is replaced by an image?

http://testdmn.com/1/ <- for your reference tom

[Leo]

Hi John,

Try this to change the width of the search field:

input.search-field {
    max-width: 150px;
}

Not sure how to replace the text by an image – this topic is probably more suitable for the plugin author.

On another note, are you only wanting search in secondary navigation? If so it might be better to use primary navigation as the secondary navigation. Tom made suggestion here: https://generatepress.com/forums/topic/move-navigation-search/#post-275175

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

[johnzoro]

what about padding around the search input box?

also how would i make the text smaller in the input box?

[Leo]

Padding:

form.bop-nav-search {
    padding: 10px 0px;
}

Text size:

input.search-field {
    font-size: 15px;
}

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

[Author]

Posts