I'm just trying to put a simple search box in my navbar.

For some reason the right hand side of the input box is not appearing and when i click the waves effect removes the bottom border.

In dev tools if i remove  the waves class, it doesn't have these issues.

This is code in right hand side of my nav where you can see the search form.

IS there a way to remove waves effect on an input--or is there something i'm doing wrong here?

<ulclass="navbar-nav navbar-right">
<liclass="nav-item mr-4">
<formmethod="get"action="{% url 'deals:deal-search' %}"accept-charset="utf-8"role="search">
<inputclass="form-control"type="search"placeholder="Search"name="q"id="searchbox"type="text">
</form>
</li>
{% if not user.is_authenticated %}
<liclass="nav-item"><aclass="nav-link"aria-pressed="true"href="{% url 'accounts:sign_in' %}">Login</a></li><liclass="nav-item"><aclass="nav-link"style="color:lightgrey;"aria-pressed="true"href="{% url 'accounts:sign_up' %}">Register</a></li>
{% else %}
<liclass="nav-item btn-group mt-1 mr-3">
<aclass="nav-link dropdown-toggle"id="navbarDropdownMenuLink"data-toggle="dropdown"aria-haspopup="true"aria-expanded="false"href="{% url 'accounts:profile' %}">
<iclass="fas fa-user-circle fa-lg"></i>
</a>
<divclass="dropdown-menu dropdown-menu-right"aria-labelledby="navbarDropdownMenuLink">
<aclass="dropdown-item"href="{% url 'accounts:profile' %}">My Account</a>
<aclass="dropdown-item"href="{% url 'accounts:favorites' %}">My Favorites</a>
<aclass="dropdown-item"href="{% url 'accounts:sign_out' %}">Sign Out</a>
</div>
</li>

{% endif %}

</ul>