Navbar toggler of inverted Boostrap

Question

Navbar toggler of inverted Boostrap

Navigation

#1 by (1 votes)

0

I was trying one of the default bars that are shown on the official Bootstrap page but the name is inverted with respect to the toggler button and it is not quite good at all.

This is how it looks (notice that it is on the screen maximized and the button is still visible):

It should be like this:

and when it's maximized:

The code has its own CSS but has no modification. I do not know if I am linking any of the files wrong or I need to add something because I try it on any page and it works. I leave the code:

<div class="text-primary container header">
    <h1>Titulo</h1>
    <p>Lorem ipsum dolor sit amet lorem</p>
</div>


<!-- Esta es la barra que estoy tratando de implementar-->
<nav class="navbar navbar-toggleable-md navbar-light bg-faded">
    <button class="navbar-toggler navbar-toggler-right" type="button" data-
            toggle="collapse" data-target="#navbarNav" aria-controls="navbarNav" aria-
            expanded="false" aria-label="Toggle navigation">
        <span class="navbar-toggler-icon"></span>
    </button>
    <a class="navbar-brand" href="#">Navbar</a>
    <div class="collapse navbar-collapse" id="navbarNav">
        <ul class="navbar-nav">
            <li class="nav-item active">
                <a class="nav-link" href="#">Home <span class="sr-only">(current)
          </span></a>
            </li>
            <li class="nav-item">
                <a class="nav-link" href="#">Features</a>
            </li>
            <li class="nav-item">
                <a class="nav-link" href="#">Pricing</a>
            </li>
            <li class="nav-item">
                <a class="nav-link disabled" href="#">Disabled</a>
            </li>
        </ul>
    </div>
</nav>

link to the bar: Bootstrap Bar

html css bootstrap

asked by Hernan Rodriguez 06.02.2018 в 07:08

source

1 answer

Time it takes to load a table with Datatables Limit INT data types (only positive)

score 1 · Accepted Answer

Your code is different from Bootstrap. If you add new elements in certain contexts you will not get the desired result unless you add more css.

Here is an example of how the code would look:

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>
<nav class="navbar navbar-default">
    <div class="container-fluid">
        <!-- Brand and toggle get grouped for better mobile display -->
        <div class="navbar-header">
            <button type="button" class="navbar-toggle collapsed" data-toggle="collapse"
                    data-target="#bs-example-navbar-collapse-1" aria-expanded="false">
                <span class="sr-only">Título</span>
                <span class="icon-bar"></span>
                <span class="icon-bar"></span>
                <span class="icon-bar"></span>
            </button>
            <a class="navbar-brand" href="#">Título</a>
        </div>
        <div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
            <ul class="nav navbar-nav">
                <li class="nav-item active">
                    <a class="nav-link" href="#">Home <span class="sr-only">(current)</span>
                    </a>
                </li>
                <li class="nav-item">
                    <a class="nav-link" href="#">Features</a>
                </li>
                <li class="nav-item">
                    <a class="nav-link" href="#">Pricing</a>
                </li>
                <li class="nav-item">
                    <a class="nav-link disabled" href="#">Disabled</a>
                </li>

            </ul>
        </div>
    </div>
</nav>