bootstrap 3 responsive multiple mega menu

Question

I work with bootstrap 3 and design mega menu navigation.

HTML:

<div class="container">
    <nav class="navbar navbar-default">
        <div class="navbar-header">
            <button class="navbar-toggle" type="button" data-toggle="collapse" data-target=".js-navbar-collapse">   <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="#">MegaMenu</a>

        </div>
        <div class="collapse navbar-collapse js-navbar-collapse">
            <ul class="nav navbar-nav">
                <li class="dropdown mega-dropdown"> <a href="#" class="dropdown-toggle" data-toggle="dropdown">Collection <span class="glyphicon glyphicon-chevron-down pull-right"></span></a>

                    <ul class="dropdown-menu mega-dropdown-menu row">
                        <li class="col-sm-3">
                            <ul>
                                <li class="dropdown-header">New in Stores</li>
                                <div id="myCarousel" class="carousel slide" data-ride="carousel">
                                    <div class="carousel-inner">
                                        <div class="item active"> <a href="#"><img src="http://placehold.it/254x150/3498db/f5f5f5/&text=New+Collection" class="img-responsive" alt="product 1"></a>

                                             <h4><small>Summer dress floral prints</small></h4> 
                                            <button class="btn btn-primary" type="button">49,99 €</button>
                                            <button href="#" class="btn btn-default" type="button"><span class="glyphicon glyphicon-heart"></span> Add to Wishlist</button>
                                        </div>
                                        <!-- End Item -->
                                        <div class="item"> <a href="#"><img src="http://placehold.it/254x150/ef5e55/f5f5f5/&text=New+Collection" class="img-responsive" alt="product 2"></a>

                                             <h4><small>Gold sandals with shiny touch</small></h4> 
                                            <button class="btn btn-primary" type="button">9,99 €</button>
                                            <button href="#" class="btn btn-default" type="button"><span class="glyphicon glyphicon-heart"></span> Add to Wishlist</button>
                                        </div>
                                        <!-- End Item -->
                                        <div class="item"> <a href="#"><img src="http://placehold.it/254x150/2ecc71/f5f5f5/&text=New+Collection" class="img-responsive" alt="product 3"></a>

                                             <h4><small>Denin jacket stamped</small></h4> 
                                            <button class="btn btn-primary" type="button">49,99 €</button>
                                            <button href="#" class="btn btn-default" type="button"><span class="glyphicon glyphicon-heart"></span> Add to Wishlist</button>
                                        </div>
                                        <!-- End Item -->
                                    </div>
                                    <!-- End Carousel Inner -->
                                </div>
                                <!-- /.carousel -->
                                <li class="divider"></li>
                                <li><a href="#">View all Collection <span class="glyphicon glyphicon-chevron-right pull-right"></span></a>
                                </li>
                            </ul>
                        </li>
                        <li class="col-sm-3">
                            <ul>
                                <li class="dropdown-header">Dresses</li>
                                <li><a href="#">Unique Features</a>
                                </li>
                                <li><a href="#">Image Responsive</a>
                                </li>
                                <li><a href="#">Auto Carousel</a>
                                </li>
                                <li><a href="#">Newsletter Form</a>
                                </li>
                                <li><a href="#">Four columns</a>
                                </li>
                                <li class="divider"></li>
                                <li class="dropdown-header">Tops</li>
                                <li><a href="#">Good Typography</a>
                                </li>
                            </ul>
                        </li>
                        <li class="col-sm-3">
                            <ul>
                                <li class="dropdown-header">Jackets</li>
                                <li><a href="#">Easy to customize</a>
                                </li>
                                <li><a href="#">Glyphicons</a>
                                </li>
                                <li><a href="#">Pull Right Elements</a>
                                </li>
                                <li class="divider"></li>
                                <li class="dropdown-header">Pants</li>
                                <li><a href="#">Coloured Headers</a>
                                </li>
                                <li><a href="#">Primary Buttons & Default</a>
                                </li>
                                <li><a href="#">Calls to action</a>
                                </li>
                            </ul>
                        </li>
                        <li class="col-sm-3">
                            <ul>
                                <li class="dropdown-header">Accessories</li>
                                <li><a href="#">Default Navbar</a>
                                </li>
                                <li><a href="#">Lovely Fonts</a>
                                </li>
                                <li><a href="#">Responsive Dropdown </a>
                                </li>
                                <li class="divider"></li>
                                <li class="dropdown-header">Newsletter</li>
                                <form class="form" role="form">
                                    <div class="form-group">
                                        <label class="sr-only" for="email">Email address</label>
                                        <input type="email" class="form-control" id="email" placeholder="Enter email">
                                    </div>
                                    <button type="submit" class="btn btn-primary btn-block">Sign in</button>
                                </form>
                            </ul>
                        </li>
                    </ul>
                </li>
            </ul>
                            <ul class="nav navbar-nav">
                <li class="dropdown mega-dropdown"> <a href="#" class="dropdown-toggle" data-toggle="dropdown">Collection 2<span class="glyphicon glyphicon-chevron-down pull-right"></span></a>

                    <ul class="dropdown-menu mega-dropdown-menu row">
                        <li class="col-sm-3">
                            <ul>
                                <li class="dropdown-header">New in Stores</li>
                                <div id="myCarousel" class="carousel slide" data-ride="carousel">
                                    <div class="carousel-inner">
                                        <div class="item active"> <a href="#"><img src="http://placehold.it/254x150/3498db/f5f5f5/&text=New+Collection" class="img-responsive" alt="product 1"></a>

                                             <h4><small>Summer dress floral prints</small></h4> 
                                            <button class="btn btn-primary" type="button">49,99 €</button>
                                            <button href="#" class="btn btn-default" type="button"><span class="glyphicon glyphicon-heart"></span> Add to Wishlist</button>
                                        </div>
                                        <!-- End Item -->
                                        <div class="item"> <a href="#"><img src="http://placehold.it/254x150/ef5e55/f5f5f5/&text=New+Collection" class="img-responsive" alt="product 2"></a>

                                             <h4><small>Gold sandals with shiny touch</small></h4> 
                                            <button class="btn btn-primary" type="button">9,99 €</button>
                                            <button href="#" class="btn btn-default" type="button"><span class="glyphicon glyphicon-heart"></span> Add to Wishlist</button>
                                        </div>
                                        <!-- End Item -->
                                        <div class="item"> <a href="#"><img src="http://placehold.it/254x150/2ecc71/f5f5f5/&text=New+Collection" class="img-responsive" alt="product 3"></a>

                                             <h4><small>Denin jacket stamped</small></h4> 
                                            <button class="btn btn-primary" type="button">49,99 €</button>
                                            <button href="#" class="btn btn-default" type="button"><span class="glyphicon glyphicon-heart"></span> Add to Wishlist</button>
                                        </div>
                                        <!-- End Item -->
                                    </div>
                                    <!-- End Carousel Inner -->
                                </div>
                                <!-- /.carousel -->
                                <li class="divider"></li>
                                <li><a href="#">View all Collection <span class="glyphicon glyphicon-chevron-right pull-right"></span></a>
                                </li>
                            </ul>
                        </li>
                        <li class="col-sm-3">
                            <ul>
                                <li class="dropdown-header">Dresses</li>
                                <li><a href="#">Unique Features</a>
                                </li>
                                <li><a href="#">Image Responsive</a>
                                </li>
                                <li><a href="#">Auto Carousel</a>
                                </li>
                                <li><a href="#">Newsletter Form</a>
                                </li>
                                <li><a href="#">Four columns</a>
                                </li>
                                <li class="divider"></li>
                                <li class="dropdown-header">Tops</li>
                                <li><a href="#">Good Typography</a>
                                </li>
                            </ul>
                        </li>
                        <li class="col-sm-3">
                            <ul>
                                <li class="dropdown-header">Jackets</li>
                                <li><a href="#">Easy to customize</a>
                                </li>
                                <li><a href="#">Glyphicons</a>
                                </li>
                                <li><a href="#">Pull Right Elements</a>
                                </li>
                                <li class="divider"></li>
                                <li class="dropdown-header">Pants</li>
                                <li><a href="#">Coloured Headers</a>
                                </li>
                                <li><a href="#">Primary Buttons & Default</a>
                                </li>
                                <li><a href="#">Calls to action</a>
                                </li>
                            </ul>
                        </li>
                        <li class="col-sm-3">
                            <ul>
                                <li class="dropdown-header">Accessories</li>
                                <li><a href="#">Default Navbar</a>
                                </li>
                                <li><a href="#">Lovely Fonts</a>
                                </li>
                                <li><a href="#">Responsive Dropdown </a>
                                </li>
                                <li class="divider"></li>
                                <li class="dropdown-header">Newsletter</li>
                                <form class="form" role="form">
                                    <div class="form-group">
                                        <label class="sr-only" for="email">Email address</label>
                                        <input type="email" class="form-control" id="email" placeholder="Enter email">
                                    </div>
                                    <button type="submit" class="btn btn-primary btn-block">Sign in</button>
                                </form>
                            </ul>
                        </li>
                    </ul>
                </li>
            </ul>
        </div>
        <!-- /.nav-collapse -->
    </nav>
