<!--[if lt IE 7]>      <html class="no-js lt-ie9 lt-ie8 lt-ie7" lang=""> <![endif]-->
<!--[if IE 7]>         <html class="no-js lt-ie9 lt-ie8" lang=""> <![endif]-->
<!--[if IE 8]>         <html class="no-js lt-ie9" lang=""> <![endif]-->
<!--[if gt IE 8]><!-->
<html class="no-js" lang="">
<!--<![endif]-->
<head>




    <script src="https://use.fontawesome.com/dfbd317c2a.js"></script>
    <script src="/js/vendor/modernizr-2.8.3-respond-1.4.2.min.js"></script>


    <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>


    <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>




    <script>window.jQuery || document.write('<script src="js/vendor/jquery-1.11.2.min.js"><\/script>')</script>

    <script src="/js/plugins.js"></script>
    <!-- Used for the date picker -->
    <script type="text/javascript" src="/js/vendor/moment.min.js"></script>

    
</head>
<body>
    <!--[if lt IE 8]>
        <p class="browserupgrade">You are using an <strong>outdated</strong> browser. Please <a href="http://browsehappy.com/">upgrade your browser</a> to improve your experience.</p>
    <![endif]-->
    <div class="container-fluid mainBox">
        <header>
            <div class="navContainer">
                <row>
                    <div class="navbar-right">
                        <ul>
                            <li>link 1</li>
                            <li>link 2</li>
                            <li>link 3</li>
                            <li><span class="glyphicon glyphicon-facebook"></span></li>
                            <li>link 4</li>
                            <li>link 5</li>
                        </ul>
                    </div>
                </row>
            </div>
        </header>
       
            <div class="container brand-header">
           
                    <div class="row">
                        <div class="col-md-6 brand">
                            <p>
                                <span class="brand">brand</span>
                                <span class="brand_sub">subbrand</span>

                            </p>
                        </div>
                        <div class="col-md-6 text-right">
                           contact num
                            <p>opening times</p>
                            <span class="sign_up_button">
                                newsletter
                                <span>signup</span>
                            </span>
                        </div>
                    </div>
           
            </div>
        <div class="container">
            <nav class="navbar">
                <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>
                        Menu
                    </button>
                    <a class="navbar-brand" href="#">Home</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">a link<span class="caret"></span></a>
                            <ul class="dropdown-menu mega-dropdown-menu">
                                <li class="col-sm-3">
                                    <ul>
                                        <li class="dropdown-header">Men Collection</li>
                                        <div id="menCollection" class="carousel slide" data-ride="carousel">
                                            <div class="carousel-inner">
                                                <div class="item active">
                                                    <a href="#"><img src="http://placehold.it/254x150/ff3546/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/3498db/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 -->
                                            <!-- Controls -->
                                            <a class="left carousel-control" href="#menCollection" role="button" data-slide="prev">
                                                <span class="glyphicon glyphicon-chevron-left" aria-hidden="true"></span>
                                                <span class="sr-only">Previous</span>
                                            </a>
                                            <a class="right carousel-control" href="#menCollection" role="button" data-slide="next">
                                                <span class="glyphicon glyphicon-chevron-right" aria-hidden="true"></span>
                                                <span class="sr-only">Next</span>
                                            </a>
                                        </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">Features</li>
                                        <li><a href="#">Auto Carousel</a></li>
                                        <li><a href="#">Carousel Control</a></li>
                                        <li><a href="#">Left & Right Navigation</a></li>
                                        <li><a href="#">Four Columns Grid</a></li>
                                        <li class="divider"></li>
                                        <li class="dropdown-header">Fonts</li>
                                        <li><a href="#">Glyphicon</a></li>
                                        <li><a href="#">Google Fonts</a></li>
                                    </ul>
                                </li>
                                <li class="col-sm-3">
                                    <ul>
                                        <li class="dropdown-header">Plus</li>
                                        <li><a href="#">Navbar Inverse</a></li>
                                        <li><a href="#">Pull Right Elements</a></li>
                                        <li><a href="#">Coloured Headers</a></li>
                                        <li><a href="#">Primary Buttons & Default</a></li>
                                    </ul>
                                </li>
                                <li class="col-sm-3">
                                    <ul>
                                        <li class="dropdown-header">Much more</li>
                                        <li><a href="#">Easy to Customize</a></li>
                                        <li><a href="#">Calls to action</a></li>
                                        <li><a href="#">Custom Fonts</a></li>
                                        <li><a href="#">Slide down on Hover</a></li>
                                    </ul>
                                </li>
                            </ul>
                        </li>
                        <li class="dropdown mega-dropdown">
                            <a href="#" class="dropdown-toggle" data-toggle="dropdown">another link<span class="caret"></span></a>
                            <ul class="dropdown-menu mega-dropdown-menu">
                                <li class="col-sm-3">
                                    <ul>
                                        <li class="dropdown-header">Features</li>
                                        <li><a href="#">Auto Carousel</a></li>
                                        <li><a href="#">Carousel Control</a></li>
                                        <li><a href="#">Left & Right Navigation</a></li>
                                        <li><a href="#">Four Columns Grid</a></li>
                                        <li class="divider"></li>
                                        <li class="dropdown-header">Fonts</li>
                                        <li><a href="#">Glyphicon</a></li>
                                        <li><a href="#">Google Fonts</a></li>
                                    </ul>
                                </li>
                                <li class="col-sm-3">
                                    <ul>
                                        <li class="dropdown-header">Plus</li>
                                        <li><a href="#">Navbar Inverse</a></li>
                                        <li><a href="#">Pull Right Elements</a></li>
                                        <li><a href="#">Coloured Headers</a></li>
                                        <li><a href="#">Primary Buttons & Default</a></li>
                                    </ul>
                                </li>
                                <li class="col-sm-3">
                                    <ul>
                                        <li class="dropdown-header">Much more</li>
                                        <li><a href="#">Easy to Customize</a></li>
                                        <li><a href="#">Calls to action</a></li>
                                        <li><a href="#">Custom Fonts</a></li>
                                        <li><a href="#">Slide down on Hover</a></li>
                                    </ul>
                                </li>
                                <li class="col-sm-3">
                                    <ul>
                                        <li class="dropdown-header">Women Collection</li>
                                        <div id="womenCollection" 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/ff3546/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 -->
                                            <!-- Controls -->
                                            <a class="left carousel-control" href="#womenCollection" role="button" data-slide="prev">
                                                <span class="glyphicon glyphicon-chevron-left" aria-hidden="true"></span>
                                                <span class="sr-only">Previous</span>
                                            </a>
                                            <a class="right carousel-control" href="#womenCollection" role="button" data-slide="next">
                                                <span class="glyphicon glyphicon-chevron-right" aria-hidden="true"></span>
                                                <span class="sr-only">Next</span>
                                            </a>
                                        </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>
                            </ul>
                        </li>
                        <!-- BROWSE LOCATIONS -->
                        <li class="dropdown mega-dropdown" href="#">
                            <a href="#" class="dropdown-toggle" data-toggle="dropdown">another dropdown<span class="caret"></span></a>
                            <ul class="dropdown-menu mega-dropdown-menu">
                                <li class="col-md-4">
                                    <ul class="solid_background">
                                        
                                        
                                    </ul>
                                </li>
                                <li class="col-md-4">
                                    <ul class="solid_background">
                                        <li>
                                            <img src="/img/navigation/map.png" class="img-responsive" />

                                        </li>
                                    </ul>

                                </li>

                            </ul>
                        </li>


                      
                        <li><a href="#">Blog</a></li>
                    </ul>

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

   

        .mainBox {
            background-color: #c6c6c6;
            background-repeat: repeat-x;
            background-size: contain;

            height: 16em;
          border-bottom: 5px green solid;
   
        }



