Bootstrap 3.0 - Nice KEEPER #2 - GREAT RESPONSIVE MENU - MARKUP _ JS

by bizamajig

HTML

<script src="//netdna.bootstrapcdn.com/bootstrap/3.0.0/js/bootstrap.min.js"></script>
<link rel="stylesheet" href="//netdna.bootstrapcdn.com/font-awesome/3.2.1/css/font-awesome.min.css">
<link rel="stylesheet" href="http://getbootstrap.com/dist/css/bootstrap.css">
	<!-- #secondary-nav -->
    <nav id="secondary-nav" class="navbar navbar-static-top navbar-default" role="navigation">
        <div class="container">
        

            <div class="">
                <ul class="nav navbar-nav navbar-right">
                    <li class="menu-item "><a href="#" title=""><span class="visible-xs glyphicon glyphicon-home"></span> <span class="hidden-xs">HOME</a></span></li>
                    <li class="menu-item "><a href="#" title=""><span class="visible-xs glyphicon glyphicon-list-alt"></span> <span class="hidden-xs">DEMO PORTALE</a></span></li>
                    <li class="menu-item "><a href="#" title=""><span class="visible-xs glyphicon glyphicon-pencil"></span> <span class="hidden-xs">REGISTRATI</a></span></li>
                    <li class="menu-item "><a href="#" title="" class="black-link"><span class="glyphicon glyphicon-user"></span> <span class="hidden-xs">ACCEDI</span></a></li>
                    <li class="menu-item "><a href="#" title="" class="black-link"><span class="glyphicon glyphicon-shopping-cart"></span> <span class="hidden-xs">LISTA DELLA SPESA</span></a></li>
                </ul>
            </div>
        </div>
    </nav>
	
	<!-- #header -->
	<header id="header" class="container">
		<div class="row">
			<div class="col-xs-6">
				<img src="http://clienti.stefanoginella.com/loreal/assets/logo-loreal-pro.png" alt="L'Oreal Professional Logo - Pro Only" width="187" height="102" class="pull-left" />
			</div>
			<div class="col-xs-6">
				<img src="http://clienti.stefanoginella.com/loreal/assets/logo-loreal-pro-2.png" alt="L'Oreal Professional Logo" width="187" height="102" class="pull-right" />
			</div>
		</div>
	</header>
	





    
   ...

CSS

/* START Bizamajig Customization - Place YAMM above Bootstrap .navbar */
/*!
 * Yamm!3
 * Yet another megamenu for Bootstrap 3
 * 
 * http://geedmo.github.com/yamm3
 */
.yamm .nav,
.yamm .collapse,
.yamm .dropup,
.yamm .dropdown {
  position: static;
}
.yamm .container {
  position: relative;
}
.yamm .dropdown-menu {
  left: auto;
}
.yamm .nav.navbar-right .dropdown-menu {
  left: auto;
  right: 0;
}
.yamm .yamm-content {
  padding: 20px 30px;
}
.yamm .dropdown.yamm-fw .dropdown-menu {
  left: 0;
  right: 0;
}
/* END Bizamajig Customization - Place YAMM above Bootstrap .navbar */








/* Standard HTML tags */
/*
    SEE SO: http://stackoverflow.com/questions/21810415/bootstrap-3-customized-multilevel-menu-not-working-on-smaller-resolution
    SEE: http://clienti.stefanoginella.com/loreal/pagina-prodotto.html
*/

/* Bootstraps Theme Override & Customization */
.navbar-collapse { max-height:none; }

.navbar-default { background:#f2f2f2; border:0; font-size:12px; }

	.navbar-default .navbar-nav > li > a { color:#484747;  } 
	.navbar-default .navbar-nav > li > a:hover, .navbar-default .navbar-nav > li > a:focus, .dropdown-menu > li > a:hover, .dropdown-menu > li > a:focus, .dropdown-menu > li.open > a, .dropdown-menu > li.active > a, .dropdown-menu > li.active > a:hover    { color:#ffa800 !important; background-color:transparent !important; }
	.navbar-default .navbar-nav > .active > a, .navbar-default .navbar-nav > .active > a:hover, .navbar-default .navbar-nav > .active > a:focus { color:#484747; background-color:transparent; }
	
.navbar-inverse { background:#000; border:0; font-size:17px; }
	.navbar-inverse .navbar-nav > li > a { color:#fff; padding-left:22px; padding-right:22px; } 
	.navbar-inverse .navbar-nav > li > a:hover, .navbar-default .navbar-nav > li > a:focus { color:#ffa800; background-color:transparent; }
	.navbar-inverse .navbar-nav > .active > a, .navbar-default .navbar-nav > .active > a:hover, .navbar-default .navbar-nav > .active > a:focus {...

JavaScript

// Enable top products carousel - Product Page
/*
    $('#carousel').carouFredSel({
		items: {
			visible: { min:1, max:4 },
			minimum: 5,	height: 249, width: 267
		},
		scroll: {
			items: 1, easing: "quadratic", queue: true
		},
		auto: {
			play: false
		},
		prev: {
			button: "#carousel-prev"
		},
		next: {
			button: "#carousel-next"
		},
		responsive: true, 
		width: null, 
		height: 249, 
		align: "center"
	});
	
	
	// Enable thumbnail carousel - Product Page
	$('#thumbnail-carousel').carouFredSel({
		items: {
			visible: { min:1, max:3 },
			minimum: 4,	height: 95, width: 95
		},
		scroll: {
			items: 1, easing: "quadratic", queue: true
		},
		auto: {
			play: false
		},
		prev: {
			button: "#thumb-prev"
		},
		next: {
			button: "#thumb-next"
		},
		responsive: true, 
		width: null, 
		height: 95, 
		align: "center"
	});
*/	
		// Thumb carousel: click on images open them - Product Page
		$('#thumbnail-carousel .thumb-item').click(function() {
			var newsrc = $(this).find('img').attr('src');
			console.log(newsrc);
			$('#thumbnail-big img').fadeOut(80, function() {
				$('#thumbnail-big img').attr('src',newsrc).fadeIn(120);
			});
		});
	
    // Enable #home-slider-1 in Homepage
/*
	$('#home-slider-1').carouFredSel({
		items: {
			visible: 1,
			minimum: 2,	height: "variable", width: 1140
		},
		scroll: {
			items: 1, easing: "quadratic", queue: true
		},
		auto: {
			play: false
		},
		prev: {
			button: "#home-slider-1-prev"
		},
		next: {
			button: "#home-slider-1-next"
		},
		responsive: true, 
		width: null, 
		height: "variable", 
		align: "center"
	});
	
	// Enable #home-slider-2 in Homepage
	$('#home-slider-2').carouFredSel({
		items: {
			visible: 1,
			minimum: 2,	height: "variable", width: 1140
		},
		scroll: {
			items: 1, easing: "quadratic", queue: true
		},
		auto: {
			play: false
		},
		prev: {
			button: "#home-slider-2-prev"
		},
		next: {
			button: "#home-slider-2-next"
		},
		responsive: true, 
		width: null, 
		height:...