Jump to content

covert vertical menu to responsive


chitrag
 Share

Recommended Posts

Hi,

 

I m looking to convert my vertical menu http://egtours.com to responsive. How can I make it.

my custom.css

html {
	height: 100%;
	margin-bottom: 1px;
}

body {
	margin: 0px;
	padding: 0px;
	background-color: #CCCCCC;
	
}

body,
td.sohotext,
td.text,
p,
span {
	font-family: sans-serif, Helvetica, Verdana, Arial;
	font-size: 13px;
	color: #525252;
	line-height: 140%;	
}

/* Fixes and hacks */

.clearfix:after {
	clear: both;
	display: block;
	content: ".";
	height: 0;
	visibility: hidden;
}

* html input.quick_signup {
	background-attachment: fixed;
	}

/*END - Fixes and Hacks */


/* Navigation */

#mainnav a:link, #mainnav a:visited  {

	color: #FFF;
	text-decoration: none;
	display: block;
	padding-right: 13px;
	float: left;
	padding-top: 5px;
	padding-left: 13px;
	padding-bottom: 5px;
	background-image: url(images/menu_div.jpg);
	background-repeat: no-repeat;
	background-repeat: repeat-x;
	background-position: right top;
}


#mainnav a:hover {
	color: #36CC2F;
	background-image: url(images/nav_active.jpg);
	background-repeat: repeat-x;
	background-position: right top;
	padding:4px 12px 4px;


}

.hmains {
    font-size: 100%;
}
#megamenu {  
        list-style-type:none;  
        width:95%;  
        margin: 3px auto 04px auto;  
        height:40px;  
        padding:2px 0px 3px 0px; 
}
table.vmenu_subs {
    margin-bottom: 30px;
	margin-top: 15px;
}

/*#leftav a:link, #leftnav a:visited, */
   a.vmenu_sub_off:link,
   a.vmenu_sub_off:visited,
   a.vmenu_sub_on:link,
   a.vmenu_sub_on:visited  {
	font-family: Verdana, Arial, Helvetica, sans-serif;
	font-size: 95%;
	font-weight: bold;
	color: #000;
	background-image: url(images/sideNav_bullet.gif);
	background-repeat: no-repeat;
	background-position: left center;
	padding-top: 5px;
	padding-bottom: 5px;
	border-bottom: 1px solid #acacac;
	text-decoration: none;
	padding-left: 24px;
	display: block;
	width: 150px;
}

/*#leftav a:hover,*/
a.vmenu_sub_off:hover,
a.vmenu_sub_on:hover
a.vmenu_sub_off:active,
a.vmenu_sub_on:active  {
	color: #666;
}


a:link, a:visited {
	color: #00CC00;
	text-decoration: none;
}

a:hover {
	color: #009900;
	margin-top:0px;
margin-bottom:0px;
}

#feat a:link, #feat a:visited {
	color: #fdb417;
	text-decoration: none;
}

#feat a:hover {
	color: #fed27e;
}

/*END - Navigation */

#headwrapper {
	background-image: url(images/top_bg.png);
	background-repeat: 50% no-repeat;
	margin: 0px;
	padding: 0px;
	height: 109px;
	position: relative;
}
#featwrapper {
	background-color: #1e8019;
	height: 124px;
	border-bottom-style: solid;
	border-bottom-width: 1px;
	border-bottom-color: #185d14;
	overflow: hidden;
	border-top-width: 1px;
	border-top-style: solid;
	border-top-color: #2b9d22;
}
#feat {
	max-width: 88%;
	margin-right: auto;
	margin-left: auto;
	background-image: url(images/feat_bg.jpg);
	background-repeat: no-repeat;
	background-position: left top;
	height: 124px;
	color: #FFFFFF;
}
#navwrapper {
	background-color: #1e8019;
	height: 32px;
	border-top-width: 1px;
	border-bottom-width: 1px;
	border-top-style: solid;
	border-bottom-style: solid;
	border-top-color: #2b9d22;
	border-bottom-color: #185d14;
}
#nav {
	background-image: url(images/nav_bg.jpg);
	background-repeat: no-repeat;
	background-position: left top;
	height: 32px;
	max-width:100%;
	margin-right: auto;
	margin-left: auto;
	color: #FFFFFF;
}
#contentwrapper {
	background-color: #ededf1;
	margin: 0px;
	padding: 0px;
}
#maincontent {
	background-image: url(images/content_bg.jpg);
	background-repeat: no-repeat;
	background-position: left top;
	max-width: 88%;
	margin-right: auto;
	margin-left: auto;
	background-color: #ededf1;
}
#mainnav {
	width: 72%;
	float: left;
	padding-left: 5px;
}
#signup {
	width: 25%;
	padding-left: 5px;
	float: left;
	height: 20px;
	padding-top: 2px;
	font-size: 85%;
	color: #cccccc;
	text-align: center;
}
#subnav {
	margin: 0px;
	float: left;
	min-width:155px;
	width: 25%;
	padding-top: 15px;
	padding-right: 5px;
	padding-bottom: 5px;
	padding-left: 5px;

}
#belowmenu {
	display: block;
	float: left;
	width: 100%;
	padding-top: 15px;
	padding-left: 5px;
	
}
div.sidebox {
	display: block;
	float: left;
	width: 100%;
}