.navbar{
  top: 60px;
}
      .navbar .navbar-brand, .navbar .navbar-nav>li>a 
        {
            color: rgba(225,30,38, 1);
            border-right: solid 3px rgb(255,222,0);
        }

.navbar .navbar-brand, .navbar .navbar-nav>li>a:hover{
  border-bottom: 5px solid red;
}

  
        .navContainer {
            margin-left: 20%;
            margin-right: 20%;
   
            height: 15%;

        }




       .navbar-right{
            list-style-type: none;
           margin-right: 20px;
           margin-top: 5px;
            padding: 0;

            font-size: 1.8em; /* Used for older browser that don't support vw */
            font-size: calc( 0.5em + 0.5vw ) ; /* if supported use this, the calc prevent the font going too small*/

            
        }

          
                 .navbar-right li, ul.navbar-right li a {
                display: inline;
                color: rgb(255,255,255); /* white */
                padding: 5px;
            }

              
  
                 /* ============================  */        
                 /*  Branding / Header section    */
                 /* ============================  */
      
            .brand-header{
                /*background-color:#ffd800;*/
               position: relative;
               top: 50px;
                
         
            }


            .brand{
                
                color:red;
                font-size: 45px;
             
                  }

            span.brand{
                
            }
                .brand_sub{
                  
                    color: #000;
                    font-size: 20px;
                   margin-top: -10px;
                   display: inline-block;
            
            }

            span.sign_up_button{
                background-color: rgba(225,30,38, 1);
                color: rgb(255,255,255);
                text-align: right;
                display:inline-block;
            }

        




            
Run Pen

External CSS

  1. https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/css/bootstrap.min.css

External JavaScript

This Pen doesn't use any external JavaScript resources.