Help on Real Projects

yeah of course! you can always ask questions and get feedback here or you can use stackoverflow:

http://stackoverflow.com/

You can always look for meet up's in your area. That's definitely help.

You can also post it here :) .

Thank! :)

Maybe you guys can help me with this one. I'm trying to figure out how to include a hamburger menu for the mobile version of the site. I made it work once before once, but it's not working anymore and I can't figure it out.

Here is my HTML for the navigation menu

<header class="main-header group">
    <h1 class="main-logo"><a href="index.html">Artist Friend</a></h1>
        <ul class="main-nav">
             <li class="nav-item"><a href="index.html">Portfolio</a></li>
             <li class="nav-item"><a href="bio.html">Bio</a></li>
             <li class="nav-item"><a href="contact.html">Contact</a></li>
    </ul>
        <a id="menu" class="svg-menu">
            <svg xmlns="http://wwww.w3.org/2000/svg" viewBox="0 0 24 24">
            <path d="M2 6h20v3H2zm0 5h20v3H2zm0 5h20v3H2z"/>
            </svg>
         </a>
</header>

I'm trying to use JavaScript, without jQuery.

<script>
    var menu = document.querySelector('#menu');
    var main = document.querySelector('.main-header');
    var drawer = document.querySelector('.main-nav');

    menu.addEventListener('click', function(e) {
        drawer.classList.toggle('open');
        e.stopProporation();
    });
    main.addEventListener('click', function() {
        drawer.classList.remove('open');
    });
</script>

and this is the CSS.

.main-nav {
    z-index: 10;
    background-color: #fff;
    width: 300px;
    position: absolute;
    /* This trasform moves the drawer off canvas. */
    -webkit-transform: translate(-300px, 0);
    -ms-transform: translate(-300px, 0);
    transform: translate(-300px, 0);
    /* Optionally, we animate the drawer. */
    -webkit-transition: -webkit-transform 0.3s ease;
    transition: transform 0.3s ease;
  }

 .main-nav, 
.open {
    -webkit-transform: translate(0, 0);
    -ms-transform: translate(0, 0);
    transform: translate(0, 0);
  }

.main-nav li {
    display: list-item;
    border-bottom: 1px solid #E0E0E0;
    width: 100%;
    text-align: left;
}

.svg-menu {
    display: inline-block;
    margin: 0 0 0 85%;
}
.svg-menu svg {
    width: 32px;
    fill: #E0E0E0;
}

Hi Katia, it's really important to make your website really accessible to people if you want help with building and/or debugging. I recommend keeping it on Github so people can pull it onto their machines and help you that way, either to debug or collaboratively code. It's pretty hard for most to just look at code of this size and give you an answer - they usually need to play around with it.

In answer to your specific question, firstly I point to what I've just written(!), and then I recommend you surrender and use Bootstrap!

Hi Katia,

With issues like this that a more complex than then just your basic challenge or basic sematic questions, I would suggest you create a code pen for this issue:

http://codepen.io/

This way people can interact with the browser and code easily. Personally I haven't used vanilla JS to create a responsive menu before, but if you wan to use jquery I recommend reading the blog below. It's very good.

http://blog.teamtreehouse.com/how-to-build-a-three-line-drop-down-menu-for-a-responsive-website-in-jquery

I hope this helps.