#content {
	margin: 0px;
	width: 70%;
	float: left;
	padding-top: 12px;
	padding-right: 7px;
	padding-bottom: 12px;
	padding-left: 7px;
	overflow: visible;
}
#content-parent {
width: 100%;
}

#date {
	font-size: 90%;
	text-align: right;
	color: #858585;
}

#featleft {
	float: left;
	width: 25%;
	padding-left: 5px;
	padding-top: 5px;
}
#featright {
	float: left;
	width: 72%;
	padding-left: 10px;
	padding-top: 5px;
}

#footer {
	text-align: center;
	width: 100%;
	margin-right: auto;
	margin-left: auto;
	padding-top: 10px;
	font-size: 85%;
	padding-bottom: 10px;
	color: #939393;
}

#head {
	height: 109px;
	max-width: 88%;
	margin-right: auto;
	margin-left: auto;
}
#logo_box {
	height: 109px;
	float: left;
	width: 28%;
}
#tagline {
	float: left;
	width: 70%;
	color: #999999;
	text-align: right;
	padding-top: 22px;
}

#logo {
	position: absolute;
	top: 3px;
}


#trimbar {
	background-color: #000000;
	margin: 0;
	padding: 0;
	height: 7px;
	width: 100%;
	border-top: 1px solid #999999;
	border-bottom: 1px solid #333333;
}

div.newsbox {
    line-height: 115%;
}

/*hiding from IE mac \*/

* html .clearfix {
	height: 1%;
}

.clearfix {
    display: block;
}

/* end hiding from IE mac */


#footerwrapper {
	width: 100%;
	border-top-width: 2px;
	border-top-style: solid;
	border-top-color: #959595;
	background-color: #CCCCCC;
}
/* Integrated Styles */

.portfolio {
	padding-top: 10px;
	padding-bottom: 10px;
	border-bottom: 1px solid #EFEFEF;
	width: 100%;
	overflow: auto;
}

span.alert, 
span.profile,
span.download,
span.search  {
	display: block;
    float: left;
	margin:  10px;
	padding: 10px 10px 10px 45px;
}

span.alert {
	color: #333333;
	background-color: #dddddd;
	border-bottom: 4px solid #b6b6b6;
	border-top: 4px solid #b6b6b6;
	background-image: url(images/span_alert.jpg);
	background-repeat: no-repeat;
	background-position: 7px 12px;
}

span.profile {
	color: #333333;
	background-color: #dddddd;
	border-bottom: 4px solid #b6b6b6;
	border-top: 4px solid #b6b6b6;
	background-image: url(images/span_profile.jpg);
	background-repeat: no-repeat;
	background-position: 7px 12px;
}

span.download {
    width: 100%; 
	color: #333333;
	background-color: #dddddd;
	border-bottom: 4px solid #b6b6b6;
	border-top: 4px solid #b6b6b6;
	background-image: url(images/span_download.jpg);
	background-repeat: no-repeat;
	background-position: 7px 12px;
}

span.search {
	color: #333333;
	background-color: #dddddd;
	border-bottom: 4px solid #b6b6b6;
	border-top: 4px solid #b6b6b6;
	background-image: url(images/span_search.jpg);
	background-repeat: no-repeat;
	background-position: 7px 12px;
}

