<header class="fixed-top">

    <nav class="sub green-bg">
      <div class="container-fluid">
        <div class="row">
          <div class="col-12">
            <div class="d-flex align-items-center">
              <ul class="list-inline mr-auto">
                      
                <li class="list-inline-item mr-3">
                  <a href="#">Plan Your Hocking Hills Vacation >></a>
                </li>
                
              </ul>

              <ul class="list-inline mx-auto">
    
              </ul>


              <ul class="list-inline ml-auto">
                      
                
                <li class="list-inline-item mr-3 ">
                  <a class="uc" href="#">Contact</a>
                </li>

                <li class="list-inline-item mr-3 social">
                  <a href="#" target="_blank"><i class="fab fa-facebook-square"></i></a>
                </li>
                <li class="list-inline-item mr-3 social">
                  <a href="#" target="_blank"><i class="fab fa-instagram"></i></a>
                </li>
                <li class="list-inline-item mr-3 social">
                  <a href="#"><i class="fab fa-youtube-square" target="_blank"></i></a>
                </li>
              </ul>

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


    <nav id="primaryNav" class=" navbar navbar-expand-lg navbar-light main bg-light ">
      <div class="container-fluid">
        
        <a class="navbar-brand" href="#"><img class="img-fluid nav-logo" src="https://gohocking.com/wp-content/themes/gohocking-theme/assets/img/logo-small.png"></a>

        <button class="navbar-toggler" data-target="#goHockingNavbarMain" data-toggle="collapse" type="button"><span class="navbar-toggler-icon"></span></button>

        <div class="collapse navbar-collapse" id="goHockingNavbarMain">
          <ul class="navbar-nav ml-auto">
            

            <li class="nav-item dropdown position-static">
              <a class="nav-link dropdown-toggle" data-toggle="dropdown" href="#" id="navbarDropdown" role="button">Places&nbsp;To&nbsp;Go</a>
              <ul class="dropdown-menu megamenu">
                <div class="row">
                  <li class="col-md-3">
                    <ul>
                      <h6 class="list-header"><a href="#">Hocking Hills State Park</a></h6>
                      <hr>
                      <li>
                        <a href="#">Old Man’s Cave</a>
                      </li>
                      <li>
                        <a href="#">Ash Cave</a>
                      </li>

                      <li>
                        <a href="#">Cedar Falls</a>
                      </li>

                      <li>
                        <a href="#">Rock House</a>
                      </li>

                      <li>
                        <a href="#">Conkle’s Hollow</a>
                      </li>

                      <li>
                        <a href="#">Cantwell Cliffs</a>
                      </li>
                      <li>
                        <a href="#">Hemlock Bridge Trail to Whispering Cave</a>
                      </li>

                    </ul>
                  </li>
                  <li class="col-md-3">
                    <ul>
                      <h6 class="list-header"><a href="#">Parks & Public Lands</a></h6>
                      <hr>
                      <li>
                        <a href="#">Lake Logan</a>
                      </li>
                      <li>
                        <a href="#">Hocking River</a>
                      </li>
                      <li>
                        <a href="#">Wayne National Forest</a>
                      </li>
                      <li>
                        <a href="#">Lake Hope</a>
                      </li>
                      <li>
                        <a href="#">Clear Creek Metro Park</a>
                      </li>
                      <li>
                        <a href="#">John Glenn Astronomy Park</a>
                      </li>
                      <li>
                        <a href="#">Tar Hollow</a>
                      </li>
                      <li>
                        <a href="#">Moonville Tunnel</a>
                      </li>

                    </ul>
                  </li>
                  <li class="col-md-3">
                    <ul>
                      <h6 class="list-header"><a href="#">Town Square</a></h6>
                      <hr>
                      <li>
                        <a href="#">Downtown Logan</a>
                      </li>
                      <li>
                        <a href="#">Playgrounds</a>
                      </li>
                    </ul>
                  </li>
                  <li class="col-md-3">
                    <ul  class="mega-content">
                      <h6 class="list-header">Featured Destination</h6>
                      <hr>
                       <a href="#">
                        <img class="img-fluid" src="https://gohocking.com/wp-content/themes/gohocking-theme/assets/img/featured-ash-cave.jpg">
                        <h5 class="list-subheader mt-2">Ash Cave</h5>
                      </a>
                        <p>Discover the breathtaking 700 foot wide cave ledge and its 90 foot waterfall at this easy-to-reach destination!</p>
                        <p class="read-more"><a href="#">Read More</a></p>
                      
                    </ul>
                  </li>
                </div>
              </ul>
            </li>

            <li class="nav-item dropdown position-static">
              <a class="nav-link dropdown-toggle" data-toggle="dropdown" href="#" id="navbarDropdown" role="button">Things&nbsp;To&nbsp;Do</a>
              <ul class="dropdown-menu megamenu">
                <div class="row">
                  <li class="col-md-3">
                    <ul>
                      <h6 class="list-header"><a href="#">Adventure & Recreation</a></h6>
                      <hr>
                  
                      <li>
                        <a href="#">Camping</a>
                      </li>
                      <li>
                        <a href="#">Hiking</a>
                      </li>
                      <li>
                        <a href="#">Bicycling</a>
                      </li>
                      <li>
                        <a href="#">Farms</a>
                      </li>
                      <li>
                        <a href="#">ATVs</a>
                      </li>
                      <li>
                        <a href="#">Zipline & Canopy Tours</a>
                      </li>
                      <li>
                        <a href="#">Canoeing</a>
                      </li>
                      <li>
                        <a href="#">Fishing</a>
                      </li>
                      <li>
                        <a href="#">Hunting</a>
                      </li>
                      <li>
                        <a href="#">Boating</a>
                      </li>
                      <li>
                        <a href="#">Rock Climbing & Rappelling</a>
                      </li>
                      <li>
                        <a href="#">Horseback Riding</a>
                      </li>
                      <li>
                        <a href="#">Stargazing</a>
                      </li>
                    </ul>
                  </li>

                  <li class="col-md-3">
                    <ul>
                      <h6 class="list-header"><a href="#">Local Culture & Lifestyle</a></h6>
                      <hr>
                      <li>
                        <a href="#">Scenic Drives</a>
                      </li>
                      <li>
                        <a href="#">Arts & Antiques</a>
                      </li>
                      <li>
                        <a href="#">Family Attractions</a>
                      </li>
                      <li>
                        <a href="#">Dining</a>
                      </li>
                      <li>
                        <a href="#">Shopping</a>
                      </li>
                      <li>
                        <a href="#">Tours</a>
                      </li>
                      <li>
                        <a href="#">Museums</a>
                      </li>
                      <li>
                        <a href="#">Golfing</a>
                      </li>
                      <li>
                        <a href="#">Indoor Activities</a>
                      </li>
                      <li>
                        <a href="#">Spas & Wellness</a>
                      </li>
                      <li>
                        <a href="#">Entertainment</a>
                      </li>

                      
                    </ul>
                  </li>
                  <li class="col-md-3">
                    <ul>
                      <h6 class="list-header"><a href="#">Event Planning</a></h6>
                      <hr>
                      <li>
                        <a href="#">Festivals & Events</a>
                      </li>
                      <li>
                        <a href="#">Weddings</a>
                      </li>
                      <li>
                        <a href="#">Reunions</a>
                      </li>
                      <hr>
                      <h6 class="list-header"><a href="#">Events Calendar</a></h6>
                      <hr>
                      <h6 class="list-header"><a href="#">Local Business Directory</a></h6>
                      
                    </ul>
                  </li>
                  <li class="col-md-3">
                    <ul class="mega-content">
                      <h6 class="list-header">Featured Adventure</h6>
                      <hr>

                      <a href="#">
                        <img class="img-fluid" src="https://gohocking.com/wp-content/themes/gohocking-theme/assets/img/canoe-small.jpg">
                        
                        <h5 class="list-subheader mt-2">River Canoe Trip</h5>
                      </a>
                      <p>Enjoy the perfect lazy day on the Hocking River with friends and family drifting in canoes and kayaks.</p>
                      <p class="read-more"><a href="#">Read More</a></p>
                    </ul>
                  </li>
                </div>
              </ul>
            </li>

            <li class="nav-item dropdown position-static">
              <a class="nav-link dropdown-toggle" data-toggle="dropdown" href="#" id="navbarDropdown" role="button">Places&nbsp;To&nbsp;Stay</a>
              <ul class="dropdown-menu megamenu">
                <div class="row">
                  <li class="col-md-3">
                    <ul>
                      <a href="#">
                        <h6 class="list-header">Cabins & Vacation Rentals</h6>
                        <img class="img-fluid" src="https://gohocking.com/wp-content/themes/gohocking-theme/assets/img/places-to-stay-small-4.jpg">
                      </a>


                      <hr class="my-2">
                      
                      <a href="#">
                        <h6 class="list-header">Hotels & Motels</h6>
                        <img class="img-fluid" src="https://gohocking.com/wp-content/themes/gohocking-theme/assets/img/places-to-stay-small-6.jpg">
                      </a>
                     
                    </ul>
                  </li>
                  <li class="col-md-3">
                    <ul>
                      <a href="#">
                        <h6 class="list-header">Campsites</h6>
                        <img class="img-fluid" src="https://gohocking.com/wp-content/themes/gohocking-theme/assets/img/places-to-stay-small-3.jpg">
                      </a>
                      
                      <hr class="my-2">
                     
                      <a href="#">
                        <h6 class="list-header">RV Camping</h6>
                        <img class="img-fluid" src="https://gohocking.com/wp-content/themes/gohocking-theme/assets/img/places-to-stay-small-1.jpg">
                      </a>

                    </ul>
                  </li>
                  <li class="col-md-3">
                    <ul>
                      
                      <a href="#">
                        <h6 class="list-header">Bed & Breakfasts</h6>
                        <img class="img-fluid" src="https://gohocking.com/wp-content/themes/gohocking-theme/assets/img/places-to-stay-small-2.jpg">
                      </a>

                      <hr class="my-2">
                      
                      <a href="#">
                        <h6 class="list-header">Air BnB</h6>
                        <img class="img-fluid" src="https://gohocking.com/wp-content/themes/gohocking-theme/assets/img/places-to-stay-small-5.jpg">
                      </a>

                    </ul>
                  </li>
                  <li class="col-md-3">
                    <ul  class="mega-content">
                      <h6 class="list-header"><a href="#">Explore Accommodations</a></h6>
                      <hr>

                      <p class="mt-5">Whether you prefer a luxury cabin retreat with all the creature comforts of a cozy getaway or the rustic charm of a family-friendly campground, Hocking Hills has you covered. We’ve got a variety of lodging options for any budget and any size group. As you plan your visit to Hocking, explore the many different options for where to stay.</p>
                      <p class="hero-cta">
                        <a href="#">
                          <div class="btn-group" role="group" aria-label="Basic example">
                            <button type="button" class="btn btn-yellow  uc">Places To Stay</button>
                            <button type="button" class="btn btn-dark"><i class="fas fa-long-arrow-alt-right"></i></button>
                          </div>
                        </a>
                        
                      </p>
                    </ul>
                  </li>
                </div>
              </ul>
            </li>

            <li class="nav-item">
              <a class="nav-link" href="#">Pro&nbsp;Tips</a>
            </li>


            <li class="nav-item">
              <a class="nav-link" href="#">About</a>
            </li>

            <li class="nav-item dropdown">
              <a class="nav-link dropdown-toggle btn-nav" data-toggle="dropdown" href="#" id="navbarDropdown" role="button">Shop Merch</a>
              <div class="dropdown-menu" aria-labelledby="navbarDropdown">
                <a class="dropdown-item uc" href="#">All Merch</a>
                <div class="dropdown-divider"></div>
                <a class="dropdown-item uc" href="#">Adult APPAREL</a>
                <a class="dropdown-item uc" href="#">Kids APPAREL</a>
                <a class="dropdown-item uc" href="#">Accessories</a>
                
              </div>
            </li>
   
          </ul>
        </div>
      </div>
    </nav>

  </header>

