Não sei se estou fazendo corretamente isso, mas preciso criar um dropdownlist na minha navbar para mostrar uma lista de filiais que virão do banco de dados. O problema é que quando insiro-o, fica desalinhado verticalmente. Acredito que seja por causa de alguma classe que precisa ser informada corretamente. Alguém sabe como me ajudar?
<li>
<div class="form-group">
<label class="col-md-2 control-label">Filial Administrada</label>
<div class="col-md-3">
<select data-plugin="selectpicker" title="Selecione uma opção" class="show-tick show-menu-arrow">
<option>FILIAL 1</option>
<option>FILIAL 2</option>
<option>FILIAL 3</option>
<option>FILIAL 4</option>
</select>
</div>
</div>
</li>
<nav class="site-navbar navbar navbar-default navbar-fixed-top navbar-mega" role="navigation">
<div class="navbar-header">
<button type="button" class="navbar-toggle hamburger hamburger-close navbar-toggle-left hided" data-toggle="menubar">
<span class="sr-only">Toggle navigation</span>
<span class="hamburger-bar"></span>
</button>
<button type="button" class="navbar-toggle collapsed" data-target="#site-navbar-collapse" data-toggle="collapse">
<i class="icon wb-more-horizontal" aria-hidden="true"></i>
</button>
<div class="navbar-brand navbar-brand-center site-gridmenu-toggle" data-toggle="gridmenu">
<img class="navbar-brand-logo" src="../../assets/images/logo.png" title="Remark">
<span class="navbar-brand-text"> My System</span>
</div>
<button type="button" class="navbar-toggle collapsed" data-target="#site-navbar-search" data-toggle="collapse">
<span class="sr-only">Toggle Search</span>
<i class="icon wb-search" aria-hidden="true"></i>
</button>
</div>
<div class="navbar-container container-fluid">
<!-- Navbar Collapse -->
<div class="collapse navbar-collapse navbar-collapse-toolbar" id="site-navbar-collapse">
<!-- Navbar Toolbar -->
<ul class="nav navbar-toolbar">
<li class="hidden-float" id="toggleMenubar">
<a data-toggle="menubar" href="#" role="button">
<i class="icon hamburger hamburger-arrow-left">
<span class="sr-only">Toggle menubar</span>
<span class="hamburger-bar"></span>
</i>
</a>
</li>
<li class="hidden-xs" id="toggleFullscreen">
<a class="icon icon-fullscreen" data-toggle="fullscreen" href="#" role="button">
<span class="sr-only">Toggle fullscreen</span>
</a>
</li>
<li class="hidden-float">
<a class="icon wb-search" data-toggle="collapse" href="#" data-target="#site-navbar-search" role="button">
<span class="sr-only">Toggle Search</span>
</a>
</li>
<li>
<div class="form-group">
<label class="col-md-2 control-label">Filial Administrada</label>
<div class="col-md-3">
<select data-plugin="selectpicker" title="Selecione uma opção" class="show-tick show-menu-arrow">
<option>FILIAL 1</option>
<option>FILIAL 2</option>
<option>FILIAL 3</option>
<option>FILIAL 4</option>
</select>
</div>
</div>
</li>
</ul>
<ul class="nav navbar-toolbar navbar-right navbar-toolbar-right">
</ul>
@await Html.PartialAsync("_LoginPartial")
<!-- End Navbar Toolbar Right -->
</div>
<!-- End Navbar Collapse -->
<!-- Site Navbar Seach -->
<div class="collapse navbar-search-overlap" id="site-navbar-search">
<form role="search">
<div class="form-group">
<div class="input-search">
<i class="input-search-icon wb-search" aria-hidden="true"></i>
<input type="text" class="form-control" name="site-search" placeholder="Search...">
<button type="button" class="input-search-close icon wb-close" data-target="#site-navbar-search" data-toggle="collapse" aria-label="Close"></button>
</div>
</div>
</form>
</div>
<!-- End Site Navbar Seach -->
</div>
</nav>
select[data-plugin='selectpicker']{ transform: translateY(-50%); top: 50%; position: relative; }