span.product {
	color: #333333;
	background-color: #fff;
	border: 1px solid #b6b6b6;
	margin:  10px;
	padding: 10px;
	font-size: 10px;
	line-height: 145%;
	display: block;
}

blockquote {
	border-top: 4px solid #D3D3D3;
	border-bottom: 4px solid #D3D3D3;
	margin:  10px;
	padding: 10px 10px 5px 45px;
	background-color: #f5f5f5;
	background-image: url(images/quote1.png);
	background-repeat: no-repeat;
	background-position: 5px 5px;
}

blockquote p {
	padding-right: 35px;
	background-image: url(images/quote2.png);
	background-repeat: no-repeat;
	background-position: 100% 100%;
}
ul
{
list-style-type:none;
padding:0px;
margin:0px;
}
ul li { 
        background-image: url("images/li_bullet.gif");
        background-position: 0px 4px;
        background-repeat: no-repeat;
        overflow: hidden;/* added by dsonesuk as li cannot detect area of    floated 'a' elements*/
        padding-left: 14px;
        margin-left: 0px 4px;
        font-size: 12px;
}
 
ul, li {list-style-type:none !important;}
}

h4 {
	font-size: 115%;
	color: #333;
	margin-bottom: 5px;
	margin-top: 0px;
	padding: 0px;
}

#feat h4 {
	color: #fdb417;
}

h4 {
    font-size: 120%;
	color: #0066FF
}


h3 {
	font-size: 150%;
	color: #1E7D19;
}

h2 {
	font-size: 180%;
	color: #196115;
}
input.login_box {
	border: 0;
	height: 25px;
	width: 122px;
	padding-left: 30px;
	padding-top: 4px;
	background-image: url(images/login_bg.jpg);
	background-repeat: no-repeat;
	background-position: left top;
}

input.pass_box {
	border: 0;
	height: 25px;
	width: 122px;
	padding-left: 30px;
	padding-top: 4px;
	background-image: url(images/password_bg.jpg);
	background-repeat: no-repeat;
	background-position: left top;
}

input.quick_signup {
	border: 0;
	height: 19px;
	width: 168px;
	padding-left: 32px;
	padding-top: 3px;
	margin-top: 4px;
	background-image: url(images/quick_signup_bg.jpg);
	background-repeat: no-repeat;
	background-position: left top;
	background-color: #ededed;
}

div#answer0,
div#answer1,
div#answer2,
div#answer3,
div#answer4,
div#answer5,
div#answer6,
div#answer7,
div#answer8,
div#answer9,
div#answer10 

{
        padding-left: 28px;
	padding-bottom: 10px;
	background-image: url(images/answer.gif);
	background-repeat: no-repeat;
	background-position: 2px 0;
}

table#Search_Form,
table#Search_Form2  {
    
}

table#Detail_Results2,
table#Initial_Results {
    margin-top: 15px;
}

.MegaMenu {
display:table;
margin: 0 auto !important;
height:29px;
background-color:transparent;

}

#mainnav table, #mainnav table tr th, #mainnav table tr td, #Container td {
	padding: 0px!important;
background:inherit!important;
}

#Container,.MegaMenuTable, .MegaMenuTable tr {
background:inherit!important;
}
table {
border-width:0px;
background:inherit;
}
table tr th, table tr td {
padding:inherit;
}
table tr.even, table tr.alt, table tr:nth-of-type(2n) {
background:inherit;
}
.sohotext p {
min-width:120px;
}
#tagline {
    bottom: 0;
    padding-top: 0px;
    position: absolute;
    right: 0;
	width:62%;
}
#tagline img {
margin: 0px 0px -12px; 
height: auto!important; 
max-width: 100%; 
width: auto!important; 
max-height: 68px;
min-height:45px;
}
Link to comment
Share on other sites

Use a media query to set #subnav width to "auto" and float to "none".

In the same media query set #content width to "auto" and float to "none"

 

On mobile devices you cannot have your site divided into columns, everything must be stacked vertically to be responsive.

Link to comment
Share on other sites

It's supposed to go below the side menu. Mobile screens are too small to fit both of them side by side.

 

Use a media query to only display them like that on mobile devices.

Link to comment
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now
 Share

×
×
  • Create New...