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!