Responsive Navigation with Modernizr

index.html

   <div class="container">
        <header class="page-header cf">
            <div class="logo">
                <img src="http://placehold.it/200x200" alt="placeholder logo">
            </div>
            <h1>My Site Title</h1>
        </header>

        <!--    NAVIGATION-->
<div class="menu"> <a href="#" id="menu_button">Menu</a> </div>
        <nav id="main_nav">
            <ul>
                <li><a href="index.html">Home</a></li>
                <li><a href="register.html">Register</a></li>
                <li><a href="election-day.html">Vote</a></li>
                <li><a href="candidates.html">Candidates</a></li>
                <li><a href="events.html">Events</a></li>
                <li><a href="resources.html">Resources</a></li>
            </ul>
        </nav>
        <!--end mai-n_nav -->
<div class="main-content cf">
          <!-- Dummy Content -->
          <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Corporis, enim! Magnam, quia, libero. Recusandae ipsa aperiam exercitationem, debitis autem, obcaecati, dolorum laboriosam labore et sapiente nulla nam sequi libero dignissimos!</p>
          <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Illum explicabo officia cumque, alias obcaecati natus, praesentium sapiente, eius blanditiis totam eaque molestiae consequatur? Nemo facere, doloribus iure commodi perspiciatis praesentium.</p>
  
     <p><img src="http://placehold.it/800x800" alt="dummy image" /></p>
   <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Illum explicabo officia cumque, alias obcaecati natus, praesentium sapiente, eius blanditiis totam eaque molestiae consequatur? Nemo facere, doloribus iure commodi perspiciatis praesentium.</p>
  </div>
        <!--    Example to go back to the top of the page-->
        <a href="#top">Top</a>
        <footer>
            <p>&copy; Chris Stein 2016</p>
        </footer>
    </div>

responsive-navigation-with-modernizr.markdown

Responsive Navigation with Modernizr

This uses Modernizr and jQuery to make a responsive nav that changes at a breakpoint and uses jQuery on the mobile version to slide in and out.

A Pen by Christopher Stein on CodePen.

License.

script.js

jQuery(document).ready(function ($) {
            // Your jQuery code here, using $ to refer to jQuery.
            /* 
               This is the code to slide the main navigation up and down.
            */
            $('#menu_button').click(function (evt) {
                console.log('evt', evt);
                evt.preventDefault();
                $('#main_nav').slideToggle();
            }); //end menu_button
            //this code taken from Sebastien on Stackoverflow: http://stackoverflow.com/questions/6461300/triggering-jquery-with-css-media-queries
            //it's been rearranged slightly
            //leave the lines below and then write your code in the doneResizing function below
            doneResizing();
            var id;
            $(window).resize(function () {
                clearTimeout(id);
                id = setTimeout(doneResizing, 0);
            });

            function doneResizing() {
                //this code requires that you have Modernizr included BEFORE this file. Here is modernizr: https://modernizr.com/
                //the trick with min-width media queries is that you need to start from your largest and go down. In the else at the end you can write  js for any size below your smallest min-width.
                if (Modernizr.mq('screen and (min-width:45em)')) {
                    $('#main_nav').show(); //make sure it is showing at larger sizes
                }
                else {
                    //Your code goes here for screens below 45em in this example. 
                    $('#main_nav').hide(); //make sure hiding at smaller sizes
                }
              console.log('resized');
            } //end doneResizing
        });

scripts

<script src="https://cdnjs.cloudflare.com/ajax/libs/modernizr/2.8.3/modernizr.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>

style.css

/* ============================
* Clearfix
* Modified from: http://nicolasgallagher.com/micro-clearfix-hack/
* If you already have a clearfix then you can ignore this.
* =============================*/

/**
 * For modern browsers
 * 1. The space content is one way to avoid an Opera bug when the
 *    contenteditable attribute is included anywhere else in the document.
 *    Otherwise it causes space to appear at the top and bottom of elements
 *    that are clearfixed.
 * 2. The use of `table` rather than `block` is only necessary if using
 *    `:before` to contain the top-margins of child elements.
 */
.cf:before,
.cf:after {
    content: " "; /* 1 */
    display: table; /* 2 */
  clear: both;
}

.cf:after {
    clear: both;
}

/**
 * For IE 6/7 only
 * Include this rule to trigger hasLayout and contain floats.
 */
.cf {
    *zoom: 1;
}
/* ============================
* NAVIGATION
* Modified from: http://webdesign.tutsplus.com/tutorials/htmlcss-tutorials/a-simple-responsive-mobile-first-navigation/
* =============================*/
/* line 6, /Volumes/Samsung_T3/MMP 240/Election Project/election-project/sass/_navigation.scss */
#main_nav {
  clear: both;
  display: none;
  /*hidden to start */
}

/* line 11, /Volumes/Samsung_T3/MMP 240/Election Project/election-project/sass/_navigation.scss */
#main_nav ul {
  list-style: none;
  line-height: 1;
  margin: 0;
  padding: 0;
}

/* line 18, /Volumes/Samsung_T3/MMP 240/Election Project/election-project/sass/_navigation.scss */
#main_nav li {
  margin-bottom: 0;
}

/* line 22, /Volumes/Samsung_T3/MMP 240/Election Project/election-project/sass/_navigation.scss */
#main_nav li a {
  display: block;
  color: #fff;
  background-color: #555;
  text-transform: uppercase;
  padding: 0.625em;
  /* 10px in ems is 10/16 */
  text-decoration: none;
  border-bottom: 1px solid #eee;
  font-weight: 900;
}