<div class="main-content">
  


<h2 class="spacer text-center">Content</h2>

<h2 class="spacer text-center">More Content</h2>

<h2 class="spacer text-center">More Content</h2>

<h2 class="spacer text-center">More Content</h2>

<h2 class="spacer text-center">More Content</h2>

<h2 class="spacer text-center">More Content</h2>

<h2 class="spacer text-center">More Content</h2>

<h2 class="spacer text-center">More Content</h2>
</div>
/* Navigation Sub
------------------------------------- */


nav.sub {
	/*border-bottom: 1px solid #ebebeb;*/
  border-bottom: none;
	padding:6px;
}
nav.sub ul{
  margin:0;
}
nav.sub ul li{
  font-size: 14px;
  font-weight: 200;
}
nav.sub ul li.social{
  font-size: 20px;
}

nav.sub a{
  color:#f3e5c3;
}

/* Navigation Main
------------------------------------- */
nav.main {

}

.navbar.bg-light{
  background-color: #fff !important;
}

.navbar-light .navbar-nav .nav-link{
  color: rgb(93, 105, 65);
}

nav.main .nav-logo {
	max-width: 230px;
	width: 100%;
}
nav.main ul {
	padding-left: 0;
	list-style-type: none;
}

#goHockingNavbarMain .nav-item{
  text-transform: uppercase;
  padding:0 6px;
  font-size: 16px;
}
/* ------ Mega Menu ------ */
nav.main .megamenu {
	padding: 20px 40px;
	position: absolute;
	top: auto;
	left: 0;
	right: 0;
	/*max-width: 1500px;*/
	width: 100%;
	margin-left: auto;
	margin-right: auto;
 /* height:100vh;*/
}

