SitePoint Sponsor

User Tag List

Results 1 to 7 of 7
  1. #1
    SitePoint Enthusiast
    Join Date
    Nov 2008
    Posts
    39
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Moving navigation bar on mobile site

    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?

    HTML Code:
    /* 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!

  2. #2
    It's all Geek to me silver trophybronze trophy
    ralph.m's Avatar
    Join Date
    Mar 2009
    Location
    Melbourne, AU
    Posts
    24,295
    Mentioned
    460 Post(s)
    Tagged
    8 Thread(s)
    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).

  3. #3
    SitePoint Enthusiast
    Join Date
    Nov 2008
    Posts
    39
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by ralph.m View Post
    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.

  4. #4
    It's all Geek to me silver trophybronze trophy
    ralph.m's Avatar
    Join Date
    Mar 2009
    Location
    Melbourne, AU
    Posts
    24,295
    Mentioned
    460 Post(s)
    Tagged
    8 Thread(s)
    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?

  5. #5
    SitePoint Enthusiast
    Join Date
    Nov 2008
    Posts
    39
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by ralph.m View Post
    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!

  6. #6
    It's all Geek to me silver trophybronze trophy
    ralph.m's Avatar
    Join Date
    Mar 2009
    Location
    Melbourne, AU
    Posts
    24,295
    Mentioned
    460 Post(s)
    Tagged
    8 Thread(s)
    Quote Originally Posted by Mr.81 View Post
    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.

  7. #7
    SitePoint Enthusiast
    Join Date
    Nov 2008
    Posts
    39
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by ralph.m View Post
    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.


Bookmarks

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •