Seguinte, estou usando a versão do bootstrap 3.7.2 para fazer uma navbar e configurei-a para que, quando "colapsada", ou seja, qdo visualizamos em dispositivos mobile, ela fica com o botão toggle na direita e a logo fica localizada à esquerda devido a configurações css. Até aí tudo bem, mas qdo clicado, os links aparecem com um alinhamento à esquerda. Que configuração eu posso usar para alinhar esses links ao centro desse "dropdown" criado pelo bootstrap somente nessa visualização?
Segue o código da navbar:
<nav class="navbar navbar-fixed-top navbar-default navbar-fundo"> <!-- Barra de Navegação -->
<div class="container-fluid"> <!-- Agrupar logo toggle e links -->
<div class="navbar-header">
<!-- Botão Alternar -->
<button type="button" class="navbar-toggle collapsed navbar-right" data-toggle="collapse" data-target="#barra-navegacao" aria-expanded="false">
<span class="sr-only">Alternar navegação</span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<!-- Logo Carta -->
<a class="navbar-brand" href="index.html">
<span class="img-logo">Logo</span>
</a>
</div> <!--/navbar-header-->
<!-- navbar -->
<div class="collapse navbar-collapse" id="barra-navegacao">
<ul class="nav navbar-nav">
<li class="active font_nav">
<a href="index.html">
Home
</a>
</li>
<li class="font_nav">
<a href="relatos.html">
Relatos
</a>
</li>
<li class="font_nav">
<a href="escreva.html">
Escreva seu relato
</a>
</li>
<li class="font_nav">
<a href="info.html">
Informações
</a>
</li>
<li class="font_nav">
<a href="privacidade.html">
Privacidade
</a>
</li>
</ul>
</div> <!--/itens da barra-navegacao-->
</div> <!--/nav container-fluid-->
</nav>
Outra coisa menos importante: tem como fazer o link que está ativo no momento apareça ao centro da navbar como se fosse o título da página?