nav.main .megamenu .list-header, nav.main .megamenu .list-header a{
  color: rgb(93, 105, 65);
}

nav.main .megamenu .list-subheader{
  color: rgb(93, 105, 65);
  font-size: 18px;
  font-weight: 500;
}
nav.main .megamenu li{
  
font-size: 15px;
font-weight: 400; 
line-height: 22px;
margin-bottom: 20px; 

}

nav.main .megamenu .mega-content p{
  
font-size: 14px;
line-height: 20px;
font-weight: 300;  
text-transform: none;

}

nav.main .read-more{
  font-size: 16px;
  font-weight: 100;
}
nav.main .read-more a{
  color: rgb(93, 105, 65);
}


/* ------ Mid Menu ------ */
nav.main .midmenu {
	position: absolute;
	padding: 20px 20px;
	float: left;
	top: auto;
	left: auto;
	right: auto;
	max-width: 650px;
	width: 100%;
	margin-left: auto;
	margin-right: auto;
}
.dropdown-menu.megamenu.midmenu.show {
    right: 0;
  }
  .dropdown-menu.show {
    right: 0;
  }

.btn-nav{
  background-color: #e97d24 !important;
  color:#fff !important;
}





/*// Medium devices (tablets, less than 992px)*/
@media (min-width: 992px) {

  #primaryNav{
    padding-top:0px;
    padding-bottom:0px;
  }
} 
/* =====           section   ========  */

