I'm currently facing an issue with the navbar on my website. In Chrome, everything is displayed perfectly in one line - the logo, links, and search box with a button. However, when I switch to Firefox, the layout gets all messed up like this:
Below is the code I'm using:
<header>
<nav class="navbar navbar-default" role="navigation" id="navbarStyle">
<div class="nav navbar-nav navbar-left">
<a href="<?=base_url()?>">Brand</a>
</div>
<div class="nav navbar-nav navbar-right">
<form class="navbar-form navbar-left navbar-search" role="search">
<div class="form-group">
<div class="input-group">
<div class="col-lg-1">
<input type="text" class="form-control"placeholder="Search">
<button type="submit" class="btn btn-danger">
<span class="glyphicon glyphicon-search"></span>
</button>
</div>
</div>
</div>
</form>
</div>
<div>
<ul class="nav nav-justified">
<li><a href="#">Link 1</a></li>
<li><a href="#">Link 2</a></li>
<li><a href="#">Link 3</a></li>
<li><a href="#">Link 4</a></li>
</ul>
</div>
</nav>
</header>
I've been trying to resolve this issue for hours but to no avail. Any assistance on this matter would be greatly appreciated. Thank you!