bootstrap 2 navbar break point change

bootstrap 2 navbar break point change - html

I am building a joomla template using built in bootstrap version 2.3.2. The problem is i have long navbar when it comes on tablets, it divide in two lines i would like to have it collapse at 1200px. I am using following code for navigation.
<?php
defined('_JEXEC') or die;
// Add JavaScript Frameworks
JHtml::_('bootstrap.framework');
// Load optional rtl Bootstrap css and Bootstrap bugfixes
JHtmlBootstrap::loadCss($includeMaincss = true);
?>
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<jdoc:include type="head" />
<!--[if lt IE 9]>
<script src="<?php echo $this->baseurl ?>/media/jui/js/html5.js"></script>
<![endif]-->
<link href="templates/test/css/template.css" rel="stylesheet" type="text/css">
</head>
<body>
<div class="container">
<div class="row-fluid">
<div id="logo" class="span12"><img src="templates/test/images/logo.png" alt="Home - Freeterm Limited, London"></div>
</div>
</div>
<div class="container">
<div class="row-fluid">
<nav class="span12 navbar">
<div class="navbar-inner">
<a class="btn btn-navbar" data-toggle="collapse" data-target=".nav-collapse">
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</a>
<div class="nav-collapse collapse"><jdoc:include type="modules" name="nav" style="none" /></div>
</div>
</nav>
</div></div>
The CSS is as below:
.navbar {
margin: 0px;
}
.navbar-inner {
min-height: 40px;
padding-left: 0px;
padding-right: 0px;
background-color: #363f45;
background-image: -moz-linear-gradient(top, #363f45, #363f45);
background-image: -webkit-gradient(linear, 0 0, 0 100%, from(#363f45), to(#363f45));
background-image: -webkit-linear-gradient(top, #363f45, #363f45);
background-image: -o-linear-gradient(top, #363f45, #363f45);
background-image: linear-gradient(to bottom, #363f45, #363f45);
background-repeat: repeat-x;
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#ff363f45', endColorstr='#ff363f45', GradientType=0);
border: 0px solid #d4d4d4;
-webkit-border-radius: 0px;
-moz-border-radius: 0px;
border-radius: 0px;
-webkit-box-shadow: 0 0px 0px rgba(0, 0, 0, 0.065);
-moz-box-shadow: 0 0px 0px rgba(0, 0, 0, 0.065);
box-shadow: 0 0px 0px rgba(0, 0, 0, 0.065);
}
/* ----- Main Menu Styling ----- */
.navbar .nav > li > a {
font-family: 'helvetica', sans-serif;
color: #fff;
text-shadow: none;
line-height: 80px;
padding: 0 30px 0 30px;
border-left: 1px solid #21262b;
}
.navbar .nav > li > a:focus,
.navbar .nav > li > a:hover {
color: #fff;
background-color: #8dbf41;
}
.navbar .nav > .active > a,
.navbar .nav > .active > a:hover,
.navbar .nav > .active > a:focus {
color: #fff;
background-color: #8dbf41;
-webkit-box-shadow: none;
-moz-box-shadow: none;
box-shadow: none;
}
.navbar .nav li.item-101 a {
border-left: none;
}
/*----- Drop Menu -----*/
nav .nav-child {
position: absolute;
top: 100%;
left: 0;
z-index: 1000;
display: none;
float: left;
min-width: 160px;
padding: 0px 0;
margin: 0;
list-style: none;
background-color: #363f45;
border: 0px solid #ccc;
border: 0px solid rgba(0,0,0,0.2);
*border-right-width: 0px;
*border-bottom-width: 0px;
-webkit-border-radius: 0px;
-moz-border-radius: 0px;
border-radius: 0px;
-webkit-box-shadow: 0 0px 0px rgba(0,0,0,0);
-moz-box-shadow: 0 px 0px rgba(0,0,0,0);
box-shadow: 0 px 0px rgba(0,0,0,0);
-webkit-background-clip: padding-box;
-moz-background-clip: padding;
background-clip: padding-box;
}
nav .nav-child.pull-right {
right: 0;
left: auto;
}
nav .nav-child .divider {
*width: 100%;
height: 1px;
margin: 8px 1px;
*margin: -5px 0 5px;
overflow: hidden;
background-color: #e5e5e5;
border-bottom: 1px solid #fff;
}
nav .nav-child a {
display: block;
padding: 0px 20px;
clear: both;
font-size: 13px;
font-family: 'helvetica', sans-serif;
text-transform: uppercase;
height: 50px;
line-height: 50px;
color: #fff;
border: none;
white-space: nowrap;
}
nav .nav > li {
position: relative;
}
nav .nav > li:hover > .nav-child,
nav .nav > li > a:focus + .nav-child {
display: block;
}
nav .nav-child li > a:hover,
nav .nav-child li > a:focus,
nav .nav-child:hover > a {
text-decoration: none;
color: #fff;
background-color: #8dbf41;
}
/*----- Nav Bar Button -----*/
.navbar .btn-navbar {
float: right;
padding: 10px 10px;
margin: 20px;
margin-left: 5px;
color: #ffffff;
text-shadow: 0 0px 0 rgba(0, 0, 0, 0);
background-color: #363f45;
*background-color: #363f45;
background-image: -moz-linear-gradient(top, #363f45, #363f45);
background-image: -webkit-gradient(linear, 0 0, 0 100%, from(#363f45), to(#363f45));
background-image: -webkit-linear-gradient(top, #363f45, #363f45);
background-image: -o-linear-gradient(top, #363f45, #363f45);
background-image: linear-gradient(to bottom, #363f45, #363f45);
background-repeat: repeat-x;
border-color: #363f45 #363f45 #363f45;
border-color: rgba(0, 0, 0, 0) rgba(0, 0, 0, 0) rgba(0, 0, 0, 0);
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#ff363f45', endColorstr='#ff363f45', GradientType=0);
filter: progid:DXImageTransform.Microsoft.gradient(enabled=false);
-webkit-box-shadow: inset 0 0px 0 rgba(255, 255, 255, 0), 0 0px 0 rgba(255, 255, 255, 0);
-moz-box-shadow: inset 0 0px 0 rgba(255, 255, 255, 0), 0 0px 0 rgba(255, 255, 255, 0);
box-shadow: inset 0 0px 0 rgba(255, 255, 255, 0), 0 0px 0 rgba(255, 255, 255, 0);
}
.navbar .btn-navbar:hover,
.navbar .btn-navbar:focus,
.navbar .btn-navbar:active,
.navbar .btn-navbar.active,
.navbar .btn-navbar.disabled,
.navbar .btn-navbar[disabled] {
color: #ffffff;
background-color: #363f45;
*background-color: #363f45;
}

just add this in your css file
#media (max-width: 1000px) {
.navbar-header {
float: none !important;
}
.navbar-default {
background-color: #222 !important;
border-color: transparent;
padding:0px !important;
}
.nav > li {
display: block !important;
position: relative;
}
.navbar-left, .navbar-right {
float: none !important;
}
.navbar-nav > li.navbar-right {
float: none !important;
}
.navbar{
min-height:50px;
position:relative;
}
.navbar-left,.navbar-right {
float: none !important;
}
.navbar-toggle {
display: block !important;
}
.navbar-collapse {
border-top: 1px solid transparent;
box-shadow: inset 0 1px 0 rgba(255,255,255,0.1);
}
.navbar-fixed-top {
top: 0;
border-width: 0 0 1px;
}
.navbar-collapse.collapse {
display: none !important;
}
.navbar-nav {
float: none!important;
margin-top: 7.5px;
}
.navbar-nav>li {
float: none !important;
}
.navbar-nav>li>a {
padding-top: 10px;
padding-bottom: 10px;
}
.collapse.in{
display:block !important;
}
}

Related

how to handle data inside grid system in bootstrap

I am creating a webpage in bootstrap using the grid system but having issues with the columns data. The containers are responsive but the data inside is not. How do I solve this issue. Please tell me what I am missing and what problem is it ...
Thanks alot
on desktop view
in mobile view
Here is my all code...
/* CSS Document */
/*background--start-*/
body {
background: url(images/drinks.jpg) no-repeat center center fixed;
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
background-size: cover;
}
/*background--end-*/
/*Logo-- start--*/
.hit-the-floor {
color: #fff;
font-size: 6em;
margin-top: 20px;
font-weight: bold;
font-family: ruthie;
text-shadow: 0 1px 0 #ccc, 0 2px 0 #c9c9c9, 0 3px 0 #bbb, 0 4px 0 #b9b9b9, 0 5px 0 #aaa, 0 6px 1px rgba(0, 0, 0, .1), 0 0 5px rgba(0, 0, 0, .1), 0 1px 3px rgba(0, 0, 0, .3), 0 3px 5px rgba(0, 0, 0, .2), 0 5px 10px rgba(0, 0, 0, .25), 0 10px 10px rgba(0, 0, 0, .2), 0 20px 20px rgba(0, 0, 0, .15);
}
.hit-the-floor {
text-align: center;
}
.hit-the-floor1 {
color: #fff;
font-size: 4em;
margin-left: 300px;
margin-top: -50px;
font-weight: bold;
font-family: ruthie;
text-shadow: 0 1px 0 #ccc, 0 2px 0 #c9c9c9, 0 3px 0 #bbb, 0 4px 0 #b9b9b9, 0 5px 0 #aaa, 0 6px 1px rgba(0, 0, 0, .1), 0 0 5px rgba(0, 0, 0, .1), 0 1px 3px rgba(0, 0, 0, .3), 0 3px 5px rgba(0, 0, 0, .2), 0 5px 10px rgba(0, 0, 0, .25), 0 10px 10px rgba(0, 0, 0, .2), 0 20px 20px rgba(0, 0, 0, .15);
}
.hit-the-floor1 {
text-align: center;
}
/*Logo--End--*/
/*navbar start*/
.nav_custom {
margin: 0 auto;
width: 950px;
height: 60px;
position: relative;
text-align: center;
}
.nav > li {
margin-right: 10px;
background: #000000;
opacity: 0.5;
width: 130px;
}
/*navbar end*/
/*location start*/
#b {
margin: 0 auto;
}
.location {
width: 87%;
height: 45px;
background-color: #C1BEBE;
margin-bottom: 20px;
margin: 0 auto;
}
/*Location end*/
.boddy {
width: 100%;
height: 800px;
}
/* Left Side bar*/
.left-sidebar {
float: left;
width: 200px;
height: 800px;
position: fixed;
}
/* Base Styles */
#cssmenu,
#cssmenu ul,
#cssmenu li,
#cssmenu a {
margin: 0;
padding: 0;
border: 0;
list-style: none;
font-weight: normal;
text-decoration: none;
line-height: 1;
font-family: 'Open Sans', sans-serif;
font-size: 14px;
position: relative;
}
#cssmenu a {
line-height: 1.3;
}
#cssmenu {
width: 200px;
}
#cssmenu > ul > li > a {
padding-right: 40px;
font-size: 25px;
font-weight: bold;
display: block;
background: #03FE91;
color: #ffffff;
border-bottom: 1px solid #5e071b;
text-transform: uppercase;
}
#cssmenu > ul > li > a > span {
background: #26C17E;
padding: 10px;
display: block;
font-size: 13px;
font-weight: 300;
}
#cssmenu > ul > li > a:hover {
text-decoration: none;
}
#cssmenu > ul > li.active {
border-bottom: none;
}
#cssmenu > ul > li.active > a {
color: #fff;
}
#cssmenu > ul > li.active > a span {
background: #26C17E;
}
#cssmenu span.cnt {
position: absolute;
top: 8px;
right: 15px;
padding: 0;
margin: 0;
background: none;
}
/* Sub menu */
#cssmenu ul ul {
display: none;
}
#cssmenu ul ul li {
border: 1px solid #e0e0e0;
border-top: 0;
}
#cssmenu ul ul a {
padding: 10px;
display: block;
color: #000000;
font-size: 13px;
}
#cssmenu ul ul a:hover {
color: #26C17E;
}
#cssmenu ul ul li.odd {
background: #f4f4f4;
}
#cssmenu ul ul li.even {
background: #fff;
}
/*end left side bar*/
.MainArea {
width: 1148px;
height: 800px;
margin-left: 200px;
margin-top: -20px;
}
/* search start */
.search {
width: 87%;
height: 55px;
background-color: #8F8B8B;
margin-top: -20px;
margin: 0 auto;
padding-top: 5px;
padding-left: 10px;
}
#webdesigntuts-workshop:after {
content: '';
display: block;
left: 50%;
margin: 0 0 0 -400px;
position: absolute;
width: 800px;
}
#webdesigntuts-workshop:before {
background: #444;
background: -webkit-linear-gradient(left, #151515, #444, #151515);
background: -moz-linear-gradient(left, #151515, #444, #151515);
background: -o-linear-gradient(left, #151515, #444, #151515);
background: -ms-linear-gradient(left, #151515, #444, #151515);
background: linear-gradient(left, #151515, #444, #151515);
top: 192px;
}
#webdesigntuts-workshop:after {
background: #000;
background: -webkit-linear-gradient(left, #151515, #000, #151515);
background: -moz-linear-gradient(left, #151515, #000, #151515);
background: -o-linear-gradient(left, #151515, #000, #151515);
background: -ms-linear-gradient(left, #151515, #000, #151515);
background: linear-gradient(left, #151515, #000, #151515);
top: 191px;
}
#webdesigntuts-workshop form {
background: #111;
background: -webkit-linear-gradient(#1b1b1b, #111);
background: -moz-linear-gradient(#1b1b1b, #111);
background: -o-linear-gradient(#1b1b1b, #111);
background: -ms-linear-gradient(#1b1b1b, #111);
background: linear-gradient(#1b1b1b, #111);
border: 1px solid #000;
border-radius: 5px;
box-shadow: inset 0 0 0 1px #272727;
display: inline-block;
font-size: 0px;
margin: 150px auto 0;
padding: 20px;
position: relative;
z-index: 1;
}
#webdesigntuts-workshop input {
background: #222;
background: -webkit-linear-gradient(#333, #222);
background: -moz-linear-gradient(#333, #222);
background: -o-linear-gradient(#333, #222);
background: -ms-linear-gradient(#333, #222);
background: linear-gradient(#333, #222);
border: 1px solid #444;
border-radius: 5px 0 0 5px;
box-shadow: 0 2px 0 #000;
color: #888;
display: block;
float: left;
font-family: 'Cabin', helvetica, arial, sans-serif;
font-size: 13px;
font-weight: 400;
height: 42px;
margin: 0;
padding: 0 10px;
text-shadow: 0 -1px 0 #000;
width: 200px;
}
#ie #webdesigntuts-workshop input {
line-height: 40px;
}
#webdesigntuts-workshop input::-webkit-input-placeholder {
color: #888;
}
#webdesigntuts-workshop input:-moz-placeholder {
color: #888;
}
#webdesigntuts-workshop input:focus {
-webkit-animation: glow 800ms ease-out infinite alternate;
-moz-animation: glow 800ms ease-out infinite alternate;
-o-animation: glow 800ms ease-out infinite alternate;
-ms-animation: glow 800ms ease-out infinite alternate;
animation: glow 800ms ease-out infinite alternate;
background: #222922;
background: -webkit-linear-gradient(#333933, #222922);
background: -moz-linear-gradient(#333933, #222922);
background: -o-linear-gradient(#333933, #222922);
background: -ms-linear-gradient(#333933, #222922);
background: linear-gradient(#333933, #222922);
border-color: #393;
box-shadow: 0 0 5px rgba(0, 255, 0, .2), inset 0 0 5px rgba(0, 255, 0, .1), 0 2px 0 #000;
color: #efe;
outline: none;
}
#webdesigntuts-workshop input:focus::-webkit-input-placeholder {
color: #efe;
}
#webdesigntuts-workshop input:focus:-moz-placeholder {
color: #efe;
}
#webdesigntuts-workshop button {
background: #222;
background: -webkit-linear-gradient(#333, #222);
background: -moz-linear-gradient(#333, #222);
background: -o-linear-gradient(#333, #222);
background: -ms-linear-gradient(#333, #222);
background: linear-gradient(#333, #222);
-webkit-box-sizing: content-box;
-moz-box-sizing: content-box;
-o-box-sizing: content-box;
-ms-box-sizing: content-box;
box-sizing: content-box;
border: 1px solid #444;
border-left-color: #000;
border-radius: 0 5px 5px 0;
box-shadow: 0 2px 0 #000;
color: #fff;
display: block;
float: left;
font-family: 'Cabin', helvetica, arial, sans-serif;
font-size: 13px;
font-weight: 400;
height: 40px;
line-height: 40px;
margin: 0;
padding: 0;
position: relative;
text-shadow: 0 -1px 0 #000;
width: 80px;
}
#webdesigntuts-workshop button:hover,
#webdesigntuts-workshop button:focus {
background: #292929;
background: -webkit-linear-gradient(#393939, #292929);
background: -moz-linear-gradient(#393939, #292929);
background: -o-linear-gradient(#393939, #292929);
background: -ms-linear-gradient(#393939, #292929);
background: linear-gradient(#393939, #292929);
color: #5f5;
outline: none;
}
#webdesigntuts-workshop button:active {
background: #292929;
background: -webkit-linear-gradient(#393939, #292929);
background: -moz-linear-gradient(#393939, #292929);
background: -o-linear-gradient(#393939, #292929);
background: -ms-linear-gradient(#393939, #292929);
background: linear-gradient(#393939, #292929);
box-shadow: 0 1px 0 #000, inset 1px 0 1px #222;
top: 1px;
}
#-webkit-keyframes glow {
0% {
border-color: #393;
box-shadow: 0 0 5px rgba(0, 255, 0, .2), inset 0 0 5px rgba(0, 255, 0, .1), 0 2px 0 #000;
}
100% {
border-color: #6f6;
box-shadow: 0 0 20px rgba(0, 255, 0, .6), inset 0 0 10px rgba(0, 255, 0, .4), 0 2px 0 #000;
}
}
#-moz-keyframes glow {
0% {
border-color: #393;
box-shadow: 0 0 5px rgba(0, 255, 0, .2), inset 0 0 5px rgba(0, 255, 0, .1), 0 2px 0 #000;
}
100% {
border-color: #6f6;
box-shadow: 0 0 20px rgba(0, 255, 0, .6), inset 0 0 10px rgba(0, 255, 0, .4), 0 2px 0 #000;
}
}
#-o-keyframes glow {
0% {
border-color: #393;
box-shadow: 0 0 5px rgba(0, 255, 0, .2), inset 0 0 5px rgba(0, 255, 0, .1), 0 2px 0 #000;
}
100% {
border-color: #6f6;
box-shadow: 0 0 20px rgba(0, 255, 0, .6), inset 0 0 10px rgba(0, 255, 0, .4), 0 2px 0 #000;
}
}
#-ms-keyframes glow {
0% {
border-color: #393;
box-shadow: 0 0 5px rgba(0, 255, 0, .2), inset 0 0 5px rgba(0, 255, 0, .1), 0 2px 0 #000;
}
100% {
border-color: #6f6;
box-shadow: 0 0 20px rgba(0, 255, 0, .6), inset 0 0 10px rgba(0, 255, 0, .4), 0 2px 0 #000;
}
}
#keyframes glow {
0% {
border-color: #393;
box-shadow: 0 0 5px rgba(0, 255, 0, .2), inset 0 0 5px rgba(0, 255, 0, .1), 0 2px 0 #000;
}
100% {
border-color: #6f6;
box-shadow: 0 0 20px rgba(0, 255, 0, .6), inset 0 0 10px rgba(0, 255, 0, .4), 0 2px 0 #000;
}
}
/*search end*/
.item-data {
width: 942px;
height: 800px;
background-color: #000000;
}
.item {
width: 942px;
height: 140px;
background-color: #4B3939;
border-bottom: #FFFFFF 1px solid;
padding-top: 20px;
}
.image-size {
background: url(images/jalal.jpg);
background-repeat: no-repeat;
width: 120px;
height: 95px;
border: #FFFFFF 1px solid;
box-shadow: #000000;
margin-left: 20px;
}
.text {
font-size: 18px;
color: #000000;
margin-left: 150px;
margin-top: -95px;
}
.text1 {
font-size: 12px;
color: #000000;
margin-left: 150px;
}
.rate_bar {
width: 150px;
height: 40px;
background-color: #FFFFFF;
margin-left: 400px;
margin-top: -55px;
}
article {
width: 60%;
height: 30%;
margin: 0 auto;
}
.p2 {
color: #FFFFFF;
font-size: 50px;
text-align: center;
}
.circle-area {
width: 1200px;
height: 180px;
margin: 0 auto;
position: static;
margin-top: 150px;
}
.myimg {
margin-top: 15px;
opacity: 1;
}
.circle {
float: left;
width: 150px;
height: 150px;
padding: 10px;
border: 2px solid #000000;
border-radius: 75px;
margin-left: 170px;
margin-top: 10px;
}
.circle:hover {
width: 150px;
height: 150px;
padding: 0px;
border: 2px solid #000000;
border-radius: 75px;
}
.small {
width: 120px;
height: 120px;
background-color: #2F9615;
border-radius: 60px;
}
.small:hover {
width: 150px;
height: 150px;
transform: scale(1);
background-color: #2F9615;
border-radius: 75px;
}
footer {
background-color: #000000;
margin-top: 27px;
opacity: .6;
width: 100%;
height: 60px;
position: absolute;
}
p {
color: #FFFFFF;
margin-left: 2px;
}
.p1 {
text-align: center;
color: #FFFFFF;
}
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>deals</title>
<link href="index.css" rel="stylesheet" type="text/css">
<meta name="viewport" content="width=device-width, initial-scale=1">
<!-- Latest compiled and minified CSS -->
<link rel="stylesheet" href="bootstrap-3.3.6-dist/css/bootstrap.css">
<link rel="stylesheet" href="bootstrap-3.3.6-dist/css/bootstrap.min.css">
<!-- Optional theme -->
<link rel="stylesheet" href="bootstrap-3.3.6-dist/css/bootstrap-theme.min.css">
<script src="bootstrap-3.3.6-dist/js/jquery-2.2.1.js"></script>
<!-- Latest compiled and minified JavaScript -->
<script src="bootstrap-3.3.6-dist/js/bootstrap.min.js"></script>
<!-- sidebar script-->
<script src="script.js"></script>
<link rel="stylesheet" href="//netdna.bootstrapcdn.com/font-awesome/4.2.0/css/font-awesome.min.css">
</head>
<body>
<div class="container-fluid">
<div class="row">
<div class="col-lg-12" >
<p class="hit-the-floor">Restaurant</p>
<p class="hit-the-floor1">Hunt</p>
</div>
</div>
<div class="row">
<div class="col-lg-12">
<div class="nav_custom">
<nav class="navbar" >
<div class="container-fluid">
<div class="navbar-header form-group">
<select class="navbar-toggle collapsed selectpicker
form-control" data-toggle="collapse" data-target="#hafiz"
style="background: #ffffff; color:#000000;">
<option value="">Go to...</option>
<option value="#">Home</option>
<option value="#">Menu</option>
<option value="#">Restaurant</option>
<option value="#">About</option>
</select>
</div>
<div class=" collapse navbar-collapse" id="hafiz">
<ul class="nav navbar-nav">
<li class="active">Home</li>
<li>Page 1</li>
<li>Page 2</li>
<li>Page 3</li>
<li>Sign Up</li>
<li>Login</li>
</ul>
</div>
</div>
</nav>
</div>
</div>
</div>
<div class="row">
<div class="col-lg-12">
<div class="location" >
<div class="row">
<div class="col-lg-6" align="">
<img class="img-responsive" src="images/location.png" alt="location"
width="40px" height="40px" />
</div>
<div class="col-lg-6">
<button id="b" type="button" class="btn btn-success">Change location
</button>
</div>
</div>
</div>
</div>
</div>
<div class="row">
<div class="col-lg-12">
<div class="search">
<form id="webdesigntuts-workshop" action="" method="">
<input type="search" placeholder="Search..." ><button> Search</button>
</form>
</div>
</div>
</div>
<div class="row">
<div class="col-sm-2">
<div class="left-sidebar">
<div id="cssmenu">
<ul>
<li class="has-sub"><span>Deals Filter</span>
<ul>
<li><span>All Deals (7)</span></li>
<li><span>Kids Deals (1)</span></li>
<li><span>Hyper Discount (2)</span></li>
<li><span>Lunch Deals (1)</span></li>
<li class="last"><span>Midnight Deals (1)</span></li>
</ul>
</li>
<li class="has-sub"><span>Cuisines</span>
<ul>
<li><span>Bakery (1)</span></li>
<li><span>BBQ (1)</span></li>
<li><span>Chinese(1)</span></li>
<li><span>Continental (2)</span></li>
<li><span>Mediterranean (1)</span></li>
<li><span>Italian (1)</span></li>
<li><span>Pakistani (3)</span></li>
<li><span>Pizza (7)</span></li>
<li><span>Frozen Yogurt (Froyo) (1)</span></li>
<li class="last"><span>Fast Food (11)</span></li>
</ul>
</li>
<li class="has-sub last"><span>Buduge</span>
<ul>
<li><span>About</span></li>
<li class="last"><span>Location</span></li>
</ul>
</li>
</ul>
</div>
</div>
</div>
<div class="col-lg-10">
<div class="item-data">
<div class="item">
<div class="image-size">
<img src="images/strip-sponsored.png" alt="img">
</div>
<p class="text">Jalal Sons, Allama Iqbal Twon</p>
<p class="text1">Bakery, Fast Food, Frozen Yogurt (Froyo)</p>
<div class="rate_bar">
</div>
</div>
<div class="item">
<div class="image-size">
<img src="images/strip-sponsored.png" alt="img">
</div>
<p class="text">Jalal Sons, Allama Iqbal Twon</p>
<p class="text1">Bakery, Fast Food, Frozen Yogurt (Froyo)</p>
<div class="rate_bar">
</div>
</div>
<div class="item">
<div class="image-size">
<img src="images/strip-sponsored.png" alt="img">
</div>
<p class="text">Jalal Sons, Allama Iqbal Twon</p>
<p class="text1">Bakery, Fast Food, Frozen Yogurt (Froyo)</p>
<div class="rate_bar">
</div>
</div>
<div class="item">
<div class="image-size">
<img src="images/strip-sponsored.png" alt="img">
</div>
<p class="text">Jalal Sons, Allama Iqbal Twon</p>
<p class="text1">Bakery, Fast Food, Frozen Yogurt (Froyo)</p>
<div class="rate_bar">
</div>
</div>
<div class="item">
<div class="image-size">
<img src="images/strip-sponsored.png" alt="img">
</div>
<p class="text">Jalal Sons, Allama Iqbal Twon</p>
<p class="text1">Bakery, Fast Food, Frozen Yogurt (Froyo)</p>
<div class="rate_bar">
</div>
</div>
</div>
</div>
</div>
</div>
</body>
</html>

Made some small changes into your code, you should check the bootstrap documentation for further informations. http://getbootstrap.com/2.3.2/scaffolding.html
Also check the changes in your divs & documentation about bootstrap table-responsive (http://getbootstrap.com/css/#tables)
When you want your page to be responsive, try not to fix items for instance width: 942px becomes max-width: 942px
/* CSS Document */
/*background--start-*/
body {
background: url(images/drinks.jpg) no-repeat center center fixed;
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
background-size: cover;
}
/*background--end-*/
/*Logo-- start--*/
.hit-the-floor {
color: #fff;
font-size: 6em;
margin-top: 20px;
font-weight: bold;
font-family: ruthie;
text-shadow: 0 1px 0 #ccc, 0 2px 0 #c9c9c9, 0 3px 0 #bbb, 0 4px 0 #b9b9b9, 0 5px 0 #aaa, 0 6px 1px rgba(0, 0, 0, .1), 0 0 5px rgba(0, 0, 0, .1), 0 1px 3px rgba(0, 0, 0, .3), 0 3px 5px rgba(0, 0, 0, .2), 0 5px 10px rgba(0, 0, 0, .25), 0 10px 10px rgba(0, 0, 0, .2), 0 20px 20px rgba(0, 0, 0, .15);
}
.hit-the-floor {
text-align: center;
}
.hit-the-floor1 {
color: #fff;
font-size: 4em;
margin-left: 300px;
margin-top: -50px;
font-weight: bold;
font-family: ruthie;
text-shadow: 0 1px 0 #ccc, 0 2px 0 #c9c9c9, 0 3px 0 #bbb, 0 4px 0 #b9b9b9, 0 5px 0 #aaa, 0 6px 1px rgba(0, 0, 0, .1), 0 0 5px rgba(0, 0, 0, .1), 0 1px 3px rgba(0, 0, 0, .3), 0 3px 5px rgba(0, 0, 0, .2), 0 5px 10px rgba(0, 0, 0, .25), 0 10px 10px rgba(0, 0, 0, .2), 0 20px 20px rgba(0, 0, 0, .15);
}
.hit-the-floor1 {
text-align: center;
}
/*Logo--End--*/
/*navbar start*/
.nav_custom {
margin: 0 auto;
width: 950px;
height: 60px;
position: relative;
text-align: center;
}
.nav > li {
margin-right: 10px;
background: #000000;
opacity: 0.5;
width: 130px;
}
/*navbar end*/
/*location start*/
#b {
margin: 0 auto;
}
.location {
width: 87%;
height: 45px;
background-color: #C1BEBE;
margin-bottom: 20px;
margin: 0 auto;
}
/*Location end*/
.boddy {
width: 100%;
height: 800px;
}
/* Left Side bar*/
.left-sidebar {
float: left;
width: 200px;
height: 800px;
position: fixed;
}
/* Base Styles */
#cssmenu,
#cssmenu ul,
#cssmenu li,
#cssmenu a {
margin: 0;
padding: 0;
border: 0;
list-style: none;
font-weight: normal;
text-decoration: none;
line-height: 1;
font-family: 'Open Sans', sans-serif;
font-size: 14px;
position: relative;
}
#cssmenu a {
line-height: 1.3;
}
#cssmenu {
width: 200px;
}
#cssmenu > ul > li > a {
padding-right: 40px;
font-size: 25px;
font-weight: bold;
display: block;
background: #03FE91;
color: #ffffff;
border-bottom: 1px solid #5e071b;
text-transform: uppercase;
}
#cssmenu > ul > li > a > span {
background: #26C17E;
padding: 10px;
display: block;
font-size: 13px;
font-weight: 300;
}
#cssmenu > ul > li > a:hover {
text-decoration: none;
}
#cssmenu > ul > li.active {
border-bottom: none;
}
#cssmenu > ul > li.active > a {
color: #fff;
}
#cssmenu > ul > li.active > a span {
background: #26C17E;
}
#cssmenu span.cnt {
position: absolute;
top: 8px;
right: 15px;
padding: 0;
margin: 0;
background: none;
}
/* Sub menu */
#cssmenu ul ul {
display: none;
}
#cssmenu ul ul li {
border: 1px solid #e0e0e0;
border-top: 0;
}
#cssmenu ul ul a {
padding: 10px;
display: block;
color: #000000;
font-size: 13px;
}
#cssmenu ul ul a:hover {
color: #26C17E;
}
#cssmenu ul ul li.odd {
background: #f4f4f4;
}
#cssmenu ul ul li.even {
background: #fff;
}
/*end left side bar*/
.MainArea {
width: 1148px;
height: 800px;
margin-left: 200px;
margin-top: -20px;
}
/* search start */
.search {
width: 87%;
height: 55px;
background-color: #8F8B8B;
margin-top: -20px;
margin: 0 auto;
padding-top: 5px;
padding-left: 10px;
}
#webdesigntuts-workshop:after {
content: '';
display: block;
left: 50%;
margin: 0 0 0 -400px;
position: absolute;
width: 800px;
}
#webdesigntuts-workshop:before {
background: #444;
background: -webkit-linear-gradient(left, #151515, #444, #151515);
background: -moz-linear-gradient(left, #151515, #444, #151515);
background: -o-linear-gradient(left, #151515, #444, #151515);
background: -ms-linear-gradient(left, #151515, #444, #151515);
background: linear-gradient(left, #151515, #444, #151515);
top: 192px;
}
#webdesigntuts-workshop:after {
background: #000;
background: -webkit-linear-gradient(left, #151515, #000, #151515);
background: -moz-linear-gradient(left, #151515, #000, #151515);
background: -o-linear-gradient(left, #151515, #000, #151515);
background: -ms-linear-gradient(left, #151515, #000, #151515);
background: linear-gradient(left, #151515, #000, #151515);
top: 191px;
}
#webdesigntuts-workshop form {
background: #111;
background: -webkit-linear-gradient(#1b1b1b, #111);
background: -moz-linear-gradient(#1b1b1b, #111);
background: -o-linear-gradient(#1b1b1b, #111);
background: -ms-linear-gradient(#1b1b1b, #111);
background: linear-gradient(#1b1b1b, #111);
border: 1px solid #000;
border-radius: 5px;
box-shadow: inset 0 0 0 1px #272727;
display: inline-block;
font-size: 0px;
margin: 150px auto 0;
padding: 20px;
position: relative;
z-index: 1;
}
#webdesigntuts-workshop input {
background: #222;
background: -webkit-linear-gradient(#333, #222);
background: -moz-linear-gradient(#333, #222);
background: -o-linear-gradient(#333, #222);
background: -ms-linear-gradient(#333, #222);
background: linear-gradient(#333, #222);
border: 1px solid #444;
border-radius: 5px 0 0 5px;
box-shadow: 0 2px 0 #000;
color: #888;
display: block;
float: left;
font-family: 'Cabin', helvetica, arial, sans-serif;
font-size: 13px;
font-weight: 400;
height: 42px;
margin: 0;
padding: 0 10px;
text-shadow: 0 -1px 0 #000;
width: 200px;
}
#ie #webdesigntuts-workshop input {
line-height: 40px;
}
#webdesigntuts-workshop input::-webkit-input-placeholder {
color: #888;
}
#webdesigntuts-workshop input:-moz-placeholder {
color: #888;
}
#webdesigntuts-workshop input:focus {
-webkit-animation: glow 800ms ease-out infinite alternate;
-moz-animation: glow 800ms ease-out infinite alternate;
-o-animation: glow 800ms ease-out infinite alternate;
-ms-animation: glow 800ms ease-out infinite alternate;
animation: glow 800ms ease-out infinite alternate;
background: #222922;
background: -webkit-linear-gradient(#333933, #222922);
background: -moz-linear-gradient(#333933, #222922);
background: -o-linear-gradient(#333933, #222922);
background: -ms-linear-gradient(#333933, #222922);
background: linear-gradient(#333933, #222922);
border-color: #393;
box-shadow: 0 0 5px rgba(0, 255, 0, .2), inset 0 0 5px rgba(0, 255, 0, .1), 0 2px 0 #000;
color: #efe;
outline: none;
}
#webdesigntuts-workshop input:focus::-webkit-input-placeholder {
color: #efe;
}
#webdesigntuts-workshop input:focus:-moz-placeholder {
color: #efe;
}
#webdesigntuts-workshop button {
background: #222;
background: -webkit-linear-gradient(#333, #222);
background: -moz-linear-gradient(#333, #222);
background: -o-linear-gradient(#333, #222);
background: -ms-linear-gradient(#333, #222);
background: linear-gradient(#333, #222);
-webkit-box-sizing: content-box;
-moz-box-sizing: content-box;
-o-box-sizing: content-box;
-ms-box-sizing: content-box;
box-sizing: content-box;
border: 1px solid #444;
border-left-color: #000;
border-radius: 0 5px 5px 0;
box-shadow: 0 2px 0 #000;
color: #fff;
display: block;
float: left;
font-family: 'Cabin', helvetica, arial, sans-serif;
font-size: 13px;
font-weight: 400;
height: 40px;
line-height: 40px;
margin: 0;
padding: 0;
position: relative;
text-shadow: 0 -1px 0 #000;
width: 80px;
}
#webdesigntuts-workshop button:hover,
#webdesigntuts-workshop button:focus {
background: #292929;
background: -webkit-linear-gradient(#393939, #292929);
background: -moz-linear-gradient(#393939, #292929);
background: -o-linear-gradient(#393939, #292929);
background: -ms-linear-gradient(#393939, #292929);
background: linear-gradient(#393939, #292929);
color: #5f5;
outline: none;
}
#webdesigntuts-workshop button:active {
background: #292929;
background: -webkit-linear-gradient(#393939, #292929);
background: -moz-linear-gradient(#393939, #292929);
background: -o-linear-gradient(#393939, #292929);
background: -ms-linear-gradient(#393939, #292929);
background: linear-gradient(#393939, #292929);
box-shadow: 0 1px 0 #000, inset 1px 0 1px #222;
top: 1px;
}
#-webkit-keyframes glow {
0% {
border-color: #393;
box-shadow: 0 0 5px rgba(0, 255, 0, .2), inset 0 0 5px rgba(0, 255, 0, .1), 0 2px 0 #000;
}
100% {
border-color: #6f6;
box-shadow: 0 0 20px rgba(0, 255, 0, .6), inset 0 0 10px rgba(0, 255, 0, .4), 0 2px 0 #000;
}
}
#-moz-keyframes glow {
0% {
border-color: #393;
box-shadow: 0 0 5px rgba(0, 255, 0, .2), inset 0 0 5px rgba(0, 255, 0, .1), 0 2px 0 #000;
}
100% {
border-color: #6f6;
box-shadow: 0 0 20px rgba(0, 255, 0, .6), inset 0 0 10px rgba(0, 255, 0, .4), 0 2px 0 #000;
}
}
#-o-keyframes glow {
0% {
border-color: #393;
box-shadow: 0 0 5px rgba(0, 255, 0, .2), inset 0 0 5px rgba(0, 255, 0, .1), 0 2px 0 #000;
}
100% {
border-color: #6f6;
box-shadow: 0 0 20px rgba(0, 255, 0, .6), inset 0 0 10px rgba(0, 255, 0, .4), 0 2px 0 #000;
}
}
#-ms-keyframes glow {
0% {
border-color: #393;
box-shadow: 0 0 5px rgba(0, 255, 0, .2), inset 0 0 5px rgba(0, 255, 0, .1), 0 2px 0 #000;
}
100% {
border-color: #6f6;
box-shadow: 0 0 20px rgba(0, 255, 0, .6), inset 0 0 10px rgba(0, 255, 0, .4), 0 2px 0 #000;
}
}
#keyframes glow {
0% {
border-color: #393;
box-shadow: 0 0 5px rgba(0, 255, 0, .2), inset 0 0 5px rgba(0, 255, 0, .1), 0 2px 0 #000;
}
100% {
border-color: #6f6;
box-shadow: 0 0 20px rgba(0, 255, 0, .6), inset 0 0 10px rgba(0, 255, 0, .4), 0 2px 0 #000;
}
}
/*search end*/
.item-data {
width: 942px;
height: 800px;
background-color: #000000;
}
.item {
max-width: 942px;
height: 140px;
background-color: #4B3939;
border-bottom: #FFFFFF 1px solid;
padding-top: 20px;
}
.image-size {
background: url(images/jalal.jpg);
background-repeat: no-repeat;
width: 120px;
height: 95px;
border: #FFFFFF 1px solid;
box-shadow: #000000;
margin-left: 20px;
}
.text {
font-size: 18px;
color: #000000;
margin-left: 150px;
margin-top: -95px;
}
.text1 {
font-size: 12px;
color: #000000;
margin-left: 150px;
}
.rate_bar {
width: 150px;
height: 40px;
background-color: #FFFFFF;
float:right;
position: relative;
}
article {
width: 60%;
height: 30%;
margin: 0 auto;
}
.p2 {
color: #FFFFFF;
font-size: 50px;
text-align: center;
}
.circle-area {
width: 1200px;
height: 180px;
margin: 0 auto;
position: static;
margin-top: 150px;
}
.myimg {
margin-top: 15px;
opacity: 1;
}
.circle {
float: left;
width: 150px;
height: 150px;
padding: 10px;
border: 2px solid #000000;
border-radius: 75px;
margin-left: 170px;
margin-top: 10px;
}
.circle:hover {
width: 150px;
height: 150px;
padding: 0px;
border: 2px solid #000000;
border-radius: 75px;
}
.small {
width: 120px;
height: 120px;
background-color: #2F9615;
border-radius: 60px;
}
.small:hover {
width: 150px;
height: 150px;
transform: scale(1);
background-color: #2F9615;
border-radius: 75px;
}
footer {
background-color: #000000;
margin-top: 27px;
opacity: .6;
width: 100%;
height: 60px;
position: absolute;
}
p {
color: #FFFFFF;
margin-left: 2px;
}
.p1 {
text-align: center;
color: #FFFFFF;
}
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>deals</title>
<link href="style.css" rel="stylesheet" type="text/css">
<meta name="viewport" content="width=device-width, initial-scale=1">
<!-- Latest compiled and minified CSS -->
<link rel="stylesheet" href="bootstrap-3.3.6-dist/css/bootstrap.css">
<link rel="stylesheet" href="bootstrap-3.3.6-dist/css/bootstrap.min.css">
<!-- Optional theme -->
<link rel="stylesheet" href="bootstrap-3.3.6-dist/css/bootstrap-theme.min.css">
<script src="bootstrap-3.3.6-dist/js/jquery-2.2.1.js"></script>
<!-- Latest compiled and minified JavaScript -->
<script src="bootstrap-3.3.6-dist/js/bootstrap.min.js"></script>
<!-- sidebar script-->
<script src="script.js"></script>
<link rel="stylesheet" href="//netdna.bootstrapcdn.com/font-awesome/4.2.0/css/font-awesome.min.css">
</head>
<body>
<div class="container-fluid">
<div class="row">
<div class="col-lg-12" >
<p class="hit-the-floor">Restaurant</p>
<p class="hit-the-floor1">Hunt</p>
</div>
</div>
<div class="row">
<div class="col-lg-12">
<div class="nav_custom">
<nav class="navbar" >
<div class="container-fluid">
<div class="navbar-header form-group">
<select class="navbar-toggle collapsed selectpicker
form-control" data-toggle="collapse" data-target="#hafiz"
style="background: #ffffff; color:#000000;">
<option value="">Go to...</option>
<option value="#">Home</option>
<option value="#">Menu</option>
<option value="#">Restaurant</option>
<option value="#">About</option>
</select>
</div>
<div class=" collapse navbar-collapse" id="hafiz">
<ul class="nav navbar-nav">
<li class="active">Home</li>
<li>Page 1</li>
<li>Page 2</li>
<li>Page 3</li>
<li>Sign Up</li>
<li>Login</li>
</ul>
</div>
</div>
</nav>
</div>
</div>
</div>
<div class="row">
<div class="col-lg-12">
<div class="location" >
<div class="row">
<div class="col-lg-6" align="">
<img class="img-responsive" src="images/location.png" alt="location"
width="40px" height="40px" />
</div>
<div class="col-lg-6">
<button id="b" type="button" class="btn btn-success">Change location
</button>
</div>
</div>
</div>
</div>
</div>
<div class="row">
<div class="col-lg-12">
<div class="search">
<form id="webdesigntuts-workshop" action="" method="">
<input type="search" placeholder="Search..." ><button> Search</button>
</form>
</div>
</div>
</div>
<div class="row">
<div class="col-sm-2">
<div class="left-sidebar">
<div id="cssmenu">
<ul>
<li class="has-sub"><span>Deals Filter</span>
<ul>
<li><span>All Deals (7)</span></li>
<li><span>Kids Deals (1)</span></li>
<li><span>Hyper Discount (2)</span></li>
<li><span>Lunch Deals (1)</span></li>
<li class="last"><span>Midnight Deals (1)</span></li>
</ul>
</li>
<li class="has-sub"><span>Cuisines</span>
<ul>
<li><span>Bakery (1)</span></li>
<li><span>BBQ (1)</span></li>
<li><span>Chinese(1)</span></li>
<li><span>Continental (2)</span></li>
<li><span>Mediterranean (1)</span></li>
<li><span>Italian (1)</span></li>
<li><span>Pakistani (3)</span></li>
<li><span>Pizza (7)</span></li>
<li><span>Frozen Yogurt (Froyo) (1)</span></li>
<li class="last"><span>Fast Food (11)</span></li>
</ul>
</li>
<li class="has-sub last"><span>Buduge</span>
<ul>
<li><span>About</span></li>
<li class="last"><span>Location</span></li>
</ul>
</li>
</ul>
</div>
</div>
</div>
<div class="table-responsive">
<div class="item">
<div class="image-size">
<img src="images/strip-sponsored.png" alt="img">
</div>
<p class="text">Jalal Sons, Allama Iqbal Twon</p>
<p class="text1">Bakery, Fast Food, Frozen Yogurt (Froyo)</p>
<div class="rate_bar">
</div>
</div>
<div class="item">
<div class="image-size">
<img src="images/strip-sponsored.png" alt="img">
</div>
<p class="text">Jalal Sons, Allama Iqbal Twon</p>
<p class="text1">Bakery, Fast Food, Frozen Yogurt (Froyo)</p>
<div class="rate_bar">
</div>
</div>
<div class="item">
<div class="image-size">
<img src="images/strip-sponsored.png" alt="img">
</div>
<p class="text">Jalal Sons, Allama Iqbal Twon</p>
<p class="text1">Bakery, Fast Food, Frozen Yogurt (Froyo)</p>
<div class="rate_bar">
</div>
</div>
<div class="item">
<div class="image-size">
<img src="images/strip-sponsored.png" alt="img">
</div>
<p class="text">Jalal Sons, Allama Iqbal Twon</p>
<p class="text1">Bakery, Fast Food, Frozen Yogurt (Froyo)</p>
<div class="rate_bar">
</div>
</div>
<div class="item">
<div class="image-size">
<img src="images/strip-sponsored.png" alt="img">
</div>
<p class="text">Jalal Sons, Allama Iqbal Twon</p>
<p class="text1">Bakery, Fast Food, Frozen Yogurt (Froyo)</p>
<div class="rate_bar">
</div>
</div>
</div>
</div>
</div>
</body>
</html>
Hope this helps!

Form not visible on mobiles

html, body {
-webkit-font-smoothing: antialiased;
height: 100%;
/* The html and body elements cannot have any padding or margin. */
font-family: 'Open Sans', sans-serif;
background-color: #f4f5f6;
}
h1 {
font-weight: 700;
}
h2 {
letter-spacing: -1px;
font-weight: 300;
margin-top: 0;
}
h3 {
letter-spacing: -1px;
font-weight: 100;
margin-top: 0;
font-size: 4em;
}
iframe{
width: 100%;
border: 0;
}
/*#features,#support,#testimonials,#news, #bottom{background-color: #f4f5f6;}*/
/* Wrapper for page content to push down footer */
#wrap {
min-height: 100%;
height: auto!important;
height: 100%;
/* Negative indent footer by it's height */
margin: 0 auto -60px;
color: #333;
}
/* Set the fixed height of the footer here */
#push {
height: 60px;
}
/*Navbar Customizations*/
.navbar-purity {
background: #2D3538;
background-color: #2D3538;
filter: none;
background-image: none;
border: none;
box-shadow: none;
-webkit-box-shadow: none;
-mox-box-shadow: none;
-webkit-transition: background .3s ease;
-moz-transition: background .3s ease;
-o-transition: background .3s ease;
-ms-transition: background .3s ease;
transition: background .3s ease;
}
.navbar-purity {
background: rgba(46, 46, 46, 0.35);
border: none;
}
.navbar-purity .navbar-brand {
padding: 10px 5px;
}
.navbar-purity .navbar-toggle{
border-color: transparent;
}
.navbar-purity .navbar-toggle {
border-color: transparent;
}
.navbar-purity .navbar-toggle:hover,
.navbar-purity .navbar-toggle:focus {
background-color: #333;
}
.navbar-purity .navbar-toggle .icon-bar {
background-color: #fff;
}
.navbar-purity.sticky {
background: rgba(0, 0, 0, 0.7);
border-bottom: none;
}
.navbar-purity.sticky .nav > li > a:hover {
color: #fff;
background: none;
box-shadow: none;
-webkit-box-shadow: none;
-mox-box-shadow: none;
}
.navbar-purity.sticky .nav > li.active a {
background: transparent;
color: #fff;
box-shadow: none;
-webkit-box-shadow: none;
-mox-box-shadow: none;
}
.navbar-purity.sticky .nav > li a {
background: transparent;
color: #b4b4b4;
box-shadow: none;
-webkit-box-shadow: none;
-mox-box-shadow: none;
}
.navbar-purity.sticky .dropdown-menu li >a {
display: block;
clear: both;
font-weight: 400;
line-height: 20px;
white-space: nowrap;
}
.navbar-purity .sticky .dropdown-menu li > a:hover, .navbar-purity .sticky .dropdown-menu li > a:focus, .navbar-purity .sticky .dropdown-submenu:hover > a {
text-decoration: none;
color: #FFF;
background-color: #292929;
background-image: none;
}
.navbar-purity .dropdown-menu li > a:hover, .navbar .dropdown-menu li > a:focus, .navbar .dropdown-submenu:hover > a {
text-decoration: none;
color: #FFF;
background-color: #292929;
background-image: none;
}
.navbar .nav > li > .dropdown-menu:after {
border-bottom: 6px solid #383838;
}
.dropdown-menu {
margin: 5px 0 0;
border-radius: 0;
-webkit-border-radius: 0;
-moz-border-radius: 0;
background-color: #383838;
padding: 0;
border: 0;
;
}
.dropdown-menu li > a {
color: #a5a5a5;
padding: 10px;
border-bottom: 1px solid #474747;
}
.navbar-fixed-top .navbar-inner, .navbar-static-top .navbar-inner {
box-shadow: none;
-webkit-box-shadow: none;
-mox-box-shadow: none;
}
.navbar .nav > li > a {
text-shadow: none;
color: #d3d3d3;
font-size: 15px;
font-weight: 700;
text-decoration: none;
vertical-align: middle;
font-size: 15px!important;
padding: 18px;
-webkit-box-align: center;
-moz-box-align: center;
-o-box-align: center;
box-align: center;
-webkit-transition: color .3s ease;
-moz-transition: color .3s ease;
-o-transition: color .3s ease;
-ms-transition: color .3s ease;
transition: color .3s ease;
}
.navbar .nav > li > a:hover {
color: #999;
background: rgba(0, 0, 0, 0.36);
box-shadow: none;
-webkit-box-shadow: none;
-mox-box-shadow: none;
}
.navbar .nav > li.active a {
background: rgba(0, 0, 0, 0.36);
color: #999;
box-shadow: none;
-webkit-box-shadow: none;
-mox-box-shadow: none;
}
.navbar .nav > li.active a:hover {
background: rgba(0, 0, 0, 0.36);
color: #C6D0D3;
box-shadow: none;
-webkit-box-shadow: none;
-mox-box-shadow: none;
}
/* Nav bar CSS END*/
/*General Items CSS*/
#main-media {
padding-bottom: 10px;
}
section {
position: relative;
}
header {
background: url(../images/header2.jpg) no-repeat fixed #020202;
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
background-size: cover;
}
.btn-landing {
text-shadow: 0 -1px 0 #6c9a15;
color: #fff;
background-color: #8AB833;
background-image: 0;
background-image: 0;
background-image: 0 to(#6c9a15));
background-image: 0;
background-image: 0;
background-image: linear-gradient(top, #a8d651, #6c9a15);
filter: progid: DXImageTransform.Microsoft.gradient(startColorstr='#a8d651', endColorstr='#6c9a15', GradientType=0);
border-color: #8AB833 #6c9a15 #6c9a15 #8AB833;
border-color: rgba(0, 0, 0, 0.25) rgba(0, 0, 0, 0.35) rgba(0, 0, 0, 0.35) rgba(0, 0, 0, 0.25);
}
.btn-landing:hover, .btn-landing:active, .btn-landing.active, .btn-landing.disabled, .btn-landing[disabled] {
background-color: #6c9a15;
}
.btn-landing:hover {
color: #fffffb;
text-shadow: 0 -1px 0 #4e7c00;
}
.btn-landing:focus {
color: #eeff97;
-webkit-box-shadow: inset 0 2px 4px rgba(0, 0, 0, 0.15), 0 1px 2px rgba(0, 0, 0, 0.05);
-moz-box-shadow: inset 0 2px 4px rgba(0, 0, 0, 0.15), 0 1px 2px rgba(0, 0, 0, 0.05);
box-shadow: inset 0 2px 4px rgba(0, 0, 0, 0.15), 0 1px 2px rgba(0, 0, 0, 0.05);
border-color: #8AB833 #6c9a15 #6c9a15 #8AB833;
border-color: rgba(0, 0, 0, 0.25) rgba(0, 0, 0, 0.35) rgba(0, 0, 0, 0.35) rgba(0, 0, 0, 0.25);
}
.btn-landing.active, .btn-landing:active {
background-image: none;
-webkit-box-shadow: inset 0 2px 4px rgba(0, 0, 0, 0.15), 0 1px 2px rgba(0, 0, 0, 0.05);
-moz-box-shadow: inset 0 2px 4px rgba(0, 0, 0, 0.15), 0 1px 2px rgba(0, 0, 0, 0.05);
box-shadow: inset 0 2px 4px rgba(0, 0, 0, 0.15), 0 1px 2px rgba(0, 0, 0, 0.05);
color: #eeff97;
}
.btn-landing {
font-family: Open Sans, sans-serif;
min-width: 200px;
padding: 20px;
font-size: 19px!important;
font-weight: 300;
background: #8AB833;
border-radius: 0;
When I view my page on a pc or tablet the sign up form is visible but if I view it on a mobile the form is not displayed? This has been driving me nuts for the last 4 hours and I can't seem to find the solution!
Here is my source
<!--################ HEADER START ################-->
<header id="top" data-stellar-background-ratio="0">
<div class="container home">
<div class="flexslider home">
<ul class="slides">
<li class="margintop10p">
<h1>Set Your Course For The Life You <span style="color: #f4f400"> Always Wanted</span></h1>
</li>
</ul>
</div>
<div class="col-md-12">
<div class="subscribe">
<center>
<h2 class="info-text">Sign Up For Your FREE Introductory Session.</h2>
<h4 class="info-text"> <span style="color: #FFFFFF">Discover the power of the subconscious and how to use it to live a life that you love!</span></h4>
<div class="row">
<form class="form-inline" class="infusion-form" accept-charset="UTF-8" action="https://zi258.infusionsoft.com/app/form/process/2ae00069f47efab206dbbafa757ff586" method="POST" target="_blank">
<input name="inf_form_xid" type="hidden" value="2ae00069f47efab206dbbafa757ff586" />
<input name="inf_form_name" type="hidden" value="Free Session Sign Up" />
<input name="infusionsoft_version" type="hidden" value="1.45.0.48" />
<div class="form-group">
<label class="sr-only" for="inf_field_FirstName">First Name</label>
<input class="form-control" class="infusion-field-input-container" id="inf_field_FirstName" name="inf_field_FirstName" type="text" placeholder="Enter first name" />
</div>
<div class="form-group">
<label class="sr-only" for="inf_field_Email">Email</label>
<input class="form-control" class="infusion-field-input-container" id="inf_field_Email" name="inf_field_Email" type="email" placeholder="Enter email"/>
<input class="btn btn-success btn-fill" type="submit" value="Sign Up" target="_blank"/>
</div>
</form>
</div>
</center>
</div>
</div>
<div class="social-header hidden-phone">
</div>
</div>
<div id="home-arrow" class="hidden-phone">
<i class="icon-double-angle-down icon-3x" id="iconHome"></i>
</div>
</header>
<!--################ HEADER END ################-->

It's hard to tell, but I believe it's due to your fixed height header#top.
I inspected the form to get it up in the inspection panel, then I used the chrome device emulator and selected 'Samsung Galaxy S III'. When I went into this new view, the form wasn't there. As I already selected the element, the DOM highlight showed that it was below the next content. I tried using position:absolute; z-index:10; and surely enough it was just in the wrong position. To fix this I went through all the element's ancestors and discovered it was header#top's height:...px (sorry I only just realised this value is generated from screen height at run time so won't be there in your file...). Removing this fixes the problem - I think. Hard to tell without testing it for real - after all, I only emulated.
So to fix it, try adding this to header{...}
height: auto!important;
min-height: 100vh;

Menus come down on browser resize

I have been facing problem for my horizontal menu bar code.
This menu bar displays correctly for 1366 x 768 resolution
but after pressing ctrl - short key
when I reduce browser size using ctrl - short key my menus come down. I have tried both em and px units to be used for this problem but it does not seem to solve the problem. I want to clarify that menu bar must be in center as the other things in whole page and should be expanded for the whole 960px setting for wrapper. I need help for sorting out this problem.
Below is my source code
HTML
<nav>
<div class="nav_wrapper">
<div class="menu_box">
<div id='cssmenu'>
<ul>
<li><span>Home</span></li>
<li><a href='#'><span>About Us</span></a></li>
<li><a href='#'><span>Courses</span></a>
<ul>
<li><a href='index.php'>AGP Program</a></li>
<li><a href='index.php'>Web Program</a></li>
</ul>
</li>
<li><a href='#'><span>Partners</span></a></li>
<li><a href='#'><span>Consultancy</span></a></li>
<li><a href='#'><span>News n Events</span></a></li>
<li><a href='#'><span>Gallery</span></a></li>
<li><a href='#'><span>Contact</span></a></li>
</ul>
</div>
</div>
</div>
</nav>
CSS
/* MEDIA QUERIES FOR A RESPONSIVE LAYOUT */
#cssmenu,
#cssmenu ul,
#cssmenu li,
#cssmenu a {
margin: 0;
padding: 0;
border: 0;
list-style: none;
font-weight: normal;
text-decoration: none;
line-height: 1;
font-family: 'Arial', sans-serif;
letter-spacing:0.4px;
font-size: 14px;
position: relative;
}
#cssmenu a {
line-height: 1.5;
}
#cssmenu {
width: 100%;
background: #fff;
}
#cssmenu > ul {
border: 1px solid #000000;
margin-left:auto;
margin-right:auto;
-moz-box-shadow: inset 1px 1px 0 rgba(255, 255, 255, 0.2);
-webkit-box-shadow: inset 1px 1px 0 rgba(255, 255, 255, 0.2);
box-shadow: inset 1px 1px 0 rgba(255, 255, 255, 0.2);
background: #565656;
background: -moz-linear-gradient(#565656 0%, #323232 100%);
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%, #565656), color-stop(100%, #323232));
background: -webkit-linear-gradient(#565656 0%, #323232 100%);
background: linear-gradient(#565656 0%, #323232 100%);
}
#cssmenu > ul:after {
clear: both;
content: '';
display: table;
}
#media all and (max-width: 480px) {
#cssmenu > ul {
max-height: 32px;
overflow: hidden;
-webkit-transition: max-height 0.5s;
transition: max-height 0.5s;
}
#cssmenu.expand ul {
max-height: 900px;
}
}
#cssmenu > ul > li {
border-right: 1px solid #000000;
-moz-box-shadow: 1px 0 0 rgba(255, 255, 255, 0.2);
-webkit-box-shadow: 1px 0 0 rgba(255, 255, 255, 0.2);
box-shadow: 1px 0 0 rgba(255, 255, 255, 0.2);
float: left;
}
#cssmenu > ul > li.mobile {
display: none;
}
#cssmenu > ul > li.active {
background: #444444;
background: -moz-linear-gradient(#444444 0%, #323232 100%);
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%, #444444), color-stop(100%, #323232));
background: -webkit-linear-gradient(#444444 0%, #323232 100%);
background: linear-gradient(#444444 0%, #323232 100%);
}
#media all and (max-width: 480px) {
#cssmenu > ul > li {
border-right:1px solid #000000;
-moz-box-shadow: 0 0 0 transparent;
-webkit-box-shadow: 0 0 0 transparent;
box-shadow: 0 0 0 transparent;
display: block;
float: none;
}
#cssmenu > ul > li.mobile {
display: block;
}
#cssmenu > ul > li.mobile i {
float: right;
font-style: normal;
}
}
#cssmenu > ul > li:last-child {
border-right: 0px solid #000000;
-moz-box-shadow: 0 0 0 transparent;
-webkit-box-shadow: 0 0 0 transparent;
box-shadow: 0 0 0 transparent;
-webkit-border-radius: 0 0px 4px 0;
-moz-border-radius: 0 0px 4px 0;
border-radius: 0px;
}
#cssmenu > ul > li:last-child ul {
left: auto;
right: 0;
}
#cssmenu > ul > li.mobile {
border-right: 0 none;
-moz-box-shadow: 0 0 0 transparent;
-webkit-box-shadow: 0 0 0 transparent;
box-shadow: 0 0 0 transparent;
}
#cssmenu > ul > li > a {
margin: 0 0 2px 0;
font-size: 12px;
display: block;
color: #ffffff;
text-shadow: 0 1px 1px #000;
}
#cssmenu > ul > li > a > span {
display: block;
padding: 6px 2.61em;
font-weight: bold;
}
#cssmenu > ul > li > a:hover {
text-decoration: none;
}
#cssmenu > ul > li.active {
border-bottom: none;
}
#cssmenu > ul > li.active > a {
color: #fff;
text-shadow: 0 1px 1px #000;
}
/* Sub menu */
#cssmenu ul ul {
background: linear-gradient(to bottom, #333333 0%, #000000 100%) repeat scroll 0 0 rgba(0, 0, 0, 0);border: 1px solid #e5e5e5;
-webkit-border-radius: 4px;
-moz-border-radius: 4px;
border-radius: 2px;
-moz-box-shadow: 1px 1px 3px rgba(0, 0, 0, 0.25);
-webkit-box-shadow: 1px 1px 3px rgba(0, 0, 0, 0.25);
box-shadow: 1px 1px 3px rgba(0, 0, 0, 0.25);
padding: 5px 12px;
display: none;
position: absolute;
top: 33px;
left: 0;
width: 110px;
z-index: 1;
}
#media all and (max-width: 480px) {
#cssmenu ul ul {
position: relative;
top: 0;
width: 92%;
}
}
#cssmenu ul ul li {
padding: 3px 0;
}
#cssmenu ul ul a {
color: #999999;
display: block;
font-size: 12px;
font-weight: bold;
}
#cssmenu ul ul li a:hover {
color: #ffffff;
}
/* Menus */
#media only screen and (min-width: 1000px)
{
.middle_section{
width:100%;
background-color:#D6D6D6;
/* background:linear-gradient(to bottom, #C40302 0%, #9E0302 100%) repeat scroll 0 0 rgba(0, 0, 0, 0); */
}
nav{
background: linear-gradient(#565656 0%, #323232 100%) repeat scroll 0 0 rgba(0, 0, 0, 0);
clear: both;
padding-bottom:10px;
padding-top:10px;
position: relative;
width:100%;
}
.nav_wrapper{
background: linear-gradient(#565656 0%, #323232 100%) repeat scroll 0 0 rgba(0, 0, 0, 0);
width:960px;
margin-left:auto;
margin-right:auto;
}
}

This might be simply solved by adding min-width to on of the wraping elements, in this case I finde it to work better when applied to "nav_wrapper". Also, when working with an element bigger than the display, it's good to have no margin in the body element, so I changed that too.
Here's the changes I made
CSS
body{
margin: 0px;
}
.nav_wrapper{
min-width: 980px;
}
LIVE DEMO

How come my container's are displaying a white background?

I'm using the Nathan Smith Grid System and everything I wrap with the "container_12" class has a white background. What I want is it to be transparent.
Example: http://jsfiddle.net/JordanSimps/RZvxn/1/
HTML:
<!-- Beginning of the blue top header -->
<div class="top-header-wrap">
<div class="container_12">
<div class="top-header">
<div class="grid_2">
<img class="hover" src="http://www.dubstepcast.com/images/phone.png" /> (586) 997-9490
</div>
<div class="grid_3">
<img src="http://www.dubstepcast.com/images/mail.png" /> info#experienceheritage.org
</div>
<div id="social">
<div class="grid_7">
<ul>
<li id="twitter"><img id="twitter" src="http://www.dubstepcast.com/images/twitter.png" /></li>
<li id="pinterest"><img id="pinterest" src="http://www.dubstepcast.com/images/pinterest.png" /></li>
<li id="facebook"><img id="facebook" src="http://www.dubstepcast.com/images/facebook.png" /></li>
<li id="google"><img id="google" src="http://www.dubstepcast.com/images/google.png" /></li>
</ul>
</div>
</div>
</div>
</div>
</div>
<!-- End of the blue top header -->
<!-- Beginning of the second header - Logo & Navigation buttons -->
<div class="container_12">
<div class="bottom-header">
<!-- LOGO BEGINS HERE -->
<div class="grid_2">
<p><img class="logo" src="http://www.dubstepcast.com/images/logo2.png" /></p>
</div>
<!-- LOGO ENDS HERE -->
<!-- NAVIGATION BUTTONS BEGIN HERE -->
<div class="grid_8 prefix_2">
<ul class='navbar navbar-horizontal'>
<a href="#" id="panel-1" class="drop-shadow raised">
Home
</a>
<a href="#" id="panel-2">
FAQ's
</a>
<a href="#" id="panel-3">
Invite
</a>
<a href="#" id="panel-4">
Contact
</a>
</ul>
</div>
<!-- NAVIGATION BUTTONS END HERE -->
</div>
</div>
<!-- End of the second header - Logo & Navigation buttons -->
CSS:
#charset "UTF-8";
/* CSS Document */
body {
background-image: url('http://www.dubstepcast.com/images/bg.jpg');
background-repeat: repeat-x repeat-y;
color: #333;
font-size: 11px;
height: auto;
padding-bottom: 20px;
}
a {
color: #fff;
text-decoration: none;
}
h1 {
font-family: Georgia, serif;
font-weight: normal;
padding-top: 20px;
text-align: center;
}
h2 {
padding-top: 20px;
text-align: center;
}
p {
border: 1px solid #666;
overflow: hidden;
padding: 10px 0;
text-align: center;
}
/* HEADER */
/* TOP HEADER */
.top-header {
color: #FFF;
font-family: "Helvetica";
font-weight: bold;
font-size: 12px;
background: #11A1B1;
height: 43px;
padding-top: 15px;
}
.top-header a {
color: #FFF;
font-family: "Helvetica";
font-weight: bold;
font-size: 12px;
text-decoration: none;
}
.top-header a:hover {
color: #D3582D;
text-decoration: none;
}
.top-header-wrap {
border-top: solid 3px #32BED0;
background: #11A1B1;
height: 58px;
}
/* SOCIAL ICONS */
#social {
height: 35px;
}
#social li {
display: inline;
}
/* TWITTER */
#social ul #twitter a {
background-image: url('http://www.dubstepcast.com/images/twitter.png');
width: 18px;
height: 18px;
}
#social ul #twitter a:hover {
background-image: url('http://www.dubstepcast.com/images/twitter.png');
width: 18px;
height: 18px;
}
/* PINTEREST */
#social ul #pinterest a {
background-image: url('http://www.dubstepcast.com/images/pinterest.png');
width: 18px;
height: 18px;
}
#social ul #pinterest a:hover {
background-image: url('http://www.dubstepcast.com/images/pinterest_active.png');
width: 18px;
height: 18px;
}
/* FACEBOOK */
#social {
text-align: right;
}
#social ul #facebook a {
background-image: url('http://www.dubstepcast.com/images/facebook.png');
width: 18px;
height: 18px;
}
#social ul #facebook a:hover {
background-image: url('http://www.dubstepcast.com/images/facebook_active.png');
width: 18px;
height: 18px;
}
/* GOOGLE */
#social ul #google a {
background-image: url('http://www.dubstepcast.com/images/google.png');
width: 18px;
height: 18px;
}
#social ul #google a:hover {
background-image: url('http://www.dubstepcast.com/images/google_active.png');
width: 18px;
height: 18px;
}
/* BOTTOM HEADER */
.bottom-header {
margin-top: 10px;
height: 155px;
}
.bottom-header img {
margin-top: 25px;
}
.drop-shadow {
position:relative;
float:left;
width:40%;
padding:1em;
margin:2em 10px 4em;
background:#fff;
-webkit-box-shadow:0 1px 4px rgba(0, 0, 0, 0.3), 0 0 40px rgba(0, 0, 0, 0.1) inset;
-moz-box-shadow:0 1px 4px rgba(0, 0, 0, 0.3), 0 0 40px rgba(0, 0, 0, 0.1) inset;
box-shadow:0 1px 4px rgba(0, 0, 0, 0.3), 0 0 40px rgba(0, 0, 0, 0.1) inset;
}
.drop-shadow:before,
.drop-shadow:after {
content:"";
position:absolute;
z-index:-2;
}
.drop-shadow p {
font-size:16px;
font-weight:bold;
}
/*
* Kwicks: Sexy Sliding Panels for jQuery - v2.1.0
* http://devsmash.com/projects/navbar
*
* Copyright 2013 Jeremy Martin (jmar777)
* Contributors: Duke Speer (Duke3D)
* Released under the MIT license
* http://www.opensource.org/licenses/mit-license.php
*/
.navbar {
height: 100px;
display: block;
list-style-type: none;
list-style: none;
position: relative;
margin: 55px 0 0 25px;
padding: 0;
}
.navbar > a {
font-weight: 400;
font-family: "Helvetica";
letter-spacing: 1px;
border-radius: 0px 0px 5px 5px;
-moz-border-radius: 0px 0px 5px 5px;
-webkit-border-radius: 0px 0px 5px 5px;
-o-border-radius: 0px 0px 5px 5px;
-webkit-box-shadow: 0 10px 15px -8px rgba(62, 62, 62, 0.5), 0 1px 4px rgba(62, 62, 62, 0.2), 0 0 40px rgba(62, 62, 62, 0) inset;
-moz-box-shadow: 0 10px 15px -8px rgba(62, 62, 62, 0.5), 0 1px 4px rgba(62, 62, 62, 0.2), 0 0 40px rgba(62, 62, 62, 0) inset;
box-shadow: 0 10px 15px -8px rgba(62, 62, 62, 0.5), 0 1px 4px rgba(62, 62, 62, 0.2), 0 0 40px rgba(62, 62, 62, 0) inset;
font-size: 16px;
width: 125px;
height: 18px;
margin-left: 5px;
float: left;
text-align: center;
padding: 25px 0 30px 0;
}
.navbar > a p {
font-family: "Helvetica";
font-weight: lighter;
color: #11A1B1;
margin-top: 4px;
font-size: 10px;
letter-spacing: normal;
}
.navbar > a:hover p {
color: #11A1B1;
}
.navbar > a:hover {
color: #D3582D;
}
.navbar > * {
display: block;
overflow: hidden;
padding: 0;
margin: 0;
}
.navbar.navbar-processed > * {
margin: 0;
position: absolute;
}
.navbar-horizontal > * {
float: left;
}
.navbar-horizontal > :first-child {
margin-left: 0;
}
.navbar-vertical > :first-child {
margin-top: 0;
}
#panel-1 {
background-color: #464646;
border-top: solid 3px #11A1B1;
}
#panel-2 {
background-color: #464646;
border-top: solid 3px #11A1B1;
}
#panel-3 {
background-color: #464646;
border-top: solid 3px #11A1B1;
}
#panel-4 {
background-color: #464646;
border-top: solid 3px #11A1B1;
}
/* GIVES THE DROP-SHADOW ON THE NAVIGATION BUTTONS MORE OF A REALISTIC LOOK */
.drop-shadow {
position: relative;
float: left;
width: 40%;
padding: 1em;
margin: 2em 10px 4em;
background: #FFF;
-webkit-box-shadow: 0 1px 4px rgba(0, 0, 0, 0.3), 0 0 40px rgba(0, 0, 0, 0.1) inset;
-moz-box-shadow: 0 1px 4px rgba(0, 0, 0, 0.3), 0 0 40px rgba(0, 0, 0, 0.1) inset;
box-shadow: 0 1px 4px rgba(0, 0, 0, 0.3), 0 0 40px rgba(0, 0, 0, 0.1) inset;
}
.drop-shadow:before, .drop-shadow:after {
content: "";
position: absolute;
z-index: -2;
}
.drop-shadow p {
font-size: 16px;
font-weight: bold;
}

