@media (max-width:768px){ .carousel-caption h1 { font-size: 30px; padding: 5px 10px; } .carousel-caption h2 { font-size: 24px; padding: 5px 10px; } .carousel-caption { min-height: 150px; top: 40%; left: 10%; } .menu .nav li a { padding: 10px 10px; } .menu .navbar-collapse { float: left; padding:0; } } @media (max-width:767px){ header { padding: 0; position: relative; width: 100%; z-index: 2; background-color: #000; } .carousel-caption { top: 30%; } .menu .navbar-collapse { width: 30%; position: absolute; right: 3%; background-color: #000; top: 60%; } .navbar-toggle { margin-top: 20px; } .menu .navbar-nav { margin: 0; } .menu li .dropdown-menu{ position:relative !important; left:0 !important; opacity: 1; width:100%; visibility: visible; -webkit-transition:all 0.6s ease; -moz-transition:all 0.6s ease; -o-transition:all 0.6s ease; -ms-transition: all 0.6s ease; transition:all 0.6s ease; } .menu .navbar-nav li a { color: #fff !important; } .menu .nav li a { padding: 10px 40px; } .menu .nav li a .caret{ float:right; } } @media (max-width:480px){ .sticky-head{ background-color:#000; } .menu .navbar-collapse { width: 100%; position: relative; background-color: #000; } .carousel-caption { min-height: 120px; top: 20%; left: 5%; right: 5%; } .carousel-caption h1 { font-size: 20px; } .carousel-caption h2 { font-size: 16px; } .s_link { padding: 5px 10px; } }