Bootstrap multi-level navbar - how to prevent content from collapsing

Question

Firstly, I guess this serves as a nice example of how multi-level navbars can be achieved with Bootstrap (it was something I struggled with for a long time)

Secondly, I have a question which regards preventing content from collapsing on the navbar.

My navbar has three rows, two navbar-default and one navbar-inverse, and three buttons to control each section when it is collapsed:

Code:

<nav class="navbar navbar-fixed-top">

    <div class="navbar-default">
        <div class="container">
            <div class="navbar-header">

                <button type="button"
                        class="navbar-toggle collapsed pull-left"
                        data-toggle="collapse"
                        data-target="#megaNav"
                        aria-expanded="false"
                        aria-controls="navbar">
                    <span class="sr-only">Toggle navigation</span>
                    <span class="icon-bar"></span>
                    <span class="icon-bar"></span>
                    <span class="icon-bar"></span>
                </button>

                <button type="button"
                        class="navbar-toggle collapsed"
                        data-toggle="collapse"
                        data-target="#siteNav"
                        aria-expanded="false"
                        aria-controls="navbar">
                    <span class="sr-only">Toggle navigation</span>
                    <span class="icon-bar"></span>
                    <span class="icon-bar"></span>
                    <span class="icon-bar"></span>
                </button>

                <button type="button"
                        class="navbar-toggle collapsed"
                        data-toggle="collapse"
                        data-target="#authNav"
                        aria-expanded="false"
                        aria-controls="navbar">
                    <span class="sr-only">Toggle navigation</span>
                    <span class="icon-bar"></span>
                    <span class="icon-bar"></span>
                    <span class="icon-bar"></span>
                </button>

                <a class="navbar-brand" href="#">NewCo</a>

            </div>
            <div id="siteNav" class="navbar-collapse collapse">
                <form class="navbar-form navbar-right">
                    <div class="btn-group">
                        <button type="button"
                                class="btn btn-default dropdown-toggle"
                                data-toggle="dropdown"
                                aria-haspopup="true"
                                aria-expanded="false">
                            English <span class="caret"></span>
                        </button>
                        <ul class="dropdown-menu">
                            <li><a href="#">English</a></li>
                            <li><a href="#">French</a></li>
                            <li><a href="#">Spanish</a></li>
                            <li><a href="#">Italian</a></li>
                            <li><a href="#">German</a></li>
                        </ul>
                    </div>
                    <div class="input-group">
                        <input type="text" class="form-control" placeholder="Search for...">
                        <span class="input-group-btn">
                            <button class="btn btn-default" type="button">
                                <span class="glyphicon glyphicon-search"></span>
                            </button>
                        </span>
                    </div>
                </form>
            </div>
        </div>
    </div>

    <div class="navbar-default">
        <div class="container">
            <div id="authNav" class="collapse navbar-collapse">
                <ul class="nav navbar-nav navbar-right">
                    <li><a href="#">Log in</a></li>
                    <li><a href="#">Register</a></li>
                    <li><a href="#">Privacy Policy</a></li>
                </ul>
            </div>
        </div>
    </div>

    <div class="navbar-inverse">
        <div class="container">
            <div id="megaNav" class="collapse navbar-collapse">
                <ul class="nav navbar-nav">
                    <li class="active"><a href="#">About Us</a></li>
                    <li><a href="#">Products</a></li>
                    <li><a href="#">Services</a></li>
                    <li><a href="#">Corporate</a></li>
                    <li><a href="#">Contact Us</a></li>
                </ul>
            </div>
        </div>
    </div>

</nav>

https://jsfiddle.net/7Ltspomz/

---

When it's not collapsed (this is how I want it to look)

When it's collapsed (this is what it currently does)

I don't want this (which is what it currently does)

