SitePoint Sponsor

User Tag List

Results 1 to 7 of 7

Hybrid View

  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,107
    Mentioned
    448 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).
    Facebook | Google+ | Twitter | Web Design Tips | Free Contact Form

    Forum Usage: Tips on posting code samples, images and more

    Forrest Gump: "IE is like a box of chocolates: you never know what you're gonna get."

  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,107
    Mentioned
    448 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?
    Facebook | Google+ | Twitter | Web Design Tips | Free Contact Form

    Forum Usage: Tips on posting code samples, images and more

    Forrest Gump: "IE is like a box of chocolates: you never know what you're gonna get."

  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,107
    Mentioned
    448 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.
    Facebook | Google+ | Twitter | Web Design Tips | Free Contact Form

    Forum Usage: Tips on posting code samples, images and more

    Forrest Gump: "IE is like a box of chocolates: you never know what you're gonna get."


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
  •