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

CSS

Ashley Wile
Ashley Wile
8,452 Points
Posted by Ashley Wile
Ashley Wile
8,452 Points

Horizontal list order correct for desktop navigation, vertical list order is incorrect for mobile navigation.

I have an unordered list for my menu. It shows in the correct order when viewed as a horizontal menu for desktop screen size, but when viewed as mobile screen size, the vertical list appears in the reversed order, as in my contact button is listed first instead of last. Thank you in advance for your help :)

Craig Watson
Craig Watson
27,930 Points
Craig Watson
Craig Watson
27,930 Points

Hi Ashley,

Could you post your code for us to take a look at and we can try and get to the bottom of it :)

Craig

Ashley Wile
Ashley Wile
8,452 Points
Ashley Wile
Ashley Wile
8,452 Points

I hope this helps. It is just a snippet, but contains all elements involved, minus the dropdown class as it is not used for my mobile design. Thank you again.

<body>
<nav>           
    <ul class="main-nav">                           
        <li class="main-nav-items">
            <a href="contact.php">Contact</a>
        </li>
        <li class="main-nav-items">
            <a href="self-storage.php">Self Storage</a>
        </li>
        <li class="main-nav-items">
            <a href="affiliates.php">Affiliates</a>
        </li>
        <li class="main-nav-items dropdown">
                <a href="#">Contractors</a>
        </li>
        <li class= "main-nav-items dropdown">
            <a href="#.php">Products</a>
        </li>
        <li class= "main-nav-items dropdown">
            <a href="#">Services</a>
        </li>
    </ul>
</nav>
</body>

@media (max-width: 460px){
        body {
            padding-top: 0.1%;
            background-color: #9EC6E9;
            background-size: cover;
            margin: 0 auto;
            max-width: 100%;        
        }

        .main-nav {
            position: relative;
            margin-top: 30%;
        }

        .main-nav-items { 
            position: relative;
            text-decoration: none;
            max-width: 85%;
            max-height: 17%;
            border-radius: 3;
            padding: 1%;
            margin: 1% auto;
            top: 50%;
            font-size: 1.3em;
            text-align: center;
            background-color: white;
            z-index: 1;
        }

       a {
            text-decoration: none;
            font-weight: bold;
            color: #38499E;
        } 
}

4 Answers

Craig Watson
Craig Watson
27,930 Points
Craig Watson
Craig Watson
27,930 Points

Hi Ashley,

My knowledge of php is mostly based around wordpress, but there looks to be a few things that may be contributing to some strange behavior.

In your header.php, you have a opening and closing head tag, header tag and then a body tag inside the header tag.

At the point you are including this partial you already have a opening and closing head tag. So when this is served up you will be getting something like this:

<head>
    <!-- Content of head from index.php-->

    <head>
        <!-- Content of head from header.php-->
    </head>

    <!-- Following is also from header.php-->
    <header>
        <body>
             <!-- Content from header.php -->
        </body>
    </header>

</head>

The reason for this is the location of your include with the head element in the index.php file.

Typically I would have expected to see the following:

<!-- ** Header.php File ** -->

<head>
    <!-- Content of head from header.php -->
</head>

<!-- Header -->
<header>
    <div>
        <!-- Content of div you have in header.php-->
    </div>
    <nav>
        <!-- All your nav content that you currently have header.php -->
    </nav>
</header>
<!-- //Close Header -->

<!-- **//Close Header.php File ** -->


<!-- ** Index.php File ** -->

<?php 
    include("inc/header.php");  
?>

<body>
    <!-- Content that will change for each page -->

<?php 
    include("inc/footer.php");  
?>

<!-- **//Close Index.php File ** -->


<!-- ** Footer.php File ** -->

<!-- Footer -->
<footer>
    <!-- Content of footer to be displayed on each page -->
</footer>
<!-- //Close Footer -->

<!-- remaining script tags -->
<script type="text/javascript" src=""></script>

<!-- //Close body tag -->
</body>

<!-- **//Close Footer.php File ** -->

The wrapping of the head I would expect will cause some strange problems as well as the body tag being nested.

In you css you seem to be using floats to arrange the items of the nav. on large screens give your list items "display: inline-block" and then at smaller screen sizes "display: block" this will prevent and floats that are pushing there way around the page :)

If the problem still persists let be know i will do my best to help :)

Craig

Ashley Wile
Ashley Wile
8,452 Points
Ashley Wile
Ashley Wile
8,452 Points

So...this project has been part -time while learning. After additional nav elements displayed properly I realized...remembered that I reordered the list because it did not display properly originally horizontally. I completely forgot and focused too much on the mobile not working. Sorry to waste your time and mine. Back to the desktop version.

Craig Watson
Craig Watson
27,930 Points
Craig Watson
Craig Watson
27,930 Points

Hi Ashley,

The first little thing I can see is there are some spaces after the = signs prior to the "Class Names" which may well be throwing off some of your css.

I cant see anything that would suggest the items would be in reverse order in your CSS.

If this doesn't help you can always take a full snapshot of your workspace in the top right, this will give you a link you can post on here for me to have a look through all the code without having to copy and paste it all :)

Craig

Ashley Wile
Ashley Wile
8,452 Points
Ashley Wile
Ashley Wile
8,452 Points

Thank you for your help! I have not had the chance to go through and clean my code up yet so I appreciate your guidance. Everything still works :) ... but it did not fix my issue with the vertical list order. I know this has happened to me before. Not when down-sized for mobile but at desktop size. I did eventually fix it but never really knew how I did it. Going to investigate some old code. Feel free to keep picking! I will post if I solve the issue :)

Craig Watson
Craig Watson
27,930 Points
Craig Watson
Craig Watson
27,930 Points

I have come across this link which might help :)

Ted Sumner
Ted Sumner
Courses Plus Student 17,967 Points

I will take a look when I have a computer and am not sitting in the sun with an iPad. I have found that more code is better.

Ted Sumner
PLUS
Ted Sumner
Courses Plus Student 17,967 Points
Ted Sumner
Ted Sumner
Courses Plus Student 17,967 Points

This is a known issue that was discussed in one of the videos. I don't remember exactly what is was, but I solved my similar issue by using flexbox. But it requires vendor prefixes and a fallback menu. The prefixes are easy with Sass and Compass, however.

If you post your large code it will help refresh my memory.