I would like this... (when it's collapsed)

...and this (when it's expanded)

---

The only way I've managed to achieve this is to have two dropdown buttons; one which displays for sm, md and lg, and one that only displays in xs. I don't particularly like this approach since it is duplicating content - even though it's not a lot of content, from many perspectives, this isn't particularly nice.

Any ideas on how I can achieve this?

Answer 1

You can add a duplicate dropdown for the responsive mobile view and hide the other view, I just update your fiddle.. check here

HTML

<nav class="navbar navbar-fixed-top">

<div class="navbar-default">
    <div class="container">
        <div class="navbar-header">

            <button type="button"
                    class="navbar-toggle collapsed pull-left"
                    data-toggle="collapse"
                    data-target="#megaNav"
                    aria-expanded="false"
                    aria-controls="navbar">
                <span class="sr-only">Toggle navigation</span>
                <span class="icon-bar"></span>
                <span class="icon-bar"></span>
                <span class="icon-bar"></span>
            </button>

            <button type="button"
                    class="navbar-toggle collapsed"
                    data-toggle="collapse"
                    data-target="#siteNav"
                    aria-expanded="false"
                    aria-controls="navbar">
                <span class="sr-only">Toggle navigation</span>
                <span class="icon-bar"></span>
                <span class="icon-bar"></span>
                <span class="icon-bar"></span>
            </button>

            <button type="button"
                    class="navbar-toggle collapsed"
                    data-toggle="collapse"
                    data-target="#authNav"
                    aria-expanded="false"
                    aria-controls="navbar">
                <span class="sr-only">Toggle navigation</span>
                <span class="icon-bar"></span>
                <span class="icon-bar"></span>
                <span class="icon-bar"></span>
            </button>

            <a class="navbar-brand" href="#">NewCo</a>

            <div class="pull-right mobile">
            <div class="btn-group">
                    <button type="button"
                            class="btn btn-default dropdown-toggle"
                            data-toggle="dropdown"
                            aria-haspopup="true"
                            aria-expanded="false">
                        English <span class="caret"></span>
                    </button>
                    <ul class="dropdown-menu">
                        <li><a href="#">English</a></li>
                        <li><a href="#">French</a></li>
                        <li><a href="#">Spanish</a></li>
                        <li><a href="#">Italian</a></li>
                        <li><a href="#">German</a></li>
                    </ul>
                </div>
            </div>

        </div>
        <div id="siteNav" class="navbar-collapse collapse">
            <form class="navbar-form navbar-right">
                <div class="btn-group desktop">
                    <button type="button"
                            class="btn btn-default dropdown-toggle"
                            data-toggle="dropdown"
                            aria-haspopup="true"
                            aria-expanded="false">
                        English <span class="caret"></span>
                    </button>
                    <ul class="dropdown-menu">
                        <li><a href="#">English</a></li>
                        <li><a href="#">French</a></li>
                        <li><a href="#">Spanish</a></li>
                        <li><a href="#">Italian</a></li>
                        <li><a href="#">German</a></li>
                    </ul>
                </div>
                <div class="input-group">
                    <input type="text" class="form-control" placeholder="Search for...">
                    <span class="input-group-btn">
                        <button class="btn btn-default" type="button">
                            <span class="glyphicon glyphicon-search"></span>
                        </button>
                    </span>
                </div>
            </form>
        </div>
    </div>
</div>

<div class="navbar-default">
    <div class="container">
        <div id="authNav" class="collapse navbar-collapse">
            <ul class="nav navbar-nav navbar-right">
                <li><a href="#">Log in</a></li>
                <li><a href="#">Register</a></li>
                <li><a href="#">Privacy Policy</a></li>
            </ul>
        </div>
    </div>
</div>

<div class="navbar-inverse">
    <div class="container">
        <div id="megaNav" class="collapse navbar-collapse">
            <ul class="nav navbar-nav">
                <li class="active"><a href="#">About Us</a></li>
                <li><a href="#">Products</a></li>
                <li><a href="#">Services</a></li>
                <li><a href="#">Corporate</a></li>
                <li><a href="#">Contact Us</a></li>
            </ul>
        </div>
    </div>
</div>

CSS

.navbar .navbar-header .navbar-toggle.pull-left {
  margin-right: 0;
  margin-left: 15px; 
}

.mobile{display:none;}

@media (max-width: 767px){
  .desktop{display:none}

  .mobile{
    display:block;
    margin-top:8px;
    margin-right:15px;
  }
}