/* line 33, /Volumes/Samsung_T3/MMP 240/Election Project/election-project/sass/_navigation.scss */
#main_nav li a:hover {
  color: #555;
  background-color: #fff;
}

/* line 38, /Volumes/Samsung_T3/MMP 240/Election Project/election-project/sass/_navigation.scss */
#main_nav li a:active {
  color: #555;
  background-color: #f90;
}

/* menu button */
/* line 45, /Volumes/Samsung_T3/MMP 240/Election Project/election-project/sass/_navigation.scss */
.menu {
  margin-top: 1em;
  margin-bottom: 1em;
}

/* line 50, /Volumes/Samsung_T3/MMP 240/Election Project/election-project/sass/_navigation.scss */
.menu a {
  padding: 0.5em 0.625em;
  /*10/16 */
  background-color: #555;
  border-radius: 5px;
  color: #fff;
  text-decoration: none;
}

/* line 59, /Volumes/Samsung_T3/MMP 240/Election Project/election-project/sass/_navigation.scss */
.menu a:hover {
  color: #555;
  background-color: #f90;
}

/* ==========================
*  Media Queries for Main Nav
*  ========================== */
/* these don't have to be separate. We did so for two reasons:
1. Easy to copy and paste this into new design
2. Depending on your site you may need separate break points for the nav. You may want to see what width is needed to fit your nav horizontally without breaking and use that as the breakpoint.
It should also be noted that there is only one media query because this CSS moves the nav to the top where it can stay for all of the other sizes.
*/
/* 45em is about 720px depending on the base font-size */
@media only screen and (min-width: 45em) {
  /* hide the menu button */
  /* line 81, /Volumes/Samsung_T3/MMP 240/Election Project/election-project/sass/_navigation.scss */
  .menu {
    display: none;
  }
  /* line 84, /Volumes/Samsung_T3/MMP 240/Election Project/election-project/sass/_navigation.scss */
  #main_nav {
    /* move main_nav to top of the screen */
/*     position: absolute;
    top: 0;
    left: 0; */
    /* other main nav styling */
    width: 100%;
    display: block;
    overflow: hidden;
    background-color: #555;
  }
  /* line 96, /Volumes/Samsung_T3/MMP 240/Election Project/election-project/sass/_navigation.scss */
  #main_nav li {
    display: inline;
    line-height: 1em;
  }
  /* line 100, /Volumes/Samsung_T3/MMP 240/Election Project/election-project/sass/_navigation.scss */
  #main_nav li a {
/*     float: left; */
    padding: 0.9375em;
    /* 10/16  and  15/16 */
    border-bottom: none;
  }
  /* line 106, /Volumes/Samsung_T3/MMP 240/Election Project/election-project/sass/_navigation.scss */
  #main_nav li a.top {
    display: none;
  }
  /* move the rest of the page down accordingly */
  /* line 110, /Volumes/Samsung_T3/MMP 240/Election Project/election-project/sass/_navigation.scss */
  .container {
    margin-top: 4em;
    /* adjust depending on the height of your nav */
  }
}

/* menu button */

.menu {
    margin-top: 1em;
    margin-bottom: 1em;
}

.menu a {
    padding: 0.5em 0.625em;
    /*10/16 */
    background-color: #555;
    border-radius: 5px;
    color: #fff;
    text-decoration: none;
}

.menu a:hover {
    color: #555;
    background-color: #f90;
}


/* ==========================
*  Media Queries for Main Nav
*  ========================== */


/* these don't have to be separate. We did so for two reasons:
1. Easy to copy and paste this into new design
2. Depending on your site you may need separate break points for the nav. You may want to see what width is needed to fit your nav horizontally without breaking and use that as the breakpoint. 
It should also be noted that there is only one media query because this CSS moves the nav to the top where it can stay for all of the other sizes.
*/


/* 45em is about 720px depending on the base font-size */

@media only screen and (min-width: 45em) {
    /* hide the menu button */
    .menu {
        display: none;
    }
    #main_nav {
        /* move main_nav to top of the screen */
/*         position: absolute;
        top: 0;
        left: 0; */
        width: 100%;
        display: block;
        overflow: hidden;
        /* should be the same as #main_nav li a background color above */
        background-color: #555;
    }
    #main_nav li {
        display: inline;
        line-height: 1em;
    }
    #main_nav li a {
        float: left;
        padding: 0.9375em;
        /* 10/16  and  15/16 */
        border-bottom: none;
    }
    #main_nav li a.top {
        display: none;
    }
    /* move the rest of the page down accordingly */
    .container {
        margin-top: 4em;
        /* adjust depending on the height of your nav */
    }
    #footer_nav {
        background-color: #fff;
    }
}



/* 
  ====================================
   These styles are page specific and you would need to change depending on how your page is laid out.
  ====================================
*/
/* responsive images */
img, video{
  width: auto;
  height: auto;
  max-width: 100%;
}
/* border-box model */
html {
  box-sizing: border-box;
}
*, *:before, *:after {
  box-sizing: inherit;
}

.page-header .logo{
  float:left;
  width: 25%;
}
.page-header h1{
  float: left;
  padding-left: 1em;
  width: 70%;
}

 .menu{
  clear: both;
}
/* .main-content{
  clear:both;
  float:none;
} */