I have a rather straightforward navbar:
<nav class="navbar navbar-default navbar-inverse navbar-fixed-top" role="navigation">
<div class="container">
<div class="navbar-header pull-left">
@Html.ActionLink("Contacts", "Contacts", "Home", null, null, null, new { area = "" }, new { @class = "navbar-brand customclass" })
@Html.ActionLink("Home", "Index", "Home", null, null, "anchor", new { area = "" }, new { @class = "navbar-brand" })
</div>
<div class="navbar-header pull-right">
<ul class="nav navbar-nav pull-left">
<li style="padding-right:20px"><button type="button" class="btn btn-success navbar-btn" data-toggle="modal" data-target="#register"><span class="glyphicon glyphicon-ok"></span>text</button></li>
</ul>
</div>
</div>
</nav>
However, I have noticed that when the screen width goes below 768 pixels, the navbar height increases from 51 to 66 pixels and the layout becomes less attractive. The button is displaced to the center while the links remain unaffected. I am aware that I need to use a media query to adjust this behavior, but I am unsure of how to do so. I attempted setting the height to 51 pixels, which partially solved the issue (only affecting the navbar height, causing slight displacement of the button to align with the center as if the navbar height was still 66 pixels, possibly due to added padding or margin that I could not locate).
All the classes used are standard Bootstrap classes, except for the custom class I added to the first link in the navbar to display an image.