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

Posted by Henry Remache
Henry Remache
11,005 Points

Mobile Menu Responsive

Ok so I have some trouble creating a mobile responsive menu I found a jquery plugin that i liked (http://webdesignerwall.com/tutorials/mobile-navigation-design-tutorial).

Henry Remache
Henry Remache
11,005 Points

My first probrlem is that when I open the menu and I go back to the normal size it disappears the menu does not go to normal, and mi second problem is that I am trying to optimize the view for mobile but the menu keeps open in just one side of the page and I want it to be open to the left of the icon. I will really appreciate any help with the css here is my code so far

      <!DOCTYPE html>
<html lang="es">
    <head>
        <title>Kamaleon</title>
        <meta charset="utf-8">
        <link rel="stylesheet" type="text/css" href="css/normalize.css">
        <link rel="stylesheet" type="text/css" href="css/style.css">
        <meta name="viewport" content="width=device-width, initial-scale=1.0" />
        <!-- Menu Mobil -->
        <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.7/jquery.min.js"></script>
            <script type="text/javascript">
            jQuery(document).ready(function($){
            /* prepend menu icon */ 
            $('#nav-wrap').prepend('<div id="menu-icon"></div>');
            /* toggle nav */
            $("#menu-icon").on("click", function(){
            $("#nav").slideToggle();
            $(this).toggleClass("active");
            });
            });
        </script>
        <!-- Menu Mobil -->
        <!-- FUENTES -->
        <link href='http://fonts.googleapis.com/css?family=Great+Vibes|Oswald:400,300|Open+Sans' rel='stylesheet' type='text/css'>
    </head>
    <body>
        <header id="header">
            <div class="contenedor-navegador">
                <img src="imagenes/kamaleon-logo.png" alt="kamaleon">
                <nav id="nav-wrap">
                    <ul id="nav">
                        <li><a href="#">Kamaleon</a></li>
                        <li><a href="#">TecnologĂ­a</a></li>
                        <li><a href="#">Quienes Somos</a></li>
                        <li><a href="#">Contacto</a></li>
                    </ul>
                </nav>
            </div>
        </header>
        <div id="section-1">
        </div>
        <div id="section-2">
        </div>
        <div id="section-3">
        </div>
        <div id="section-4">
        </div>
    </body>
</html>

This is my css code 

          /**************************************************************************
MAIN HEADER 
Fuentes: 
font-family: 'Great Vibes', cursive;
font-family: 'Oswald', sans-serif;
font-family: 'Open Sans', sans-serif;

**************************************************************************/
* {
    margin: 0;
    padding: 0;
    font-family: sans-serif;
}

#header {
    width: 100%;
    position: fixed;
    background-color: #020A19;
    top: 0;
    left: 0;
    right: 0;
}

.contenedor-navegador {
    margin: 25px 79px;
}

.contenedor-navegador img {
    width: 103px;
}

nav {
    float: right;
    width: 70%;
    margin-top: 32.25px;

}

nav ul {
    display: flex;
    justify-content: space-around;
}

nav li {
    display: inline-block;
}

nav li a {
    color: #2f9f46;
    text-decoration: none;
    font-family: 'Oswald', sans-serif;
    font-size: 1.5em;
    font-weight: 300;
    cursor: pointer;
    letter-spacing: 0.15em;
}
nav li a:hover {
    color: white;

}

/**************************************************************************
BODY PAGE 
**************************************************************************/

div#section-1 {
    width: 100%;
    height: 100vh;
    background: url('../imagenes/kamaleon.jpg') no-repeat;
    background-size: cover;
}

div#section-2 {
    width: 100%;
    height: 100vh;
    background: url('../imagenes/tecnologia.jpg') no-repeat;
    background-size: cover;
}
div#section-3 {
    width: 100%;
    height: 100vh;
    background: url('../imagenes/quienes.jpg') no-repeat center;
    background-size: cover;
}

div#section-4 {
    width: 100%;
    height: 100vh;
    background: url('../imagenes/contacto.jpg') no-repeat center;
    background-size: cover;
}





/**********************************************************************************************************************
Media Queries 
***********************************************************************************************************************/
/* Smartphones (portrait and landscape) ----------- */
@media only screen and (min-width : 280px) and (max-width : 480px) {
        .contenedor-navegador {
            margin: 25px 50px;
        }

        .contenedor-navegador img {
            width: 80px;
        }


        #menu-icon {
            color: transparent;
            width: 10px;
            height: 10px;
            background: url('../imagenes/menu-icon.png') no-repeat;
            padding: 8px 8px 8px 8px;
            cursor: pointer;
            display: block;
            float: right;

        }

        #nav {
            clear: both;
            float: right;
            top: 60px;
            width: 150px;
            z-index: 10000;
            padding: 15px;
            background: #020A19;
            border: solid 1px #999;
            display: none;
        }   

}

/* iPads (portrait and landscape) ----------- */
@media screen and (min-width : 480px) and (max-width : 1024px) {
        #menu-icon {
            color: transparent;
            width: 10px;
            height: 10px;
            background: url('../imagenes/menu-icon.png') no-repeat;
            padding: 8px 8px 8px 8px;
            cursor: pointer;
            display: block;
            float: right;

        }

        #nav {
            clear: both;
            float: right;
            top: 60px;
            width: 150px;
            z-index: 10000;
            padding: 15px;
            background: #020A19;
            border: solid 1px #999;
            display: none;
        }
}

1 Answer

Henry Remache
Henry Remache
11,005 Points

Guil Hernandez any input?