Navbar tabs full size and center in mobile devices only

Question

how can i center my navbar <li>'s and make them 100% in mobile devices only?

At the moment i use

<header class="navbar navbar-inverse navbar-fixed-top" role="navigation">
    <nav class="navbar-collapse collapse">
        <ul id="myTab" class="nav navbar-nav pull-right">
            <li></li>
            ...
        </ul>
    </nav>
</header>

because in desktop mode i want my navigation on the right side.

When i switch to mobile device it looks like this: Picture with navbar

How can i change this to full-width li's, who are centered?

Thank you.

Edit: I'll post my solution later.

Answer 1

Thank you for your answers.

I solved my problem with the following lines of code:

html-file: i just removed pull-right in the <ul>:

<header class="navbar navbar-inverse navbar-fixed-top" role="navigation">
    <nav class="navbar-collapse collapse">
        <ul id="myTab" class="nav navbar-nav">
            <li></li>
            ...
        </ul>
    </nav>
</header>

css-file: i implemented the pull-right for myself and reset in later:

#myTab 
{ 
    float:right;
}

@media (max-width:768px)
{
    #myTab 
    {
        float:none;
    }   
    #myTab li {
        width: 100%; 
    }
}

Now it looks like:

Link to result - As you see i removed the text-align: center; part, just because left align look better.

Answer 2

You can do this with media queries, when its under a certain amount of pixels width, change its width.

@media (max-width:480px) {
    #myTab li { width:100%; float:none; }
}

---

Edit - also added float:none, as it seems to be floated right right now.

Answer 3

Use a media query to override the .nav>li classes when the menu collapses for smaller widths...

@media (max-width: 768px) { 
  .nav>li {
    text-align: center;
  }
}

Demo: http://www.bootply.com/nFls8QUKXJ