redgeoff · March 31, 2017 22:40
diff --git a/index.html b/index.html

 <!DOCTYPE html>
 <html lang="en">
  <head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <!-- The above 3 meta tags *must* come first in the head; any other head content must come *after* these tags -->
    <title>GoExpo</title>

    <!-- Bootstrap -->
    <link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet">

    <!-- HTML5 shim and Respond.js for IE8 support of HTML5 elements and media queries -->
    <!-- WARNING: Respond.js doesn't work if you view the page via file:// -->
    <!--[if lt IE 9]>
      <script src="https://oss.maxcdn.com/html5shiv/3.7.3/html5shiv.min.js"></script>
      <script src="https://oss.maxcdn.com/respond/1.4.2/respond.min.js"></script>
    <![endif]-->
  </head>
  <body>


    <!-- Fixed navbar -->
    <nav class="navbar navbar-default navbar-fixed-top">
      <div class="container">
        <div class="navbar-header">
          <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#navbar" aria-expanded="false" aria-controls="navbar">
            <span class="sr-only">Toggle navigation</span>
            <span class="icon-bar"></span>
            <span class="icon-bar"></span>
            <span class="icon-bar"></span>
          </button>

          <!-- <a class="navbar-brand" href="#">Project name</a> -->
          <a class="navbar-brand" href="http://shotshow.org">
            <img src="http://shotshow.org/wp-content/uploads/shotshow-40th-logo-2x.png" height="30" />
          </a>

        </div>
        <div id="navbar" class="navbar-collapse collapse">
          <ul class="nav navbar-nav">

            <li class="dropdown mega-dropdown active-menu-item">
              <a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="false">Exhibitors <span class="caret"></span></a>
              <ul class="dropdown-menu mega-dropdown-menu columns">
                <li><a href="#">Exhibitors</a></li>
                <li><a href="#">Import</a></li>
                <li><a href="#">Import - Ignore Errors</a></li>
                <li><a href="#">Export</a></li>
                <li><a href="#">Specials</a></li>
                <li><a href="#">Not on FP</a></li>
                <li><a href="#">Pavilions</a></li>
                <li><a href="#">PRs</a></li>
                <li><a href="#">Confirmations</a></li>
              </ul>
            </li>

            <li class="dropdown mega-dropdown">
              <a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="false">Attendees <span class="caret"></span></a>
              <ul class="dropdown-menu mega-dropdown-menu columns">
                <li><a href="#">Attendees</a></li>
                <li><a href="#">Import Attendees</a></li>
                <li><a href="#">New Attendees</a></li>
                <li><a href="#">Export Attendees</a></li>
              </ul>
            </li>

          </ul>

          <ul class="nav navbar-nav navbar-right">

            <li class="dropdown">
              <a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="false">myusername <span class="caret"></span></a>
              <ul class="dropdown-menu">
                <li><a href="#"><span class="glyphicon glyphicon-log-out" aria-hidden="true"></span> Log Out</a></li>
              </ul>
            </li>
            <!-- <li><a href="#"><span class="glyphicon glyphicon-log-in" aria-hidden="true"></span> Log In</a></li> -->

          </ul>

        </div>
      </div>
    </nav>


    <div class="header">
      <div class="header-left">
        <div class="header-left-float">
          <a href="http://shotshow.org" title="NSSF SHOT Show 2017">
            <img class="header-left-image" src="http://shotshow.org/wp-content/uploads/shotshow-40th-logo-2x.png" />
          </a>
        </div>
      </div>
      <div class="header-right">
        <div class="header-right-float">
          <img class="header-right-image" src="http://shotshow.org/wp-content/uploads/dates-2018-2x.png" />
        </div>
      </div>
    </div>


    <div class="main">
      <div class="main-content">
        <div style="height:2000px;">
          <ol class="breadcrumb">
            <li><a href="#">Home</a></li>
          </ol>
          <h2>Sample Content</h2>
          <h3>Note: Scroll down to footer</h3>
        </div>
      </div>
      <div class="main-banners">
        <img class="main-ad" src="https://encrypted-tbn1.gstatic.com/images?q=tbn:ANd9GcS_zdM6UTsX-qPaFMBPiSNVi_YkIFKwuIHH87Doq8UvtgtxrPDn" />
        <img class="main-ad" src="https://encrypted-tbn1.gstatic.com/images?q=tbn:ANd9GcS_zdM6UTsX-qPaFMBPiSNVi_YkIFKwuIHH87Doq8UvtgtxrPDn" />
        <img class="main-ad" src="https://encrypted-tbn1.gstatic.com/images?q=tbn:ANd9GcS_zdM6UTsX-qPaFMBPiSNVi_YkIFKwuIHH87Doq8UvtgtxrPDn" />
        <img class="main-ad" src="https://encrypted-tbn1.gstatic.com/images?q=tbn:ANd9GcS_zdM6UTsX-qPaFMBPiSNVi_YkIFKwuIHH87Doq8UvtgtxrPDn" />
      </div>
    </div>


    <footer class="footer">
      <p>
        &copy; 2017 Core-Apps, LLC &middot;
        <a href="#">Privacy</a> &middot;
        <a href="#">Terms</a> &middot;
        <a href="#">Contact</a> &middot;
        <a href="#">About</a>
      </p>
    </footer>


    <style>

      body {
        /* Start the body just after the bottom of the fixed menu, even on mobile */
        padding-top: 50px;
      }

      /* Set the navbar height to match the height of the show logo */
      .navbar-nav li a {
       line-height: 30px;
      }

      .header {
        background-color: #eeeeee;
      }

      /* Use inline-block to vertically center the left part of the header */
      .header-left {
        display: inline-block;
        vertical-align: middle;
        width: 50%;
        padding: 20px;
      }

      .header-left-float {
        float: left;
      }

      .header-left-image {
        width: 100%;
        max-width: 500px;
      }

      /* Use inline-block to vertically center the right part of the header */
      .header-right {
        display: inline-block;
        vertical-align: middle;
        width: 49%;
        padding: 20px;
      }

      .header-right-float {
        float: right;
      }

      .header-right-image {
        width: 100%;
        max-width: 300px;
      }

      .footer {
        background-color: #eeeeee;
        padding: 20px;
      }

      /* Background color for the active menu item */
      .active-menu-item {
        background-color: #e7e7e7;
      }

      @media only screen and (min-width: 768px) {

        /* Enable hoving on mouse over when not on a tablet or phone */
        .dropdown:hover .dropdown-menu {
          display: block;
          margin-top: 0; // remove the gap so it doesn't close
        }

        /* Background color for the menu item when hovered over */
        .dropdown:hover {
          background-color: white;
        }

      }

      /* Hide the border to the dropdown menu so that it looks less busy */
      .dropdown-menu {
        border: none;
      }

      /* Implement a mega menu where the menu items stretch the entire width of the page */
      .mega-dropdown { position: static !important; }
      .mega-dropdown-menu {
        padding: 20px;
        width: 100%;
      }

      /* Only show columns in our menu if we are not on a tablet or phone */
      @media screen and (min-width: 768px) {
        .columns{
          -moz-column-count: 3;
          -webkit-column-count: 3;
          column-count: 3;
        }
      }


      .main {
 background-color: #333333;
        display: table;
        width: 100%;
        padding: 20px;
      }

      .main-content {
 background-color: #ffffff;
 padding: 20px;
        display: table-cell;
        vertical-align: top;
      }

      .main-banners {
 margin-top: 20px;
        display: table-cell;
        width: 260px;
        text-align: center;
      }

      .main-ad {
        padding: 0px 0px 20px 20px;
      }

      /* On medium devices, push the banners to the bottom of the page */
      @media screen and (max-width: 992px) {
        .main .main-content {
          display: block;
        }

        .main-banners {
          display: block;
          width: auto;
        }
      }


    </style>

    <!-- jQuery (necessary for Bootstrap's JavaScript plugins) -->
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
    <!-- Include all compiled plugins (below), or include individual files as needed -->
    <!-- <script src="js/bootstrap.min.js"></script> -->
    <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
  </body>
 </html>

	<!DOCTYPE html>
	<html lang="en">
	<head>
	<meta charset="utf-8">
	<meta http-equiv="X-UA-Compatible" content="IE=edge">
	<meta name="viewport" content="width=device-width, initial-scale=1">
	<!-- The above 3 meta tags must come first in the head; any other head content must come after these tags -->
	<title>GoExpo</title>

	<!-- Bootstrap -->
	<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet">

	<!-- HTML5 shim and Respond.js for IE8 support of HTML5 elements and media queries -->
	<!-- WARNING: Respond.js doesn't work if you view the page via file:// -->
	<!--[if lt IE 9]>
	<script src="https://oss.maxcdn.com/html5shiv/3.7.3/html5shiv.min.js"></script>
	<script src="https://oss.maxcdn.com/respond/1.4.2/respond.min.js"></script>
	<![endif]-->
	</head>
	<body>


	<!-- Fixed navbar -->
	<nav class="navbar navbar-default navbar-fixed-top">
	<div class="container">
	<div class="navbar-header">
	<button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#navbar" aria-expanded="false" aria-controls="navbar">
	<span class="sr-only">Toggle navigation</span>
	<span class="icon-bar"></span>
	<span class="icon-bar"></span>
	<span class="icon-bar"></span>
	</button>

	<!-- <a class="navbar-brand" href="#">Project name</a> -->
	<a class="navbar-brand" href="http://shotshow.org">
	<img src="http://shotshow.org/wp-content/uploads/shotshow-40th-logo-2x.png" height="30" />
	</a>

	</div>
	<div id="navbar" class="navbar-collapse collapse">
	<ul class="nav navbar-nav">

	<li class="dropdown mega-dropdown active-menu-item">
	<a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="false">Exhibitors <span class="caret"></span></a>
	<ul class="dropdown-menu mega-dropdown-menu columns">
	<li><a href="#">Exhibitors</a></li>
	<li><a href="#">Import</a></li>
	<li><a href="#">Import - Ignore Errors</a></li>
	<li><a href="#">Export</a></li>
	<li><a href="#">Specials</a></li>
	<li><a href="#">Not on FP</a></li>
	<li><a href="#">Pavilions</a></li>
	<li><a href="#">PRs</a></li>
	<li><a href="#">Confirmations</a></li>
	</ul>
	</li>

	<li class="dropdown mega-dropdown">
	<a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="false">Attendees <span class="caret"></span></a>
	<ul class="dropdown-menu mega-dropdown-menu columns">
	<li><a href="#">Attendees</a></li>
	<li><a href="#">Import Attendees</a></li>
	<li><a href="#">New Attendees</a></li>
	<li><a href="#">Export Attendees</a></li>
	</ul>
	</li>

	</ul>

	<ul class="nav navbar-nav navbar-right">

	<li class="dropdown">
	<a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="false">myusername <span class="caret"></span></a>
	<ul class="dropdown-menu">
	<li><a href="#"><span class="glyphicon glyphicon-log-out" aria-hidden="true"></span> Log Out</a></li>
	</ul>
	</li>
	<!-- <li><a href="#"><span class="glyphicon glyphicon-log-in" aria-hidden="true"></span> Log In</a></li> -->

	</ul>

	</div>
	</div>
	</nav>


	<div class="header">
	<div class="header-left">
	<div class="header-left-float">
	<a href="http://shotshow.org" title="NSSF SHOT Show 2017">
	<img class="header-left-image" src="http://shotshow.org/wp-content/uploads/shotshow-40th-logo-2x.png" />
	</a>
	</div>
	</div>
	<div class="header-right">
	<div class="header-right-float">
	<img class="header-right-image" src="http://shotshow.org/wp-content/uploads/dates-2018-2x.png" />
	</div>
	</div>
	</div>


	<div class="main">
	<div class="main-content">
	<div style="height:2000px;">
	<ol class="breadcrumb">
	<li><a href="#">Home</a></li>
	</ol>
	<h2>Sample Content</h2>
	<h3>Note: Scroll down to footer</h3>
	</div>
	</div>
	<div class="main-banners">
	<img class="main-ad" src="https://encrypted-tbn1.gstatic.com/images?q=tbn:ANd9GcS_zdM6UTsX-qPaFMBPiSNVi_YkIFKwuIHH87Doq8UvtgtxrPDn" />
	<img class="main-ad" src="https://encrypted-tbn1.gstatic.com/images?q=tbn:ANd9GcS_zdM6UTsX-qPaFMBPiSNVi_YkIFKwuIHH87Doq8UvtgtxrPDn" />
	<img class="main-ad" src="https://encrypted-tbn1.gstatic.com/images?q=tbn:ANd9GcS_zdM6UTsX-qPaFMBPiSNVi_YkIFKwuIHH87Doq8UvtgtxrPDn" />
	<img class="main-ad" src="https://encrypted-tbn1.gstatic.com/images?q=tbn:ANd9GcS_zdM6UTsX-qPaFMBPiSNVi_YkIFKwuIHH87Doq8UvtgtxrPDn" />
	</div>
	</div>


	<footer class="footer">
	<p>
	© 2017 Core-Apps, LLC ·
	<a href="#">Privacy</a> ·
	<a href="#">Terms</a> ·
	<a href="#">Contact</a> ·
	<a href="#">About</a>
	</p>
	</footer>


	<style>

	body {
	/* Start the body just after the bottom of the fixed menu, even on mobile */
	padding-top: 50px;
	}

	/* Set the navbar height to match the height of the show logo */
	.navbar-nav li a {
	line-height: 30px;
	}

	.header {
	background-color: #eeeeee;
	}

	/* Use inline-block to vertically center the left part of the header */
	.header-left {
	display: inline-block;
	vertical-align: middle;
	width: 50%;
	padding: 20px;
	}

	.header-left-float {
	float: left;
	}

	.header-left-image {
	width: 100%;
	max-width: 500px;
	}

	/* Use inline-block to vertically center the right part of the header */
	.header-right {
	display: inline-block;
	vertical-align: middle;
	width: 49%;
	padding: 20px;
	}

	.header-right-float {
	float: right;
	}

	.header-right-image {
	width: 100%;
	max-width: 300px;
	}

	.footer {
	background-color: #eeeeee;
	padding: 20px;
	}

	/* Background color for the active menu item */
	.active-menu-item {
	background-color: #e7e7e7;
	}

	@media only screen and (min-width: 768px) {

	/* Enable hoving on mouse over when not on a tablet or phone */
	.dropdown:hover .dropdown-menu {
	display: block;
	margin-top: 0; // remove the gap so it doesn't close
	}

	/* Background color for the menu item when hovered over */
	.dropdown:hover {
	background-color: white;
	}

	}

	/* Hide the border to the dropdown menu so that it looks less busy */
	.dropdown-menu {
	border: none;
	}

	/* Implement a mega menu where the menu items stretch the entire width of the page */
	.mega-dropdown { position: static !important; }
	.mega-dropdown-menu {
	padding: 20px;
	width: 100%;
	}

	/* Only show columns in our menu if we are not on a tablet or phone */
	@media screen and (min-width: 768px) {
	.columns{
	-moz-column-count: 3;
	-webkit-column-count: 3;
	column-count: 3;
	}
	}


	.main {
	background-color: #333333;
	display: table;
	width: 100%;
	padding: 20px;
	}

	.main-content {
	background-color: #ffffff;
	padding: 20px;
	display: table-cell;
	vertical-align: top;
	}

	.main-banners {
	margin-top: 20px;
	display: table-cell;
	width: 260px;
	text-align: center;
	}

	.main-ad {
	padding: 0px 0px 20px 20px;
	}

	/* On medium devices, push the banners to the bottom of the page */
	@media screen and (max-width: 992px) {
	.main .main-content {
	display: block;
	}

	.main-banners {
	display: block;
	width: auto;
	}
	}


	</style>

	<!-- jQuery (necessary for Bootstrap's JavaScript plugins) -->
	<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
	<!-- Include all compiled plugins (below), or include individual files as needed -->
	<!-- <script src="js/bootstrap.min.js"></script> -->
	<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
	</body>
	</html>