</div>

CSS:

body {
    font-family:'Open Sans', 'sans-serif';
    background:#f0f0f0;
}
.navbar-nav>li>.dropdown-menu {
    margin-top:20px;
    border-top-left-radius:4px;
    border-top-right-radius:4px;
}
.navbar-default .navbar-nav>li>a {
    width:200px;
    font-weight:bold;
}
.mega-dropdown {
    position: static !important;
    width:100%;
}
.mega-dropdown-menu {
    padding: 20px 0px;
    width: 100%;
    box-shadow: none;
    -webkit-box-shadow: none;
}
.mega-dropdown-menu:before {
    content:"";
    border-bottom: 15px solid #fff;
    border-right: 17px solid transparent;
    border-left: 17px solid transparent;
    position: absolute;
    top: -15px;
    left: 285px;
    z-index: 10;
}
.mega-dropdown-menu:after {
    content:"";
    border-bottom: 17px solid #ccc;
    border-right: 19px solid transparent;
    border-left: 19px solid transparent;
    position: absolute;
    top: -17px;
    left: 283px;
    z-index: 8;
}
.mega-dropdown-menu > li > ul {
    padding: 0;
    margin: 0;
}
.mega-dropdown-menu > li > ul > li {
    list-style: none;
}
.mega-dropdown-menu > li > ul > li > a {
    display: block;
    padding: 3px 20px;
    clear: both;
    font-weight: normal;
    line-height: 1.428571429;
    color: #999;
    white-space: normal;
}
.mega-dropdown-menu > li ul > li > a:hover, .mega-dropdown-menu > li ul > li > a:focus {
    text-decoration: none;
    color: #444;
    background-color: #f5f5f5;
}
.mega-dropdown-menu .dropdown-header {
    color: #428bca;
    font-size: 18px;
    font-weight:bold;
}
.mega-dropdown-menu form {
    margin:3px 20px;
}
.mega-dropdown-menu .form-group {
    margin-bottom: 3px;
}

