Twitter Bootstrap 3 navbar collapse

Question

I'm trying to migrate my Twitter Bootstrap 2 navbar to Bootstrap 3. I have 3 parts in my navbar.

"myContent1" and "myContent2" will always be visible. "myContent3" will be collapsed for small screens. But when I click stacked button in a small screen device, collapsed menu doesn't opened. Nothing happens when I click button.

I put it into a fiddle: http://jsfiddle.net/mavent/LDP8K/6/

<nav class="navbar navbar-inverse navbar-fixed-top navbar-sam-main" role="navigation">
<!-- Brand and toggle get grouped for better mobile display -->
<div class="navbar-header">

    <a class="navbar-brand navbar-left" href="" title="aaaa" id="MyContent1">
        MySite
    </a>

    <button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-mycol">
        <span class="sr-only">Toggle navigation</span>
        <span class="icon-bar"></span>
        <span class="icon-bar"></span>
        <span class="icon-bar"></span>
    </button>



    <ul class="nav navbar-nav navbar-left" id="myContent2">
        <li class="dropdown" id="users">
            <a class="navbar-brand" href="" title="aaa" style="display:inline-block;padding-right:0px;">
                <img src="" width="24" height="24" alt="aaaa">
                MyName
            </a>
            <a class="dropdown-toggle" data-toggle="dropdown" href="#users"  style="display:inline-block;padding-left:0px;">
                <b class="caret" style="border-left: 6px solid transparent; border-right: 6px solid transparent;  border-top: 6px solid #999;"></b>
            </a>
            <ul class="dropdown-menu">
                <li><a href=""><img src="" width="24" height="30"/> OtherName</a></li>
                <li class="divider"></li>
                <li><a href="">AAAA</a></li>
                <li><a href="">BBB</a></li>
            </ul>
        </li>
    </ul>


</div>


<!-- Collect the nav links, forms, and other content for toggling -->
<div class="collapse navbar-collapse navbar-mycol">
    <ul class="nav navbar-nav navbar-right" id="myContent3">

        <li><a href="">UUUU</a></li>
        <li><a href="">YYYYY</a></li>

        <li class="dropdown" id="wer">
            <a class="dropdown-toggle" data-toggle="dropdown" href="#wer">Tools
                <b class="caret"></b>
            </a>
            <ul class="dropdown-menu">
                <li><a href="">aaaa</a></li>
                <li><a href="">bbbb</a></li>
                <li><a href="">cccc</a></li>
            </ul>
        </li>

    </ul>

</div><!-- /.navbar-collapse -->
</nav>

Edit: With one person's suggestion I put "toggle button", out of the navbar-header section. And I gave button top:0 and right:0 absolute style to the button. But In that case, if screen is very small, myContent2 penetrates into button. You can see that behaviour from this: http://jsfiddle.net/mavent/paXt9/2/

Edit2: I need this behaviour:

For big screens, everthing is visible.

For smaller screens, myContent2 is visible, myContent3 is collapsed. myContent3 is uncollapsed if button is clicked.

For very small screens, myContent2 will be shown in next line. So myContent2 and button will not be conflicted each other's place.

Answer 1

The dropdown element is taking up the whole navbar width and is preventing the button from working, to fix things you can set a higher z-index to your brand link and to the navbar-toggle button:

.navbar-sam-main .navbar-toggle, .navbar-sam-main .navbar-brand {
    position: relative;
    z-index:1;
}

For the other issues that were brought up in the comments section, the fixes were to wrap the dropdown link and the caret in a span to make them wrap as a single element and using a media query to have the link display in the center when it falls to a second line:

HTML

<li class="dropdown" id="users"> 
    <span>
        <a class="navbar-link" href="" title="aaa" style="display:inline-block;padding-right:0px;">
            <img src="" width="24" height="24" alt="aaaa" />
            MyName
        </a>
        <a class="dropdown-toggle" data-toggle="dropdown" href="#users"  style="display:inline-block;padding-left:0px;">
            <b class="caret" style="border-left: 6px solid transparent; border-right: 6px solid transparent;  border-top: 6px solid #999;"></b>
        </a>
    </span>
    <ul class="dropdown-menu">
        ...
    </ul>
</li>

CSS

.navbar-sam-main .navbar-nav > li >span {
    display: inline-block;
    padding-top: 10px;
    padding-bottom: 10px;
    line-height: 20px;
}
.navbar-sam-main .navbar-nav > li >span .navbar-brand {
    padding-top: 0;
    padding-bottom: 0;
}

@media (max-width: 270px) {
    #myContent1 > li.dropdown {
        text-align: center;
    }
    #myContent1 > li.dropdown >ul {
        text-align:left;
    }
}

Answer 2

I think you should use responsive utility classes, with screen width breakpoints, such as:

.hidden-sm
.visible-lg

More info: http://getbootstrap.com/css/#responsive-utilities

Try not to override layout mechanisms provided with Bootstrap and create your layout in the first state initially, then override visibility with the classes I've mentioned.