0

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

4
  • 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. Commented Apr 14, 2016 at 16:34
  • I can't replicate the bug for some reason. I'm attaching a screenshot. Commented Apr 14, 2016 at 17:03
  • 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> Commented Apr 14, 2016 at 17:13
  • 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. Commented Apr 14, 2016 at 17:31

1 Answer 1

0

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.

Sign up to request clarification or add additional context in comments.

Comments

Start asking to get answers

Find the answer to your question by asking.

Ask question

Explore related questions

See similar questions with these tags.