Now, i ahve two <ul> for navigation menu . in both i see one sub menu. me mean is if i click in collection Or collection 2 i see one sub menu.

how do can i fix this ?

Problem : click on collection and collection 2 u see one submenu bottom of collection not for collection 2.

enter image description here

Note: The Position of the arrow is to be changed. For both the dropdowns, the upward arrows indicate the same position. This position is to be changed like

First Dropdown: https://i.stack.imgur.com/xlWPN.png
Second Dropdown: https://i.stack.imgur.com/RrP9D.png

JSFIDDLE DEMO

@user3168736: click on collection and collection 1 u see one submenu bottom of collection not for collection 1. — user27133, Jul 31 '14 at 11:17
@Devang웃 I think, the last picture says it all. Also the text above that picture, maybe it is not really clear, but I get it. — Patrik Krehák, Jul 31 '14 at 11:48
Yes, for the same, I have tried to edit the question, I hope this clearly defines the question. — DevangKantharia, Jul 31 '14 at 11:50

Kami · Accepted Answer · 2014-07-31T16:20:19.650

The issue occurs because the css triangle is being positioned relative to overall navbar. As this element's position does not change, the triangle does to reposition itself.

The ideal solution is to embed the triangle within the currently selected item. To achieve this remove

.mega-dropdown-menu:before {
    content:"";
    border-bottom: 15px solid #fff;
    border-right: 17px solid transparent;
    border-left: 17px solid transparent;
    position: relative;
    top: -15px;
    left: 150px;
    z-index: 10;
}
.mega-dropdown-menu:after {
    content:"";
    border-bottom: 17px solid #ccc;
    border-right: 19px solid transparent;
    border-left: 19px solid transparent;
    position: absolute;
    top: -17px;
    left: 283px;
    z-index: 8;
}

