Moving navigation bar on mobile site

[Mr.81]

Hi guys,

Here's some code for a theme I use - I'm hoping to switch the navigation bar from above the content to below it. Any idea which bits I should move and to where?

/* iPad Portrait/Browser */
	@media only screen and (min-width: 768px) and (max-width: 991px) {

	#navigation ul {border-radius:0px;}
	#navigation ul li a {font-size: .9em;padding: 10px 15px;}
	#navigation ul {min-width: 700px;}
	#sidebar .widget-container {margin-left: 0px;}
	.resize {display: none;}
	#respond textarea {width:auto;}	

	/* jigoshop styles */
	#header .site-desc.text {font-size: 1.25em;}

	}


	/* Mobile/Browser */
	@media only screen and (max-width: 767px) {

	#wrap {}
	#header .site-desc.text {font-size: 1.25em;}
	#navigation {margin: 10px 0px;}

	#navigation ul,
	#navigation ul li,
	#navigation ul li a {
	float: none;
	background: transparent;
	border: none;
	box-shadow:none;
	-moz-box-shadow:none;
	-webkit-box-shadow:none;
	behavior:none;
	}

	#navigation ul li a,
	#navigation ul li.active a,
	#navigation ul li a:hover,
	#navigation ul li:hover a {
	border: none;
	padding: 2px 0;
	line-height: 150%;
	background: transparent;
	background-image: none;
	}

	/* Initial reset and hide sublevels in mobile view */

	#navigation ul.sub-menu,
	#navigation ul.sub-menu li,
	#navigation ul.sub-menu li:hover,
	#navigation ul.sub-menu li a,
	#navigation ul.sub-menu li a:hover
	 {
		display: none;
		position: relative;
		left: 0px;
		line-height: 100%;
		background: none;
		border: none;
		border-style: none;
		box-shadow:none;
		padding: 0;
		margin: 0;
		height: auto;
		background-image: none;
	}

	/* Declare new padding for submenu items */

	#navigation ul.sub-menu li a,
	#navigation ul.sub-menu li a:hover {
		padding: 4px 0px 4px 10px;
	}

	/* Show on hover */

	#navigation li:hover ul.sub-menu,
	#navigation li:hover ul.sub-menu li,
	#navigation li:hover ul.sub-menu li a {
		display: inline-block;
	}
	#respond textarea {width:300px;}	



	#wrap .products li,.products li.first,.products li.last {
 	float: left;
 	clear: both;
	margin: 20px 0px 20px 0px;
	width: 100%;
	}
	#breadcrumb {display: none;}

	#sidebar .widget-container {margin-left: 0px;}
	.full-width,
	.one_half,
	.one_third,
	.two_thirds,
	.three_fourths,
	.one_fourth,
	.one_fifth,
	.two_fifth,
	.three_fifth,
	.four_fifth,
	.one_sixth,
	.five_sixth {width: 100%;}
	.resize {display: none;}

	}

	/* Mobile Landscape/Browser */
	@media only screen and (min-width: 480px) and (max-width: 767px) {}

	/* Anything smaller than standard 960 */
	@media only screen and (max-width: 959px) {}

	/* iPad Portrait Only */
	@media only screen and (min-width: 768px) and (max-width: 991px) and (max-device-width: 1000px) {}

	/* Mobile Only */
	@media only screen and (max-width: 767px) and (max-device-width: 1000px) {}

	/* Mobile Landscape Only */
	@media only screen and (min-width: 480px) and (max-width: 767px) and (max-device-width: 1000px) {}

Thank you for your time!

[ralph.m]

Hi Mr.81. For a start, we need to see your HTML to be able to advise on this. Preferably a live lik or at least a full working example (i.e. test the code you post first to make sure it can be used to help you).

[Mr.81]

Hi Mr.81. For a start, we need to see your HTML to be able to advise on this. Preferably a live lik or at least a full working example (i.e. test the code you post first to make sure it can be used to help you).

Hi, thanks for the reply - oh, sorry, it's www.switch2dvd.co.uk - thanks.

[ralph.m]

Hm, a nice easy solution would be to repeat the menu in the <footer> and only reveal it on smaller screens (using CSS display: none / display: block via @media rules). Does that sound viable?

[Mr.81]

Hm, a nice easy solution would be to repeat the menu in the <footer> and only reveal it on smaller screens (using CSS display: none / display: block via @media rules). Does that sound viable?

Thanks for the reply - that sounds like it could work. Which part of the menu code needs to be copied? Thanks!

[ralph.m]

Which part of the menu code needs to be copied? Thanks!

Any part you like, really—but I would place the <ul> code in the footer, along with the "Navigation" heading. You'll need to style the menu appropriately for the footer, of course.

[Mr.81]

Any part you like, really—but I would place the <ul> code in the footer, along with the "Navigation" heading. You'll need to style the menu appropriately for the footer, of course.

Thanks...hmm, the styling needs changing? This might be beyond my skill level...do you think someone on here would be able to make the alterations for a fee? Thanks.