Bootstrap Navbar collapse style changing after clicking

0
votes

http://codepen.io/ruchiccio/pen/ONvoaE

I have a navbar with a dropdown menu. This dropdown menu has a few children, one of which is also a dropdown list (i.e. Brands). When I click this dropdown list and then close it up again with the toggle caret, the 1px border around my entire navbar-collapse div disappears. I can't see what causes that to happen.

I also get weird border changes when I click the Brands dropdown, toggle it closed, and then try clicking a regular link in the dropdown menu (i.e. About).

Here is what the code looks like:

 <div id="navbar" class="navbar-collapse collapse">
   <ul class="nav navbar-nav">
      <li><a>About</a></li>
      <li class="dropdown">
         <a class="dropdown-toggle" data-toggle="dropdown">Brands<span class="caret"></span></a>
            <ul class="dropdown-menu">
              <li><a>Brand 1</a></li>
    ...

Left: what it should look like. Right: the problem

1
javascripthtmlcsstwitter-bootstrap
Can you please include the full HTML code for the navbar to rule out user error and it is useful for users to test your entire code. - Simon Hayter
I can't replicate the bug for some reason. I'm attaching a screenshot. - Rachel S
We don't need screenshots, we need you to edit your question and include your full code... it stops at <li><a>Brand 1</a></li> - Simon Hayter
I tried adding it to codepen and to bootply and the problem doesn't occur. It also doesn't occur on my phone (iOS). I'll add the code anyway. Also, there is no problem if I remove float:right and leave it default to the left. - Rachel S

1 Answers

0
votes

I figured out a solution. I gave navbar-collapse absolute positioning, with right:0 to keep it at the right side of the screen. Apparently, floating doesn't agree with the collapse.