waterbrain waterbrain - 2 months ago 7
CSS Question

Bootstrap nav menu item full width in moblie size not working?

I have navbar menu its working fine in all screens except when it turn to mobile its items do not have full width.
[enter image description here][1]

Here is the image: [1]: http://i.stack.imgur.com/0cvWo.png

<nav id="navigationSec" class="navbar navbar-default navbar-fixed-top">
<div class="container-fluid">
<div class="navbar-header">
<button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#navCollapse">
<span class="sr-only">Toggle navigation</span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>

<a href="#top" class="navbar-brand">waterbrain</a>
</div >
<div id="navCollapse" class="navbar-collapse collapse">
<ul class="nav navbar-nav pull-right text-center ">
<li><a href="#aboutSec">Me</a><li>
<li><a href="#portfolioSec">Portfolio</a><li>
<li><a href="#skillSec">Skills</a><li>
<li><a href="#contactSec">Contact</a><li>
</ul>
</div>
</div>
</nav>

Answer

Use navbar-right instead of pull-right.

Try this

HTML:

<ul class="nav navbar-nav navbar-right text-center ">
    <li><a href="#aboutSec">Me</a><li>
    <li><a href="#portfolioSec">Portfolio</a><li>
    <li><a href="#skillSec">Skills</a><li>
    <li><a href="#contactSec">Contact</a><li>
</ul>