and replace with

.open .dropdown-toggle:after {
    border-bottom: 15px solid #fff;
    border-left: 17px solid transparent;
    border-right: 17px solid transparent;
    content: "";
    left: 163px;
    position: absolute;
    bottom: -21px;
    z-index: 1500;
}
.open .dropdown-toggle span:after {
    border-bottom: 17px solid #ccc;
    border-left: 19px solid transparent;
    border-right: 19px solid transparent;
    content: "";
    left: -10px;
    position: absolute;
    bottom: -41px;
    z-index: 8;
}

This attaches the triangle to the text and down arrows, and positions it relative to these elements.

Fiddle - http://jsfiddle.net/7eHFd/4/

Update: In the above the triangle remains in place when sizing down. To workaround this, wrap with above code with a media query.

@media (min-width: 768px) {
}

Fiddle - http://jsfiddle.net/7eHFd/5/

@anunixercoder : Not sure, I have not tried this with Bootstrap 4. — Kami, Nov 06 '17 at 17:49

score 2 · Answer 2 · edited May 23 '17 at 12:00

Solution: JS Fiddle Solution Link

Information:

Referring to this link, you can't adjust psudo class css. Styling or Content created by :after or :before is not part of the DOM and therefore cannot be selected or modified.

Also, this solution is suitable for:

Responsive Design
The menu arrow, will be positioned to the center of the menu item.

Issues:

Psudo class CSS:

.mega-dropdown-menu:before {
    content:"";
    border-bottom: 15px solid #fff;
    border-right: 17px solid transparent;
    border-left: 17px solid transparent;
    position: absolute;
    top: -15px;
    left: 285px;
    z-index: 10;
}
.mega-dropdown-menu:after {
    content:"";
    border-bottom: 17px solid #ccc;
    border-right: 19px solid transparent;
    border-left: 19px solid transparent;
    position: absolute;
    top: -17px;
    left: 283px;
    z-index: 8;
}

