Problems with navbar

Asked

Viewed 278 times

1

I am a web beginner and I am developing an HTML5 application, where I use Bootstrap. There is a navbar at the top of the page and in the navbar there is a list. However, when implementing, the list options are overlapped, causing the problem of not displaying all the items in the list, as all the items in the list are on top of each other.

Follows excerpt of code implemented without proper functioning

<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>

lista com opções sobrepostas

Follow code when isolated and working

<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>


<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 the navbar working

inserir a descrição da imagem aqui

I’m sorry if I wasn’t very clear. I researched other topics and found no answers.

javascript css html5 bootstrap

  • that is, Voce managed to solve? or have some problem? I did not understand, it would be good to also have your code main.js

  • main.js is empty, I’m only using bootstrap classes and plugins for now. I haven’t been able to solve the problem yet.

  • but what’s the problem? the codes look the same to me @Dan except for references to jquery and bootrap files js

  • The problem is that the list options appear superimposed on the navbar. Take a look at the full code here http://pastebin.com/Z2SgJL4i. and here http://pastebin.com/EVBMSbcX

  • now yes... the problem is in your css, which you did not put in the question, hehehehe

  • I think not, because in the code I did alone, without css, it worked perfectly. But put there for Oix, heheheh

  • look at the link I put in the answer, it’s with your css ( make these changes I told you and you’ll see that it will work

Show 2 more comments

1 answer

0


The problem is in your CSS you need to remove your text-indent: -999px; and the 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;
}

  • Take the full code now and test

  • same code, just added the references

  • edited with the code

  • So, just this bit, alone, also works here, the problem is when I put in the code already complete. I’ll keep digging, in case you find out, put here, blz?

  • Man, I think the problem is in my browsers, only can!! I made the changes, tested and the problem persists. I will continue validating until I find the error and post again. VLW by force

  • used CTRL+F5 or CTRL+SHIFT+R in Chrome? because of cache ??

  • Funfou. Man, I spent the day in that euheuheuheuhe, vlw, hein!!! Where I give a naughty vote?

  • clicka on Vzin’s response

Show 3 more comments

Browser other questions tagged javascript css html5 bootstrap

You are not signed in. Login or sign up in order to post.