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>
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
I’m sorry if I wasn’t very clear. I researched other topics and found no answers.
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
– andrepaulo
main.js is empty, I’m only using bootstrap classes and plugins for now. I haven’t been able to solve the problem yet.
– Dan
but what’s the problem? the codes look the same to me @Dan except for references to jquery and bootrap files
js
– andrepaulo
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
– Dan
now yes... the problem is in your css, which you did not put in the question, hehehehe
– andrepaulo
I think not, because in the code I did alone, without css, it worked perfectly. But put there for Oix, heheheh
– Dan
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
– andrepaulo