According to your jsfiddle the following CSS rules are being applied to container_12 in the demo.css file
.container_12, .container_16, .container_24 {
background-color: #fff; /* Makes the background white */
background-repeat: repeat-y;
margin-bottom: 20px;
}
So you can either remove these or overwrite them with
.container_12 {
background: none
}

add this to css
.container_12{
background: transparent;
}

as per firebug, this is line 2 of demo.css
.container_12, .container_16, .container_24 {
background-color: #FFFFFF;
background-repeat: repeat-y;
margin-bottom: 20px;
}
so use
#div.container_12 {
background-color: transparent;
}
to override it with greater specificity

You have background-color: #fff; set in demo.css
Change it to background-color: transparent;

Display menu horizontal with vertical drop down?

I am trying to build a drop down menu, So far i found a really nice menu but it lists its items horizontal and displays its sub items horizontally as well.
I would like my items to be next to each other and then if it has a sub menu those items drop down.
Here is my Menu:
<link rel="stylesheet" type="text/css" href="../../Content/Menu.css" />
<div class="float-right">
<nav>
<ul class="menu" style="float: left;">
<li class="item1">Home
<ul style="display: block; ">
<li class="subitem1" >#Html.ActionLink("Home", "Index", "Home", new { #class = "active" })</li>
<li class="subitem2">#Html.ActionLink("Contact", "Contact", "Home")</li>
<li class="subitem3">#Html.ActionLink("About", "About", "Home")</li>
</ul>
</li>
<li class="item2">#Html.ActionLink("Login", "Login", "Home")</li>
</ul>
</nav>
</div>
Style Sheet
body {
font-size: 100%;
background:#32373d;
}
a {
text-decoration: none;
}
ul, ul ul {
margin: 0;
padding: 0;
list-style: none;
}
#wrapper {
width: 220px;
margin: 100px auto;
font-size: 0.8125em;
}
.menu {
width: 225px;
height: auto;
-webkit-box-shadow: 0px 1px 3px 0px rgba(0,0,0,.73), 0px 0px 18px 0px rgba(0,0,0,.13);
-moz-box-shadow: 0px 1px 3px 0px rgba(0,0,0,.73), 0px 0px 18px 0px rgba(0,0,0,.13);
box-shadow: 0px 1px 3px 0px rgba(0,0,0,.73), 0px 0px 18px 0px rgba(0,0,0,.13);
}
.menu > li > a {
background-color: #616975;
background-image: -webkit-gradient(linear, left top, left bottom, from(rgb(114, 122, 134)),to(rgb(80, 88, 100)));
background-image: -webkit-linear-gradient(top, rgb(114, 122, 134), rgb(80, 88, 100));
background-image: -moz-linear-gradient(top, rgb(114, 122, 134), rgb(80, 88, 100));
background-image: -o-linear-gradient(top, rgb(114, 122, 134), rgb(80, 88, 100));
background-image: -ms-linear-gradient(top, rgb(114, 122, 134), rgb(80, 88, 100));
background-image: linear-gradient(top, rgb(114, 122, 134), rgb(80, 88, 100));
filter: progid:DXImageTransform.Microsoft.gradient(GradientType=0,StartColorStr='#727a86', EndColorStr='#505864');
border-bottom: 1px solid #33373d;
-webkit-box-shadow: inset 0px 1px 0px 0px #878e98;
-moz-box-shadow: inset 0px 1px 0px 0px #878e98;
box-shadow: inset 0px 1px 0px 0px #878e98;
width: 100%;
height: 2.75em;
line-height: 2.75em;
text-indent: 2.75em;
display: block;
position: relative;
font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
font-weight: 600;
color: #fff;
text-shadow: 0px 1px 0px rgba(0,0,0,.5);
}
.menu ul li a {
background: #fff;
border-bottom: 1px solid #efeff0;
width: 100%;
height: 2.75em;
line-height: 2.75em;
text-indent: 2.75em;
display: block;
position: relative;
font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
font-size: 0.923em;
font-weight: 400;
color: #878d95;
}
.menu ul li:last-child a {
border-bottom: 1px solid #33373d;
}
.menu > li > a:hover, .menu > li > a.active {
background-color: #35afe3;
background-image: -webkit-gradient(linear, left top, left bottom, from(rgb(69, 199, 235)),to(rgb(38, 152, 219)));
background-image: -webkit-linear-gradient(top, rgb(69, 199, 235), rgb(38, 152, 219));
background-image: -moz-linear-gradient(top, rgb(69, 199, 235), rgb(38, 152, 219));
background-image: -o-linear-gradient(top, rgb(69, 199, 235), rgb(38, 152, 219));
background-image: -ms-linear-gradient(top, rgb(69, 199, 235), rgb(38, 152, 219));
background-image: linear-gradient(top, rgb(69, 199, 235), rgb(38, 152, 219));
filter: progid:DXImageTransform.Microsoft.gradient(GradientType=0,StartColorStr='#45c7eb', EndColorStr='#2698db');
border-bottom: 1px solid #103c56;
-webkit-box-shadow: inset 0px 1px 0px 0px #6ad2ef;
-moz-box-shadow: inset 0px 1px 0px 0px #6ad2ef;
box-shadow: inset 0px 1px 0px 0px #6ad2ef;
}
.menu > li > a.active {
border-bottom: 1px solid #1a638f;
}
.menu > li > a:before {
content: '';
background-image: url(../images/sprite.png);
background-repeat: no-repeat;
font-size: 36px;
height: 1em;
width: 1em;
position: absolute;
left: 0;
top: 50%;
margin: -.5em 0 0 0;
}
.item1 > a:before {
background-position: 0 0;
}
.item2 > a:before {
background-position: -38px 0;
}
.item3 > a:before {
background-position: 0 -38px;
}
.item4 > a:before {
background-position: -38px -38px;
}
.item5 > a:before {
background-position: -76px 0;
}
.menu > li > a span {
font-size: 0.857em;
display: inline-block;
position: absolute;
right: 1em;
top: 50%;
background: #48515c;
line-height: 1em;
height: 1em;
padding: .4em .6em;
margin: -.8em 0 0 0;
color: #fff;
text-indent: 0;
text-align: center;
-webkit-border-radius: .769em;
-moz-border-radius: .769em;
border-radius: .769em;
-webkit-box-shadow: inset 0px 1px 3px 0px rgba(0, 0, 0, .26), 0px 1px 0px 0px rgba(255, 255, 255, .15);
-moz-box-shadow: inset 0px 1px 3px 0px rgba(0, 0, 0, .26), 0px 1px 0px 0px rgba(255, 255, 255, .15);
box-shadow: inset 0px 1px 3px 0px rgba(0, 0, 0, .26), 0px 1px 0px 0px rgba(255, 255, 255, .15);
text-shadow: 0px 1px 0px rgba(0,0,0,.5);
font-weight: 500;
}
.menu > li > a:hover span, .menu > li a.active span {
background: #2173a1;
}
.menu > li > ul li a:before{
content: '▶';
font-size: 8px;
color: #bcbcbf;
position: absolute;
width: 1em;
height: 1em;
top: 0;
left: -2.7em;
}
.menu > li > ul li:hover a,
.menu > li > ul li:hover a span,
.menu > li > ul li:hover a:before {
color: #32373D;
}
.menu ul > li > a span {
font-size: 0.857em;
display: inline-block;
position: absolute;
right: 1em;
top: 50%; /
background: #fff;
border: 1px solid #d0d0d3;
line-height: 1em;
height: 1em;
padding: .4em .7em;
margin: -.9em 0 0 0;
color: #878d95;
text-indent: 0;
text-align: center;
-webkit-border-radius: .769em;
-moz-border-radius: 769em;
border-radius: 769em;
text-shadow: 0px 0px 0px rgba(255,255,255,.01));
}
What property in my style sheet is causing my Menu to list like this?
Is there a way to override what every is causing the menu you to do this?
Edit
Html list:
<div class="float-right">
<nav>
<ul class="menu" style="float: left;">
<li class="item1">Home
<ul style="display: block; ">
<li class="subitem1" ><a class="active" href="/?Length=4">Home</a></li>
<li class="subitem2">Contact</li>
<li class="subitem3">About</li>
</ul>
</li>
<li class="item2">Login</li>
</ul>
</nav>
</div>

.menu {
width: 225px;
}
the width:225px prevents the menu from displaying correctly.
http://jsfiddle.net/wFyMs/2/

Why can you make it simplier?
Try rewrite it by this pattern:
CSS
li { float: left; }
li ul li { clear: both; }

We Keep Coding

html mysql json google-apps-script actionscript-3 ms-access google-chrome google-maps reporting-services sql-server-2008

bootstrap 2 navbar break point change - html

Related

how to handle data inside grid system in bootstrap

Form not visible on mobiles

Menus come down on browser resize

How come my container's are displaying a white background?

Display menu horizontal with vertical drop down?

Categories

Resources