Welcome to the Treehouse Community
Want to collaborate on code errors? Have bugs you need feedback on? Looking for an extra set of eyes on your latest project? Get support with fellow developers, designers, and programmers of all backgrounds and skill levels here with the Treehouse Community! While you're at it, check out some resources Treehouse students have shared here.
Looking to learn something new?
Treehouse offers a seven day free trial for new students. Get access to thousands of hours of content and join thousands of Treehouse students and alumni in the community today.
Start your free trial
Mayur Pande
Courses Plus Student 11,711 PointsMy nav bar seems to be reversing order
In this site the navigation bar seems to be in order in pc view. For example it list "Shop" "Blog" "Info" however when in mobile view it switches the order to "Info" Blog" "Shop".
I thought this was because the html was listed as;
<!--
DDDDD OOOOO NN NN EEEEEEE
DD DD OO OO NNN NN EE
DD DD OO OO NN N NN EEEEE
DD DD OO OO NN NNN EE
DDDDDD OOOO0 NN NN EEEEEEE
L O N D O N
-->
<!DOCTYPE html>
<!--[if lt IE 7]><html class="no-js lt-ie9 lt-ie8 lt-ie7"> <![endif]-->
<!--[if IE 7]><html class="no-js lt-ie9 lt-ie8"> <![endif]-->
<!--[if IE 8]><html class="no-js lt-ie9"> <![endif]-->
<!--[if gt IE 8]><!--> <html class="no-js"> <!--<![endif]-->
<head>
<script>(function(H){H.className=H.className.replace(/\bno-js\b/,'js')})(document.documentElement)</script>
<meta charset="<?php bloginfo( 'charset' ); ?>">
<title>DONE LONDON</title>
<meta name="description" content="Exclusive silkscreen printed tees and more" />
<meta name="viewport" content="width=device-width, maximum-scale=1.0, initial-scale=1.0, user-scalable=no">
<meta property="og:title" content="DONE LONDON"/>
<meta property="og:type" content="website"/>
<meta property="og:image" content="<?php bloginfo( 'template_url' ); ?>/assets/img/done-fb.gif"/>
<meta property="og:site_name" content="DONE LONDON"/>
<meta property="og:url" content="http://www.donelondon.co.uk/"/>
<meta property="fb:admins" content=""/>
<meta property="og:description" content="Exclusive silkscreen printed tees and more"/>
<!--[if lt IE 9]>
<script src="//html5shim.googlecode.com/svn/trunk/html5.js"></script>
<![endif]-->
<link rel="stylesheet" href="<?php bloginfo( 'template_url' ); ?>/assets/css/style.css">
<script type="text/javascript">
window.BASE_URL = '<?php home_url("/"); ?>';
window.TEMPLATE_URL = '<?php bloginfo("template_url"); ?>';
</script>
</head>
<body>
<div id="fb-root"></div>
<script>(function(d, s, id) {
var js, fjs = d.getElementsByTagName(s)[0];
if (d.getElementById(id)) return;
js = d.createElement(s); js.id = id;
js.src = "//connect.facebook.net/en_GB/all.js#xfbml=1&appId=285325258147328";
fjs.parentNode.insertBefore(js, fjs);
}(document, 'script', 'facebook-jssdk'));</script>
<header id="header">
<div class="full-width">
<h1 id="logo"><a href="http://donelondon.co.uk/" class="hide-text">Done London</a></h1>
<nav id="main-nav">
<a id="social-yt" class="social-ico hide-text" href="https://www.youtube.com/channel/UCB0qWruPBWaAb-6nvp5pw-g" target="_blank"><span class="under">youtube</span><span class="over">tumblr</span></a>
<a id="social-sc" class="social-ico hide-text" href="http://www.soundcloud.com/done_london" target="_blank"><span class="under">soundcloud</span><span class="over">instagram</span></a>
<a id="social-tb" class="social-ico hide-text" href="http://donelondon.tumblr.com/" target="_blank"><span class="under">tumblr</span><span class="over">tumblr</span></a>
<a id="social-in" class="social-ico hide-text" href="http://instagram.com/donelondon/" target="_blank"><span class="under">instagram</span><span class="over">instagram</span></a>
<a id="social-tw" class="social-ico hide-text" href="https://twitter.com/donelondon" target="_blank"><span class="under">twitter</span><span class="over">twitter</span></a>
<a id="social-fb" class="social-ico hide-text" href="https://www.facebook.com/DoneLondon" target="_blank"><span class="under">facebook</span><span class="over">facebook</span></a>
<a id="nav-info" href="http://www.donelondon.co.uk/info/">Info</a>
<a id="nav-blog" href="http://donelondon.tumblr.com/">Blog</a>
<a id="nav-shop" href="http://shop.donelondon.co.uk/">Shop</a>
</nav>
<div class="clear-both"> </div>
</div>
</header>
<?php wp_head(); ?>
However I changed the menu items to
<a id="nav-shop" href="http://shop.donelondon.co.uk/">Shop</a>
<a id="nav-blog" href="http://donelondon.tumblr.com/">Blog</a>
<a id="nav-info" href="http://www.donelondon.co.uk/info/">Info</a>
But this changes the order in the mobile view to the desired "Shop" "Blog" "Info". However in the laptop/pc mode it seems to flip the order again to "Info" "Blog" "Shop".
Here is the css for the code;
/* RESET----------------------------------------------------------*/
*{margin:0px; padding:0px; border:0 none; vertical-align: baseline; font-size:100%; font-weight:normal; font-style:normal;}
/*Force scrollbar*/
html{height:100%; padding-bottom:1px;}
ul,ol{ list-style:none;}
a img {border:none;}
a { -webkit-transition: color .2s; -moz-transition: color .2s; -o-transition: color .2s; transition: color .2s; text-decoration: none; }
a:hover, a:active { outline: 0; text-decoration: underline; }
input::-moz-focus-inner {border:0;}
article, aside, details, figcaption, figure, footer, header, hgroup, nav, section { display: block; }
.audio, canvas, video { display: inline-block; *display: inline; *zoom: 1; }
.audio:not([controls]) { display: none; }
.[hidden] { display: none; }
/*set text selecttion color*/
::selection { background:#c3effd; color:#000; /* Safari and Opera */ }
::-moz-selection{ background:#c3effd; color:#000; /* Firefox */ }
em{font-style:italic;}
hr{height:0px;overflow:hidden; margin:0;padding:0; line-height:0;}
/*hide wp stats smiley*/
img#wpstats{width:0px;height:0px;overflow:hidden}
/*Library----------------------------------------------------------*/
.hidden{display:none;}
.hidden2{
height: 0px;
overflow: hidden;
}
.inline-block{
display: -moz-inline-stack;
display: inline-block;
zoom:1;
*display: inline;
vertical-align: top;
}
.hide-text {
text-indent: 105%;
white-space: nowrap;
overflow: hidden;
}
.opacity{
filter: alpha(opacity=75); /* IE lt 8 */
-ms-filter: "alpha(opacity=75)"; /* IE 8 */
-khtml-opacity: .75; /* Safari 1.x */
-moz-opacity: .75; /* FF lt 1.5, Netscape */
opacity: .75; /* Standard: FF gt 1.5, Opera, Safari */
}
.opacity0{
filter: alpha(opacity=0); /* IE lt 8 */
-ms-filter: "alpha(opacity=0)"; /* IE 8 */
-khtml-opacity: 0.0; /* Safari 1.x */
-moz-opacity: 0.0; /* FF lt 1.5, Netscape */
opacity: 0.0; /* Standard: FF gt 1.5, Opera, Safari */
}
.underline{ text-decoration:underline ! Important;}
.ieTxtShadow{
display: block;
height: 33px;/*can be what ever*/
filter: dropshadow(color=#ffff00,offX=5,offY=5);
}
.roundedCrnrs{
border-radius: 5px;
-moz-border-radius: 5px;
-webkit-border-radius: 5px;
}
.clear-both{
clear: both;
height: 0px;
}
.loader{
position: absolute;
left: 50%;
top: 50%;
width: 50px;
height: 50px;
margin: -25px 0 0 -25px;
z-index: 10;
}
.caro{
overflow: hidden;
position: relative;
}
.reel{
width: 4000px;
height: 100%;
position: absolute;
top: 0;
left: 0;
}
.reel li{
float: left;
}
.slidingDoors{ position:relative; }
.slidingDoors .btnL,.slidingDoors .btnR,.slidingDoors .btnL-rev,.slidingDoors .btnR-rev{
position: absolute;
top: 0px;
}
.slidingDoors .btnL{left: -12px;}
.slidingDoors .btnR{right: -17px;}
.slidingDoors .btnL-rev{left: -18px;}
.slidingDoors .btnR-rev{right: -10px;}
.dummy-dd{
position:relative;
padding:0 20px 0 7px;
background: transparent url('../img/dd-m.png') 0 0 repeat-x;
cursor:pointer;
text-align: left;
}
.dummy-dd span, #main-nav ul li .dummy-dd span{
line-height:20px;
font-size:11px;
}
.dummy-dd-l{
position:absolute;
top:0;
left:-1px;
z-index: 1;
}
.dummy-dd-r{
position:absolute;
top:0;
right:-1px;
z-index: 1;
}
.dummy-dd select{
position:absolute;
top:0;
left:0;
width:100%;
height:100%;
z-index:3;
filter: alpha(opacity=0); /* IE lt 8 */
-ms-filter: "alpha(opacity=0)"; /* IE 8 */
-khtml-opacity: 0.0; /* Safari 1.x */
-moz-opacity: 0.0; /* FF lt 1.5, Netscape */
opacity: 0.0; /* Standard: FF gt 1.5, Opera, Safari */
}
.wrap{
white-space: pre-wrap; /* css-3 */
white-space: -moz-pre-wrap; /* Mozilla, since 1999 */
white-space: -pre-wrap; /* Opera 4-6 */
white-space: -o-pre-wrap; /* Opera 7 */
word-wrap: break-word; /* Internet Explorer 5.5+ */
}
/*Typography______*/
/* first for IE 4–8 */
@font-face {
font-family: london-tube;
src: url("../fonts/paddingtonbold.eot");
}
/* then for WOFF-capable browsers */
@font-face {
font-family: london-tube;
src: url("../fonts/paddingtonbold.woff") format("woff");
}
/* first for IE 4–8 */
@font-face {
font-family: johnston-underground-bold;
src: url("../fonts/johnston_underground_bold.eot");
}
/* then for WOFF-capable browsers */
@font-face {
font-family: johnston-underground-bold;
src: url("../fonts/johnston_underground_bold.woff") format("woff");
}
@font-face {
font-family: 'johnston underground';
src: url('../fonts/p22johnstonunderground-webfont.eot');
src: url('../fonts/p22johnstonunderground-webfont.eot?#iefix') format('embedded-opentype'),
url('../fonts/p22johnstonunderground-webfont.woff2') format('woff2'),
url('../fonts/p22johnstonunderground-webfont.woff') format('woff'),
url('../fonts/p22johnstonunderground-webfont.ttf') format('truetype'),
url('../fonts/p22johnstonunderground-webfont.svg#p22johnstonundergroundregular') format('svg');
font-weight: normal;
font-style: normal;
}
/*Lets GO!________________________________*/
body{
color: #000;
font-size: 20px;
line-height: 1.1em;
font-family: 'johnston underground', sans-serif;
font-weight: normal;
background-color: #fff;
text-align: center;
}
@media only screen and (max-width : 767px) {
body{
margin: 0 1.5%;
}
}
a:hover{color: rgb(180,180,180);}
.full-width{
width: 100%;
max-width: 1280px;
margin-left: auto;
margin-right: auto;
}
.half-width{
width: 50%;
float: left;
}
.one-third-block{
width: 229px;
height: 229px;
background: rgb(180,180,180);
float: left;
margin-right: 19px;
}
.one-fourth-block{
width: 172px;
height: 172px;
background: #fff;
float: left;
margin-right: 12px;
}
.one-third-block.end,
.one-fourth-block.end{margin-right: 0}
@media all and (max-width: 1279px){
.full-width{
width: 98.2%;
padding-left: 0.9%;
padding-right: 0.9%;
}
}
@media only screen and (max-width : 767px) {
.full-width,
.half-width,
.one-third-block,
.one-fourth-block{
width: 100%;
height: auto;
float: none;
margin-left: 0;
margin-right: 0;
padding-left: 0;
padding-right: 0;
}
}
/* HEADER________________________________*/
#header{
padding-top: 20px;
padding-bottom: 20px;
}
@media only screen and (max-width : 767px) {
#header{
padding-top: 15px;
padding-bottom: 15px;
}
}
#logo{
float: left;
width: 187px;
height: 73px;
}
#logo a{
display: block;
width: 187px;
height: 73px;
background: url('../img/done-london.gif') 0 0 no-repeat;
}
@media (min--moz-device-pixel-ratio: 1.5),
(-o-min-device-pixel-ratio: 3/2),
(-webkit-min-device-pixel-ratio: 1.5),
(min-device-pixel-ratio: 1.5),
(min-resolution: 144dpi),
(min-resolution: 1.5dppx){
#logo a{
background-image: url('../img/done-london@2x.gif');
background-size: 187px 73px;
}
}
@media only screen and (max-width : 767px) {
#logo{
float: none;
width: 98px;
height: 38px;
margin: 0 auto 15px;
}
#logo a{
width: 98px;
height: 38px;
background-size: 98px 38px;
}
}
#main-nav{
width: auto;
height: 16px;
float: right;
padding-top: 55px;
}
#main-nav a{
display: block;
float: right;
font-size: 20px;
text-transform: uppercase;
color: #000;
margin-right: 22px;
font-family: johnston-underground-bold, sans-serif;
}
#main-nav a.social-ico{
margin-right: 10px;
}
#main-nav a.social-ico:first-child{
margin-right: 0;
}
#main-nav a:hover{
text-decoration: none;
color: rgb(180,180,180);
}
@media only screen and (max-width : 767px) {
#main-nav{
width: auto;
height: auto;
float: none;
padding-top: 0;
}
#main-nav a{
display: inline-block;
float: none;
font-size: 13px;
margin-right: 11px;
margin-left: 11px;
font-family: 'johnston underground', sans-serif;
}
#main-nav a.social-ico{
display: none;
}
}
.social-ico{
display: block;
width: 26px;
height: 27px;
margin-top: -6px;
position: relative;
}
.social-ico span{
display: block;
width: 26px;
height: 27px;
background: url('../img/social.png') 0 0 no-repeat;
position: absolute;
top: 0;
left: 0;
z-index: 1;
-webkit-transition: opacity .2s;
-moz-transition: opacity .2s;
-o-transition: opacity .2s;
transition: opacity .2s;
}
.social-ico span.over{
z-index: 2;
opacity: 0;
}
.social-ico:hover span.under{opacity: 0;}
.social-ico:hover span.over{opacity: 1;}
a#social-fb span{background-position: 0 0;}
a#social-fb span.over{background-position: 0 -30px;}
a#social-tw span{background-position: -39px 0;}
a#social-tw span.over{background-position: -39px -30px;}
a#social-tb span{background-position: -78px 0;}
a#social-tb span.over{background-position: -78px -30px;}
a#social-in span{background-position: -117px 0;}
a#social-in span.over{background-position: -117px -30px;}
a#social-sc span{background-position: -156px 0;}
a#social-sc span.over{background-position: -156px -30px;}
a#social-yt span{background-position: -195px 0;}
a#social-yt span.over{background-position: -195px -30px;}
@media (min--moz-device-pixel-ratio: 1.5),
(-o-min-device-pixel-ratio: 3/2),
(-webkit-min-device-pixel-ratio: 1.5),
(min-device-pixel-ratio: 1.5),
(min-resolution: 144dpi),
(min-resolution: 1.5dppx){
.social-ico span{
background-image: url('../img/social@2x.png');
background-size: 221px 57px;
}
}
@media only screen and (max-width : 767px) {
.social-ico{
width: 20px;
height: 20px;
margin-top: -4px;
}
.social-ico span{
width: 20px;
height: 20px;
background-size: 166px 43px;
}
a#social-fb span{background-position: 0 0;}
a#social-fb span.over{background-position: 0 -22px;}
a#social-tw span{background-position: -29px 0;}
a#social-tw span.over{background-position: -29px -22px;}
a#social-tb span{background-position: -58.5px 0;}
a#social-tb span.over{background-position: -58.5px -22px;}
a#social-in span{background-position: -88px 0;}
a#social-in span.over{background-position: -88px -22px;}
a#social-sc span{background-position: -117px 0;}
a#social-sc span.over{background-position: -117px -22px;}
a#social-yt span{background-position: -146px 0;}
a#social-yt span.over{background-position: -146px -22px;}
@media (min--moz-device-pixel-ratio: 1.5),
(-o-min-device-pixel-ratio: 3/2),
(-webkit-min-device-pixel-ratio: 1.5),
(min-device-pixel-ratio: 1.5),
(min-resolution: 144dpi),
(min-resolution: 1.5dppx){
.social-ico span{
background-size: 166px 43px;
}
}
}
Any suggestions on what to do
1 Answer
Nattapol Kamolbal
15,528 PointsYou float the anchor element to the right on media query on large screen so the link order is reversed.
For the solution, just reorder the html to the way you want and then float the anchor element to left.
<nav id="main-nav">
<a id="nav-info" href="http://www.donelondon.co.uk/info/">Shop</a>
<a id="nav-blog" href="http://donelondon.tumblr.com/">Blog</a>
<a id="nav-shop" href="http://shop.donelondon.co.uk/">Info</a>
<!-- Social botton here -->
</nav>
#main-nav a{
display: block;
float: right; // float this line to the left.
font-size: 20px;
text-transform: uppercase;
color: #000;
margin-right: 22px;
font-family: johnston-underground-bold, sans-serif;
}
Mayur Pande
Courses Plus Student 11,711 PointsMayur Pande
Courses Plus Student 11,711 PointsBrilliant thanks a lot.