How to make a field in `navbar-item` wider in Bulma?

Viewed 986

I am using a field inside the navbar. It is used to create a search field in the navbar. The field is contained inside a navbar-item. This field is taking a fixed width. Is it supported in Bulma to control the width of the navbar-item.

Following is my markup:

<nav class="navbar has-background-grey-dark">
    <div class="container">
        <div class="navbar-menu">
            <div class="navbar-start">
                <div class="navbar-item field has-addons test">
                    <p class="control">
                        <input class="input is-link is-focussed" type="text"
                               placeholder="Search for products">
                    </p>
                    <p class="control">
                        <button class="button is-info">
                            Search
                        </button>
                    </p>
                </div>
            </div>
        </div>
    </div>
</nav>

Current Output

Is it supported in Bulma to make the fields in navbar wider or it should be done with custom css/sass?

0 Answers
Related