@media (max-width: 1399px) {

}
/* Large devices (desktops, less than 1200px)*/
@media (max-width: 1199.98px) {
  #goHockingNavbarMain .nav-item{
    text-transform: uppercase;
    padding:0 4px;
    font-size: 14px;
  }
}


@media (max-width:1120px) and (min-width:992px) {
  
  #goHockingNavbarMain .nav-item{
    font-size: 13px;
  }

}
/*// Medium devices (tablets, less than 992px)*/
@media (max-width: 991.98px) {
 .fixed-top{
   position: static;
 }

 .navbar-light .navbar-nav .nav-link{
    padding: .5rem 1rem !important;
    display: inline-block;
 }

}

/*// Small devices (landscape phones, less than 768px)*/
@media (max-width: 767.98px) {


}
/* Extra small devices (portrait phones, less than 576px)*/
@media (max-width: 575.98px) {
  nav.sub {
    display: none;

  }

}

/* Extra small devices (portrait phones, less than 576px)*/
@media (max-width: 374px) {
  nav.main .nav-logo {
    max-width: 200px;
    width: 100%;
  }

}


@media (min-width: 992px) {
  .navbar-brand{
    padding-top:0px;
    padding-bottom: 0px;
  }
  .nav-link{
    padding: 1.5rem 1rem !important;
  }
}



/* unrelated styles for display */



.white{
	color:#fff !important;
}

.white-bg{
	background-color:#fff !important;
}

.brown{
  color: #746b5a !important;
}
.brown-bg{
  background-color: #746b5a !important;
}
.green{
	color:#90986b !important;
}
.green-bg{
	background-color:#90986b !important;
}

.darkGreen{
	color:#5d6941 !important;
}
.darkGreen-bg{
	background-color:#5d6941 !important;
}

.dark{
  color:#283d03 !important;
}

.light{
  color: rgba(251, 246, 232, 1) !important;
}
.light-bg{
  background-color: rgba(251, 246, 232, 1) !important;
}

.yellow{
	color:#f3e5c3 !important;
}
.yellow-bg{
	background-color:#f3e5c3 !important;
}

.lGray{
	color: #f8f8f8 !important;
}
.lGray-bg{
	background-color: #f8f8f8 !important;
}
/*buttons*/

.btn{
	border-radius: 0px !important;
}

.btn-info{
	color: #fff !important;
}
.btn-yellow{
	background-color:#f3e5c3 !important;
	color:#5d6941 !important;
}

.btn-dark{
	background-color:#5d6941 !important;
	color:#fff !important;
	border:none !important;
}

.btn-dark:hover{
  background-color: #7b7e74 !important;
}
/* end navbar*/



.main-content{
  margin-top:150px;
}
.spacer{
  text-align:center;
  padding-top:100px;
  padding-bottom:100px;
}


.megamenu{
  max-height: 100vh;
  overflow:auto;
  padding-bottom:200px;
  
}

@media screen and (min-width: 992px) {
  .megamenu {
    max-height: calc(100vh - 120px);
    overflow: auto;
  }
}

External CSS

  1. https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.5.0/css/bootstrap.min.css
  2. https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.2/css/all.min.css

External JavaScript

  1. https://cdnjs.cloudflare.com/ajax/libs/jquery/3.5.1/jquery.min.js
  2. https://cdnjs.cloudflare.com/ajax/libs/popper.js/2.4.4/umd/popper.min.js
  3. https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.5.2/js/bootstrap.min.js