So, for the same, `.mega-dropdown-menu' class need to be reset the psudo border styling.

Solution: JS Fiddle Solution Link

And so, a new element is to be added for which has the same styling as under:

CSS changes:

.show{
    display: block;
}
.arrow1, .arrow2 {
    position: absolute;
    z-index: 99999;
    display: none;
}
.open .arrow1, .open .arrow2 {
    display: block;
}
.arrow1 span:after, .arrow2 span:after {
    content:"";
    border-bottom: 15px solid #fff;
    border-right: 17px solid transparent;
    border-left: 17px solid transparent;
    position: absolute;
    top: 6px;
    left: 2px;
}
.arrow1 span:before, .arrow2 span:before {
    content:"";
    border-bottom: 17px solid #ccc;
    border-right: 19px solid transparent;
    border-left: 19px solid transparent;
    position: absolute;
    top: 4px;
}
.mega-dropdown-menu:after, .mega-dropdown-menu:before{border: none;}

JS Changes:

$(".nav > li.mega-dropdown").eq( 0 ).append("<p class='arrow1 arrOw'><span></span></p>");
$(".nav > li.mega-dropdown").eq( 1 ).append("<p class='arrow2 arrOw'><span></span></p>");

$(".nav > li.mega-dropdown").eq( 0 ).click(function () {
    //x = $(".mega-dropdown.open").position();
    x = $(this).position();
    aa = x.left+75;
    $(this).find(".arrow1").css("left", aa);
});
$(".nav > li.mega-dropdown").eq( 1 ).click(function () {
    //x = $(".mega-dropdown.open").position();
    x = $(this).position();
    aa = x.left + 75;
    $(this).find(".arrow2").css("left", aa);
});

If you have any other issue, then please add a comment below.

Regards D.

Suresh Karia · Answer 3 · 2014-07-31T12:57:28.593

One Issue Solved here >> Mega drop down triangle

FullScreen View

checked on 1920 X 1080 Resolution! Its Working! enter image description here

Working on Second!

css

  body {
    font-family:'Open Sans', 'sans-serif';
    background:#f0f0f0;
}
.navbar-nav>li>.dropdown-menu {
    margin-top:20px;
    border-top-left-radius:4px;
    border-top-right-radius:4px;
}
.navbar-default .navbar-nav>li>a {
    width:200px;
    font-weight:bold;
}
.mega-dropdown {
    position: static !important;
    width:100%;
}
.mega-dropdown-menu {
    padding: 20px 0px;
    width: 100%;
    box-shadow: none;
    -webkit-box-shadow: none;
}
.mega-dropdown-menu-1:before {
    content:"";
    border-bottom: 15px solid #fff;
    border-right: 17px solid transparent;
    border-left: 17px solid transparent;
    position: absolute;
    top: -15px;
    left: 30%;
    z-index: 10;
}
.mega-dropdown-menu-1:after {
    content:"";
    border-bottom: 17px solid #ccc;
    border-right: 19px solid transparent;
    border-left: 19px solid transparent;
    position: absolute;
    top: -17px;
    left: 30%;
    z-index: 8;
}
.mega-dropdown-menu-2:before {
    content:"";
    border-bottom: 15px solid #fff;
    border-right: 17px solid transparent;
    border-left: 17px solid transparent;
    position: absolute;
    top: -15px;
    left: 50%;
    z-index: 10;
}
.mega-dropdown-menu-2:after {
    content:"";
    border-bottom: 17px solid #ccc;
    border-right: 19px solid transparent;
    border-left: 19px solid transparent;
    position: absolute;
    top: -17px;
    left: 50%;
    z-index: 8;
}
.mega-dropdown-menu > li > ul {
    padding: 0;
    margin: 0;
}
.mega-dropdown-menu > li > ul > li {
    list-style: none;
}
.mega-dropdown-menu > li > ul > li > a {
    display: block;
    padding: 3px 20px;
    clear: both;
    font-weight: normal;
    line-height: 1.428571429;
    color: #999;
    white-space: normal;
}
.mega-dropdown-menu > li ul > li > a:hover, .mega-dropdown-menu > li ul > li > a:focus {
    text-decoration: none;
    color: #444;
    background-color: #f5f5f5;
}
.mega-dropdown-menu .dropdown-header {
    color: #428bca;
    font-size: 18px;
    font-weight:bold;
}
.mega-dropdown-menu form {
    margin:3px 20px;
}
.mega-dropdown-menu .form-group {
    margin-bottom: 3px;
}

Please Check it once again [LINK](http://imgur.com/CyBcLb5)....it is not responsive!!! Bootstrap is used, so it should be responsive. Regards. — DevangKantharia, Jul 31 '14 at 12:48

bootstrap 3 responsive multiple mega menu

3 Answers3

Linked