Reputation: 42229

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

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?

Upvotes: 8

Answers (5)

Vladislav Roscovan

Reputation: 19

Here is how a solved this problem. Moved up the button from form and added some styles for bootstrap classes, details:

<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>

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

        </div>
        <div class="additional-nav clearfix">
            <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>

            <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 class="site-nav">
            <form id="siteNav" class="navbar-collapse collapse">
                <div class="navbar-form navbar-right">
                    <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>
                </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; 
}

.additional-nav {
    display: inline-block;
    float: right;
}

.navbar-header {
    display: inline-block;
}

.additional-nav .btn-group, .additional-nav .btn-group-vertical {
    position: relative;
    display: inline-block;
    vertical-align: middle;
    float: right;
    padding: 9px 10px;
}

.site-nav {
    float: right;
}

https://jsfiddle.net/7Ltspomz/23/

Upvotes: 1

Himanshu Vaghela

Reputation: 1119

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;
  }
}

Upvotes: 6

TTCC

Reputation: 1055

I think you can't achieve this using only bootstrap styles.

You can define your specail styles, and move the dropdown-menu outof #siteNav. Like this:

<div class="navbar-default">
    <div class="container">
        <div class="nav-special-contailner">
            <div class="btn-group nav-special">
                <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 class="navbar-header">
            ...
        </div>
        <div id="siteNav" class="navbar-collapse collapse">
            ...
        </div>
    </div>
</div>

And

.nav-special {
    position: absolute;
    right: 133px;
    top: 8px;
}

@media (min-width: 768px) {
    .nav-special-contailner {
        position: relative;
    }
    .nav-special {
        right: 0;
        margin-right: 250px;
    }
}

Here is a jsfiddle.

Upvotes: 5

Jerad Rutnam

Reputation: 1546

You can add a duplicate dropdown for the responsive mobile view and hide the other dropdown menu,

HTML,

<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>

            <div class="btn-group dropdown-btn pull-right hidden-sm hidden-md hidden-lg">
              <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>

            <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 hidden-xs">
                    <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; 
}

.dropdown-btn {
  margin-top: 8px;
  margin-right: 15px;
}

See the example: https://jsfiddle.net/7Ltspomz/12/

Anyhow if you don't like to duplicate the dropdown you can simply do some modifcations to the markup and add some tricky styles,

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>
            <div class="navbar-right">
                <div class="btn-group dropdown-btn pull-left">
                    <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 id="siteNav" class="navbar-collapse navbar-form collapse search-input pull-left">
                    <form>
                        <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>

    <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>

CSS,

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

.dropdown-btn {
  margin-top: 10px;
  margin-right: 15px;
}

.search-input {
  margin-top: 0px;
  margin-bottom: 0px;
  padding-top: 0px;
  padding-bottom: 0px;
}

.search-input > form {
  margin: 10px 0;
}

@media screen and (max-width: 768px) {
  .dropdown-btn {
    position: absolute;
    top: -2px;
    right: 117px;
  }
}

See the example: https://jsfiddle.net/7Ltspomz/20/

Upvotes: 2

tmg

Reputation: 20383

You can make 2 x .navbar-header. One for .navbar-brand and left .navbar-toggle button and for one for language .dropdown and right .navbar-toggle buttons.

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

        <div class="navbar-header pull-left">
            <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>

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

        <div class="navbar-header pull-right right-side-menu">
            <form class="navbar-form pull-left">
                <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>
            </form>
            <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>
        </div>

        <div class="collapse navbar-collapse pull-right" id="siteNav">
            <form class="navbar-form navbar-right">
                <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>

#siteNav block had to be after 2nd .navbar-header, in order for collapse to appear below main navbar in xs screen, so I added a custom class to reorder the divs in sm and larger screens.

@media screen and (min-width: 768px) {
     .navbar-header.right-side-menu {
          margin-left: -350px;
          margin-right: 225px;
     }
}

.navbar-header.right-side-menu .navbar-form {
     border-color: transparent !important;
     margin-right: 15px;
     padding: 0;
}

Complete code in jsfiddle.

Upvotes: 3

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

Answers (5)

Related Questions