Problems with navbar

Navigation
1

I'm a beginner on web and I'm developing an application in HTML5, where I use Bootstrap. There is a navbar at the top of the page and on the navbar there is a list. But when performing the implementation, the options in the list are overlapped, causing the problem of not displaying all the items in the list, because all the items in the list are one on top of the other.

Here is some snippet of code implemented without proper operation 

<nav class="navbar navbar-default navbar-fixed-top">
    <div class="container">
        <div class="navbar-header">
            <button type="button" class="navbar-toggle" data-togle="collpase" data-target="#myNavbar" aria-expander="true">
                <span class="icon-bar"></span>
                <span class="icon-bar"></span>
                <span class="icon-bar"></span>
            </button>
            <a class="navbar-brand" href="#myPage">Logo</a>
        </div>

        <div class="navbar-collapse collapse-in" id="myNavbar" aria-expanded="true">
            <ul class="nav navbar-nav navbar-right">
                <li><a href="#sobre">SOBRE</a></li>
                <li><a href="#servicos">SERVICOS</a></li>
                <li><a href="#portifolio">PORTIFOLIO</a></li>
                <li><a href="#precos">PRECOS</a></li>
                <li><a href="#contato">CONTATO</a></li>
            </ul>
        </div>
    </div>
</nav>

Followthecodewhenisolatedandworking

<navclass="navbar navbar-default navbar-fixed-top">
    <div class="container">
        <div class="navbar-header">
            <button type="button" class="navbar-toggle" data-togle="collpase" data-target="#myNavbar" aria-expander="true">
                <span class="icon-bar"></span>
                <span class="icon-bar"></span>
                <span class="icon-bar"></span>
            </button>
            <a class="navbar-brand" href="#myPage">Logo</a>
        </div>

        <div class="navbar-collapse collapse-in" id="myNavbar" aria-expanded="true">
            <ul class="nav navbar-nav navbar-right">
                <li><a href="#sobre">SOBRE</a></li>
                <li><a href="#servicos">SERVICOS</a></li>
                <li><a href="#portifolio">PORTIFOLIO</a></li>
                <li><a href="#precos">PRECOS</a></li>
                <li><a href="#contato">CONTATO</a></li>
            </ul>
        </div>
    </div>
</nav>


<script src="js/jquery-3.1.1.min.js"></script>
<script src="js/bootstrap.min.js"></script>
<script src="js/main.js"></script>

Image of this code with navbar working

Sorry if I was not very clear. I researched other topics and found no answers.

    
asked by anonymous 03.03.2017 / 21:55

1 answer

0

The problem is with your CSS you need to remove your text-indent: -999px; and width: 10px;

You can check by clicking here 

li{
    display: inline-block;
    height: 10px;
    margin: 1px;
    border: 1px solid @carousel-indicators-border-color;
    border-radius: 10px;
    cursor: pointer;
}
    
03.03.2017 / 23:02
Thread Usage in c ++ Invalid length for a base-64 character string or array. Error decrypting String