mlegg mlegg - 5 months ago 18
CSS Question

responsive horizontal menu doesn't work correctly on resizing

I made a responsive horizontal menu but when it sizes down for mobile and tablets, the menu list stacks on top of each other. I was trying to make it so that when it was smaller that a hamburger icon or menu only would show. Can you help? Here it is live link . Warning, there is auto sound that plays on that page. The menu.js file is in the root of the website.



body {
margin:0;
background-image:url(images/ocean.gif);
font-family:'Georgia;
font-size:100%;
padding-top: 20px;
padding-bottom: 20px;
color:#036;
}

#container {
width:90%;
margin:auto;
background-color:#fff;
}
#logo {
display: block;
width:90%;
margin:0 auto;
}
.tabs {
margin: 0;
padding: 0;
list-style: none;
display: table; /* [1] */
table-layout: fixed; /* [2] */
width: 100%; /* [3] */
}

.tabs__item {
width: 100%;
float: left;
}

@media screen and (min-width: 40em) {
.tabs__item {
display: table-cell; /* [4] */
float: none;
width: auto;
}
}

.tabs__link {
display: block; /* [6] */
}


/**
* Primary nav. Extends `.tabs`.
*
* 1. Stop tabs’ corners leaking out beyond our 4px round.
*/
.primary-nav {
text-align: center;
border-radius: 0;
overflow: hidden; /* [1] */
}

.primary-nav a {
padding: .75em 1em;
color: white;
background: #5EA5B9;
color: #fff;
text-decoration: none;
font-family: Georgia;
font-size: 18px;
}

.primary-nav a:hover {
color: #fff;
background: #FF0000;
}

/* Responsive-nav.js */

.js .nav-collapse {
clip: rect(0 0 0 0);
max-height: 0;
position: absolute;
display: block;
overflow: hidden;
zoom: 1;
}

.nav-collapse.opened {
max-height: 9999px;
}

.disable-pointer-events {
pointer-events: none !important;
}

.nav-toggle {
-webkit-tap-highlight-color: #5EA5B9;
-webkit-touch-callout: none;
-webkit-user-select: none;
-moz-user-select: none;
-ms-user-select: none;
-o-user-select: none;
user-select: none;
}

@media screen and (min-width: 40em) {
.js .nav-collapse {
position: relative;
}
.js .nav-collapse.closed {
max-height: none;
}
.nav-toggle {
display: none;
}
}

.nav-collapse {
list-style: none;
width: 100%;
float: left;
}

.fixed {
position: fixed;
width: 100%;
top: 0;
left: 0;
}

.nav-toggle {
position: fixed;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
-webkit-touch-callout: none;
-webkit-user-select: none;
-moz-user-select: none;
-ms-user-select: none;
user-select: none;
text-decoration: none;
text-indent: -999px;
position: relative;
overflow: hidden;
width: 70px;
height: 55px;
float: right;
}

.nav-toggle:before {
color: #5EA5B9; /* Edit this to change the icon color */
font-family: "responsivenav", Georgia;
font-style: normal;
font-weight: normal;
font-variant: normal;
font-size: 28px;
text-transform: none;
position: absolute;
content: "=";
text-indent: 0;
text-align: center;
line-height: 55px;
speak: none;
width: 100%;
top: 0;
left: 0;
}

.nav-toggle.active::before {
font-size: 24px;
content:"x";
}


#content {
clear:both;
position:relative;
padding:1.5em 5%;
}
a:link {
text-decoration: underline;
}

a:visited {
text-decoration: underline;
}

a:hover {
text-decoration: underline;
}

a:active {
text-decoration: underline;
}
h1 {
clear:both;
tet-align:center;
}
h2 {
clear:both;
}
h3 {
clear:both;
}
audio {
visibility:hidden;
height:0;
width:0;
}
#pauseplay {
float:right;
width:32px;
height:32px;
cursor:pointer;
}

/* Flexible iFrame */

.Flexible-container {
position: relative;
padding-bottom: 56.25%;
padding-top: 30px;
height: 0;
overflow: hidden;
}

.Flexible-container iframe,
.Flexible-container object,
.Flexible-container embed {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
}

img {
max-width: 100%;
height: auto;
}

.innerBox {
background-color : #ffffff;
background-repeat : repeat-y;
padding-top: 1em;
padding-left: 1em;
padding-right: 1em;
padding-bottom : 1em;
}

.map-responsive{
overflow:hidden;
padding-bottom:56.25%;
position:relative;
height:0;
}
.map-responsive iframe{
left:0;
top:0;
height:100%;
width:100%;
position:absolute;
}
/* SECTIONS */
.section {
clear: both;
padding: 0px;
margin: 0px;
}

/* COLUMN SETUP */
.col {
display: block;
float:left;
margin: 1% 0 1% 1.6%;
}
.col:first-child { margin-left: 0; }

/* GROUPING */
.group:before,
.group:after { content:""; display:table; }
.group:after { clear:both;}
.group { zoom:1; /* For IE 6/7 */ }

/* GRID OF TWO */
.span_2_of_2 {
width: 100%;
}
.span_1_of_2 {
width: 49.2%;
}

/* GO FULL WIDTH AT LESS THAN 480 PIXELS */

/* GRID OF THREE */
.span_3_of_3 { width: 100%; }
.span_2_of_3 { width: 66.13%; }
.span_1_of_3 { width: 32.26%; }

/* GO FULL WIDTH BELOW 480 PIXELS */
@media only screen and (max-width: 480px) {
.col { margin: 1% 0 1% 0%; }
.span_3_of_3, .span_2_of_3, .span_1_of_3 { width: 100%; }
}

/* GRID OF FOUR */
.span_4_of_4 {
width: 100%;
}
.span_3_of_4 {
width: 74.6%;
}
.span_2_of_4 {
width: 49.2%;
}
.span_1_of_4 {
width: 23.8%;
}

/* GO FULL WIDTH BELOW 480 PIXELS */
@media only screen and (max-width: 480px) {
.col { margin: 1% 0 1% 0%; }
.span_1_of_4, .span_2_of_4, .span_3_of_4, .span_4_of_4 { width: 100%; }
}


@media only screen and (max-width: 480px) {
.col {
margin: 1% 0 1% 0%;
}
}

@media only screen and (max-width: 480px) {
.span_2_of_2, .span_1_of_2 { width: 100%; }
}

#social {
margin:auto;
text-align:center;
}
ul.b {
list-style-type: disc;
}
#footer {
background:#5EA5B9;
width:90%;
margin:auto;
text-align:center;
font-family:Georgia;
font-size:90%;
color:#036;
padding:0.5em 0;
border-bottom-right-radius: 20px;
border-bottom-left-radius: 20px;
}
#footer a {
color:#fff;
text-decoration: underline;
}

/* Smartphones (portrait and landscape) ----------- */
@media only screen
and (min-device-width : 320px)
and (max-device-width : 480px) {
/* Styles */
}

/* Smartphones (landscape) ----------- */
@media only screen
and (min-width : 321px) {
/* Styles */
}

/* Smartphones (portrait) ----------- */
@media only screen
and (max-width : 320px) {
/* Styles */
}

/* iPads (portrait and landscape) ----------- */
@media only screen
and (min-device-width : 768px)
and (max-device-width : 1024px) {
/* Styles */
}

/* iPads (landscape) ----------- */
@media only screen
and (min-device-width : 768px)
and (max-device-width : 1024px)
and (orientation : landscape) {
/* Styles */
}

/* iPads (portrait) ----------- */
@media only screen
and (min-device-width : 768px)
and (max-device-width : 1024px)
and (orientation : portrait) {
/* Styles */
}

/* Desktops and laptops ----------- */
@media only screen
and (min-width : 1224px) {
/* Styles */
}

/* Large screens ----------- */
@media only screen
and (min-width : 1824px) {
/* Styles */
}

/* iPhone 4 ----------- */
@media
only screen and (-webkit-min-device-pixel-ratio : 1.5),
only screen and (min-device-pixel-ratio : 1.5) {
/* Styles */
}

<!DOCTYPE html>
<html lang="en">

<head>

<meta charset="utf-8">

<meta name="viewport" content="width=device-width, initial-scale=1">

<meta name="description" content="Pebble Cove, A Classic Motel. Stay With Us and Enjoy New Hampshire's Seacoast. This relaxed seasonal motel is 1 mile from Odiorne Point State Park, 5.8 miles from the center of Portsmouth and 9.3 miles from the Kittery Outlets shopping mall. Casual suites have free WiFi, full kitchens and TVs with cable channels. Some add extra bedrooms and separate living areas. Amenities include an outdoor swimming pool, a furnished patio and a gazebo, plus a barbecue and picnic area.">

<meta name="keywords" content="Pebble Cove, A Classic Motel, New Hampshire's Seacoast, relaxed seasonal motel, rye beach nh, rye beach nh, rye harbor vacation spots, 1 mile from Odiorne Point State Park, 5.8 miles from center of Portsmouth, 9.3 miles from Kittery Outlets, casual suites, free WiFi, full kitchens, TVs, cable channels, extra bedrooms, separate living area, amenities, outdoor swimming pool, furnished patio, gazebo, barbecue, picnic area, motels, vacation in Rye NH, vacation in Hampton Beach NH, vacation seacoast, motels and hotels, places to stay, discount motels,hotels NH,bed & breakfast, ">

<title>Pebble Cove, A Classic Motel - Stay With Us and Enjoy New Hampshire's Seacoast</title>

<link rel="stylesheet" href="styles.css">
<link rel="apple-touch-icon" sizes="57x57" href="/apple-touch-icon-57x57.png">
<link rel="apple-touch-icon" sizes="60x60" href="/apple-touch-icon-60x60.png">
<link rel="apple-touch-icon" sizes="72x72" href="/apple-touch-icon-72x72.png">
<link rel="apple-touch-icon" sizes="76x76" href="/apple-touch-icon-76x76.png">
<link rel="apple-touch-icon" sizes="114x114" href="/apple-touch-icon-114x114.png">
<link rel="apple-touch-icon" sizes="120x120" href="/apple-touch-icon-120x120.png">
<link rel="apple-touch-icon" sizes="144x144" href="/apple-touch-icon-144x144.png">
<link rel="apple-touch-icon" sizes="152x152" href="/apple-touch-icon-152x152.png">
<link rel="apple-touch-icon" sizes="180x180" href="/apple-touch-icon-180x180.png">
<link rel="icon" type="image/png" href="/favicon-32x32.png" sizes="32x32">
<link rel="icon" type="image/png" href="/android-chrome-192x192.png" sizes="192x192">
<link rel="icon" type="image/png" href="/favicon-96x96.png" sizes="96x96">
<link rel="icon" type="image/png" href="/favicon-16x16.png" sizes="16x16">
<link rel="manifest" href="/manifest.json">
<link rel="mask-icon" href="/safari-pinned-tab.svg" color="#5bbad5">
<meta name="msapplication-TileColor" content="#da532c">
<meta name="msapplication-TileImage" content="/mstile-144x144.png">
<meta name="theme-color" content="#ffffff">

<style type="text/css">
audio {visibility: hidden; height: 0; width: 0; position: absolute; top: -300px; left: -300px;}
#pauseplay {float: right; width: 48px; height: 48px; overflow: hidden; cursor: pointer}
</style>

<script src="menu.js"></script>
</head>

<body>

<img id="logo" src="images/PebbleCoveMotel_logo.png" alt="Pebble Cove Motel logo">

<div id="container">

<nav class="nav-collapse" role="navigation">
<ul class="tabs primary-nav">
<li class="tabs__item">
<a href="#" class="tabs__link">Home</a>
</li>
<li class="tabs__item">
<a href="#" class="tabs__link">Accommodations</a>
</li>
<li class="tabs__item">
<a href="#" class="tabs__link">Amenities</a>
</li>
<li class="tabs__item">
<a href="#" class="tabs__link">Rates</a>
</li>
<li class="tabs__item">
<a href="#" class="tabs__link">Links</a>
</li>
<li class="tabs__item">
<a href="#" class="tabs__link">Contact</a>
</li>
</ul>
</nav>
<script type="text/javascript">
<!--
var navigation = responsiveNav(".nav-collapse", {
animate: true, // Boolean: Use CSS3 transitions, true or false
transition: 284, // Integer: Speed of the transition, in milliseconds
label: "Menu", // String: Label for the navigation toggle
insert: "before", // String: Insert the toggle before or after the navigation
customToggle: "", // Selector: Specify the ID of a custom toggle
closeOnNavClick: false, // Boolean: Close the navigation when one of the links are clicked
openPos: "relative", // String: Position of the opened nav, relative or static
navClass: "nav-collapse", // String: Default CSS class. If changed, you need to edit the CSS too!
navActiveClass: "js-nav-active", // String: Class that is added to <html> element when nav is active
jsClass: "js", // String: 'JS enabled' class which is added to <html> element
init: function(){}, // Function: Init callback
open: function(){}, // Function: Open callback
close: function(){} // Function: Close callback
});


//-->
</script>
<div id="content">


<div style="text-align: right">
<audio controls loop>
<source src="audio/waves.ogg" type="audio/ogg">
<source src="audio/waves.mp3" type="audio/mpeg">
</audio>
<img id="pauseplay" src="images/play.png" alt="button" title="Play/Pause">
<script type="text/javascript">
(function(){
var playing = !!('ontouchstart' in window) || !!('ontouchstart' in document.documentElement) || !!window.ontouchstart || (!!window.Touch && !!window.Touch.length) || !!window.onmsgesturechange || (window.DocumentTouch && window.document instanceof window.DocumentTouch),
snd = document.getElementsByTagName('audio')[0],
ctrl = document.getElementById('pauseplay');
playing = !playing;
ctrl.title = playing? 'Pause' : 'Play';
if(playing){snd.autoplay = true; ctrl.src = 'images/pause.png';}
ctrl.addEventListener('click', function(){
if(playing){
snd.pause();
} else {
snd.play();
}
playing = !playing;
ctrl.title = playing? 'Pause' : 'Play';
ctrl.src = playing? 'images/pause.png' : 'images/play.png';
}, false);
})();
</script></div>
<h1>Area Attractions</h1>
<p>Enjoy nearby beaches, kayaking, bikepaths, and walking trails. Pebble Cove is 5 minutes to Portsmouth, close to shopping, restaurants, and all area attractions!</p>
<p><a href="http://www.nhstateparks.org/visit/state-parks/wallis-sands-state-beach.aspx">Wallis Sands State Beach</a> offers oceanfront swimming, views of the Isles of Shoals, and a sandy beach that families especially enjoy. Beach amenities include a store that sells a variety of items, food, and drinks; and a large bathhouse with hot and cold showers. The park has a grassy area with picnic tables, but fires are not allowed.</p>
<ul class="b">
<li> <a href="http://www.atlanticwhalewatch.com/" target="_blank">Whalewatching/Fishing</a></li>
<li> <a href="http://www.islesofshoals.com/" target="_blank">Portsmouth Cruises</a></li>
<li> <a href="http://www.nhstateparks.com/odiorne.html" target="_blank">Odiorne Point State Park</a></li>
<li> <a href="http://www.watercountry.com/" target="_blank">Water Country</a></li>
<li> <a href="http://www.portsmouthchamber.org/" target="_blank">Portsmouth Chamber of Commerce</a></li>
<li> <a href="http://www.casinoballroom.com/" target="_blank">Hampton Beach Casino Ballroom</a></li>
<li> <a href="http://www.childrens-museum.org/cmnh/" target="_blank">The Childrens Museum of New Hampshire</a></li>
<li> <a href="http://www.thekitteryoutlets.com/" target="_blank">The Kittery Outlets</a></li>
</ul>
<p>Fantastic fireworks are every week are only 10 miles down Rt. 1 on Hampton Beach. There are 16 fireworks shows in all, to 80 free summer concerts, Hampton Beach has something for everyone. Come marvel at the Masters of Sand Sculpting in June, find out who will be Miss Hampton Beach in July, show off your talent at the annual Hampton Beach Talent competition, or feel like a kid again in August and join us to see off the end of the season with our famous Seafood Festival in September. But please, don't sit around waiting for these and other special events!</p>
<div style="text-align:center;">
<div class="map-responsive">
<iframe src="https://www.google.com/maps/embed?pb=!1m18!1m12!1m3!1d186637.02907792313!2d-70.85793188067471!3d43.037147979147306!2m3!1f0!2f0!3f0!3m2!1i1024!2i768!4f13.1!3m3!1m2!1s0x89e2c0b2dad571d3%3A0xf0f66f2f40db8717!2sPebble+Cove+Motel!5e0!3m2!1sen!2sus!4v1463168351650" width="900" height="450" frameborder="0" style="border:0" allowfullscreen></iframe>
</div>

</div>
<div style="clear:both;"></div>
</div>
</div>
<div id="footer"><a href="">Pebble Cove Motel</a> &nbsp; 741 Ocean Blvd Rye, NH 03870 &nbsp; <a href="mailto:pebblecovemotel@comcast.net">pebblecovemotel@comcast.net</a> &nbsp; Phone:<a href="tel:603-436-8108">603-436-8108</a></div>
</body>
</html>




Answer

Edited with menu icons.

You forgot to add important links.I added jquery library and js of responsiveNav and it's working fine.

body {
    margin:0;
    background-image:url(images/ocean.gif);
    font-family:'Georgia;
    font-size:100%;
    padding-top: 20px;
    padding-bottom: 20px;
    color:#036;
 }

#container {
    width:90%;
    margin:auto;
    background-color:#fff;    
 }
#logo {
    display: block;
    width:90%;
    margin:0 auto;
 }
.tabs {
    margin:  0;
    padding: 0;
    list-style: none;
    display: table; /* [1] */
    table-layout: fixed; /* [2] */
    width: 100%; /* [3] */
}

    .tabs__item {
        width: 100%;
        float: left;
    }

    @media screen and (min-width: 40em) {
        .tabs__item {
          display: table-cell; /* [4] */
          float: none;
          width: auto;
        }
    }

        .tabs__link {
            display: block; /* [6] */
        }


/**
 * Primary nav. Extends `.tabs`.
 *
 * 1. Stop tabs’ corners leaking out beyond our 4px round.
 */
.primary-nav {
    text-align: center;
    border-radius: 0;
    overflow: hidden; /* [1] */
}

        .primary-nav a {
            padding: .75em 1em;
            color: white;
            background: #5EA5B9;
            color: #fff;
            text-decoration: none;
            font-family: Georgia;
            font-size: 18px;
        }

        .primary-nav a:hover {
            color: #fff;
            background: #FF0000;
        }

/* Responsive-nav.js */

.js .nav-collapse {
  clip: rect(0 0 0 0);
  max-height: 0;
  position: absolute;
  display: block;
  overflow: hidden;
  zoom: 1;
}

.nav-collapse.opened {
  max-height: 9999px;
}

.disable-pointer-events {
  pointer-events: none !important;
}

.nav-toggle {
  -webkit-tap-highlight-color: #5EA5B9;
  -webkit-touch-callout: none;
  -webkit-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  -o-user-select: none;
  user-select: none;
  background:url(http://naitreetgrandir.com/img/layout2013/icons/menu-hamburger.png) no-repeat;
}
a.nav-toggle.active {
    background: url(http://www.theplantgallery.com.au/wp-content/themes/thePlantGallery/assets/imgs/close.svg) no-repeat;
}
@media screen and (min-width: 40em) {
  .js .nav-collapse {
    position: relative;
  }
  .js .nav-collapse.closed {
    max-height: none;
  }
  .nav-toggle {
    display: none;
  }
}

.nav-collapse {
  list-style: none;
  width: 100%;
  float: left;
}

.fixed {
  position: fixed;
  width: 100%;
  top: 0;
  left: 0;
}

.nav-toggle {
  position: fixed;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  -webkit-touch-callout: none;
  -webkit-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;
  text-decoration: none;
  text-indent: -999px;
  position: relative;
  overflow: hidden;
  width: 70px;
  height: 55px;
  float: right;
}

.nav-toggle:before {
  color: #5EA5B9;  /* Edit this to change the icon color */
  font-family: "responsivenav", Georgia;
  font-style: normal;
  font-weight: normal;
  font-variant: normal;
  font-size: 28px;
  text-transform: none;
  position: absolute;
  content: "";
  text-indent: 0;
  text-align: center;
  line-height: 55px;
  speak: none;
  width: 100%;
  top: 0;
  left: 0;
}

.nav-toggle.active::before {
  font-size: 24px;
  content:"";
}


#content {
    clear:both;
    position:relative;
    padding:1.5em 5%;
 }
a:link {
    text-decoration: underline;
}

a:visited {
    text-decoration: underline;
}

a:hover {
    text-decoration: underline;
}

a:active {
    text-decoration: underline;
}
h1 {
    clear:both;
    tet-align:center;
}
h2 {
    clear:both;
  }
h3    {
    clear:both;
  }
audio {
    visibility:hidden; 
    height:0; 
    width:0;
 }
#pauseplay {
    float:right; 
    width:32px; 
    height:32px; 
    cursor:pointer;
 }

/* Flexible iFrame */

.Flexible-container {
    position: relative;
    padding-bottom: 56.25%;
    padding-top: 30px;
    height: 0;
    overflow: hidden;
}

.Flexible-container iframe,   
.Flexible-container object,  
.Flexible-container embed {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
}
  
img {
max-width: 100%;
height: auto;
}

.innerBox {
  background-color : #ffffff;
  background-repeat : repeat-y;
  padding-top: 1em;
  padding-left: 1em;
  padding-right: 1em;
  padding-bottom : 1em;
}

.map-responsive{
    overflow:hidden;
    padding-bottom:56.25%;
    position:relative;
    height:0;
}
.map-responsive iframe{
    left:0;
    top:0;
    height:100%;
    width:100%;
    position:absolute;
}
/*  SECTIONS  */
.section {
	clear: both;
	padding: 0px;
	margin: 0px;
}

/*  COLUMN SETUP  */
.col {
	display: block;
	float:left;
	margin: 1% 0 1% 1.6%;
}
.col:first-child { margin-left: 0; }

/*  GROUPING  */
.group:before,
.group:after { content:""; display:table; }
.group:after { clear:both;}
.group { zoom:1; /* For IE 6/7 */ }

/*  GRID OF TWO  */
.span_2_of_2 {
	width: 100%;
}
.span_1_of_2 {
	width: 49.2%;
}

/*  GO FULL WIDTH AT LESS THAN 480 PIXELS */

/*  GRID OF THREE  */
.span_3_of_3 { width: 100%; }
.span_2_of_3 { width: 66.13%; }
.span_1_of_3 { width: 32.26%; }

/*  GO FULL WIDTH BELOW 480 PIXELS */
@media only screen and (max-width: 480px) {
	.col {  margin: 1% 0 1% 0%; }
	.span_3_of_3, .span_2_of_3, .span_1_of_3 { width: 100%; }
}

/*  GRID OF FOUR  */
.span_4_of_4 {
	width: 100%;
}
.span_3_of_4 {
	width: 74.6%;
}
.span_2_of_4 {
	width: 49.2%;
}
.span_1_of_4 {
	width: 23.8%;
}

/*  GO FULL WIDTH BELOW 480 PIXELS */
@media only screen and (max-width: 480px) {
	.col {  margin: 1% 0 1% 0%; }
	.span_1_of_4, .span_2_of_4, .span_3_of_4, .span_4_of_4 { width: 100%; }
}


@media only screen and (max-width: 480px) {
	.col { 
		margin: 1% 0 1% 0%;
	}
}

@media only screen and (max-width: 480px) {
	.span_2_of_2, .span_1_of_2 { width: 100%; }
}
 
#social {
    margin:auto;
    text-align:center;
}
ul.b {
list-style-type: disc;
}
#footer {
    background:#5EA5B9;
    width:90%;
    margin:auto;
    text-align:center;
    font-family:Georgia;
    font-size:90%;
    color:#036;
    padding:0.5em 0;
    border-bottom-right-radius: 20px;
    border-bottom-left-radius: 20px;
 }
#footer a {
    color:#fff;
    text-decoration: underline;
}

/* Smartphones (portrait and landscape) ----------- */
@media only screen 
and (min-device-width : 320px) 
and (max-device-width : 480px) {
/* Styles */
}

/* Smartphones (landscape) ----------- */
@media only screen 
and (min-width : 321px) {
/* Styles */
}

/* Smartphones (portrait) ----------- */
@media only screen 
and (max-width : 320px) {
/* Styles */
}

/* iPads (portrait and landscape) ----------- */
@media only screen 
and (min-device-width : 768px) 
and (max-device-width : 1024px) {
/* Styles */
}

/* iPads (landscape) ----------- */
@media only screen 
and (min-device-width : 768px) 
and (max-device-width : 1024px) 
and (orientation : landscape) {
/* Styles */
}

/* iPads (portrait) ----------- */
@media only screen 
and (min-device-width : 768px) 
and (max-device-width : 1024px) 
and (orientation : portrait) {
/* Styles */
}

/* Desktops and laptops ----------- */
@media only screen 
and (min-width : 1224px) {
/* Styles */
}

/* Large screens ----------- */
@media only screen 
and (min-width : 1824px) {
/* Styles */
}

/* iPhone 4 ----------- */
@media
only screen and (-webkit-min-device-pixel-ratio : 1.5),
only screen and (min-device-pixel-ratio : 1.5) {
/* Styles */
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="http://responsive-nav.com/demo/responsive-nav.js"></script>
<!DOCTYPE html>
<html lang="en">

<head>

<meta charset="utf-8">

<meta name="viewport" content="width=device-width, initial-scale=1">

<meta name="description" content="Pebble Cove, A Classic Motel. Stay With Us and Enjoy New Hampshire's Seacoast. This relaxed seasonal motel is 1 mile from Odiorne Point State Park, 5.8 miles from the center of Portsmouth and 9.3 miles from the Kittery Outlets shopping mall. Casual suites have free WiFi, full kitchens and TVs with cable channels. Some add extra bedrooms and separate living areas. Amenities include an outdoor swimming pool, a furnished patio and a gazebo, plus a barbecue and picnic area.">

<meta name="keywords" content="Pebble Cove, A Classic Motel, New Hampshire's Seacoast, relaxed seasonal motel, rye beach nh, rye beach nh, rye harbor vacation spots, 1 mile from Odiorne Point State Park, 5.8 miles from center of Portsmouth, 9.3 miles from Kittery Outlets, casual suites, free WiFi, full kitchens, TVs, cable channels, extra bedrooms, separate living area, amenities, outdoor swimming pool, furnished patio, gazebo, barbecue, picnic area, motels, vacation in Rye NH, vacation in Hampton Beach NH, vacation seacoast, motels and hotels, places to stay, discount motels,hotels NH,bed & breakfast, ">

<title>Pebble Cove, A Classic Motel - Stay With Us and Enjoy New Hampshire's Seacoast</title>

<link rel="stylesheet" href="styles.css">
<link rel="apple-touch-icon" sizes="57x57" href="/apple-touch-icon-57x57.png">
<link rel="apple-touch-icon" sizes="60x60" href="/apple-touch-icon-60x60.png">
<link rel="apple-touch-icon" sizes="72x72" href="/apple-touch-icon-72x72.png">
<link rel="apple-touch-icon" sizes="76x76" href="/apple-touch-icon-76x76.png">
<link rel="apple-touch-icon" sizes="114x114" href="/apple-touch-icon-114x114.png">
<link rel="apple-touch-icon" sizes="120x120" href="/apple-touch-icon-120x120.png">
<link rel="apple-touch-icon" sizes="144x144" href="/apple-touch-icon-144x144.png">
<link rel="apple-touch-icon" sizes="152x152" href="/apple-touch-icon-152x152.png">
<link rel="apple-touch-icon" sizes="180x180" href="/apple-touch-icon-180x180.png">
<link rel="icon" type="image/png" href="/favicon-32x32.png" sizes="32x32">
<link rel="icon" type="image/png" href="/android-chrome-192x192.png" sizes="192x192">
<link rel="icon" type="image/png" href="/favicon-96x96.png" sizes="96x96">
<link rel="icon" type="image/png" href="/favicon-16x16.png" sizes="16x16">
<link rel="manifest" href="/manifest.json">
<link rel="mask-icon" href="/safari-pinned-tab.svg" color="#5bbad5">
<meta name="msapplication-TileColor" content="#da532c">
<meta name="msapplication-TileImage" content="/mstile-144x144.png">
<meta name="theme-color" content="#ffffff">

<style type="text/css">
audio {visibility: hidden; height: 0; width: 0; position: absolute; top: -300px; left: -300px;}
#pauseplay {float: right; width: 48px; height: 48px; overflow: hidden; cursor: pointer}
</style>

<script src="menu.js"></script>
</head>

<body>

<img id="logo" src="images/PebbleCoveMotel_logo.png" alt="Pebble Cove Motel logo">

<div id="container">

<nav class="nav-collapse" role="navigation">
    <ul class="tabs primary-nav">
        <li class="tabs__item">
            <a href="#" class="tabs__link">Home</a>
        </li>
        <li class="tabs__item">
            <a href="#" class="tabs__link">Accommodations</a>
        </li>
        <li class="tabs__item">
            <a href="#" class="tabs__link">Amenities</a>
        </li>
        <li class="tabs__item">
            <a href="#" class="tabs__link">Rates</a>
        </li>
      <li class="tabs__item">
            <a href="#" class="tabs__link">Links</a>
        </li>
        <li class="tabs__item">
            <a href="#" class="tabs__link">Contact</a>
        </li>
    </ul>
</nav>
<script type="text/javascript">
         <!--
           var navigation = responsiveNav(".nav-collapse", {
  animate: true,                    // Boolean: Use CSS3 transitions, true or false
  transition: 284,                  // Integer: Speed of the transition, in milliseconds
  label: "Menu",                    // String: Label for the navigation toggle
  insert: "before",                  // String: Insert the toggle before or after the navigation
  customToggle: "",                 // Selector: Specify the ID of a custom toggle
  closeOnNavClick: false,           // Boolean: Close the navigation when one of the links are clicked
  openPos: "relative",              // String: Position of the opened nav, relative or static
  navClass: "nav-collapse",         // String: Default CSS class. If changed, you need to edit the CSS too!
  navActiveClass: "js-nav-active",  // String: Class that is added to <html> element when nav is active
  jsClass: "js",                    // String: 'JS enabled' class which is added to <html> element
  init: function(){},               // Function: Init callback
  open: function(){},               // Function: Open callback
  close: function(){}               // Function: Close callback
});


         //-->
      </script>
<div id="content">


<div style="text-align: right">
<audio controls loop>
<source src="audio/waves.ogg" type="audio/ogg">
<source src="audio/waves.mp3" type="audio/mpeg">
</audio>
<img id="pauseplay" src="images/play.png" alt="button" title="Play/Pause">
<script type="text/javascript">
(function(){
	var playing = !!('ontouchstart' in window) || !!('ontouchstart' in document.documentElement) || !!window.ontouchstart || (!!window.Touch && !!window.Touch.length) || !!window.onmsgesturechange || (window.DocumentTouch && window.document instanceof window.DocumentTouch),
	snd = document.getElementsByTagName('audio')[0],
	ctrl = document.getElementById('pauseplay');
	playing = !playing;
	ctrl.title = playing? 'Pause' : 'Play';
	if(playing){snd.autoplay = true; ctrl.src = 'images/pause.png';}
	ctrl.addEventListener('click', function(){
		if(playing){
			snd.pause();
		} else {
			snd.play();
		}
		playing = !playing;
		ctrl.title = playing? 'Pause' : 'Play';
		ctrl.src = playing? 'images/pause.png' : 'images/play.png';
	}, false);
})();
</script></div>
<h1>Area Attractions</h1>
<p>Enjoy nearby beaches, kayaking, bikepaths, and walking trails. Pebble Cove is 5 minutes to Portsmouth, close to shopping, restaurants, and all area attractions!</p>
<p><a href="http://www.nhstateparks.org/visit/state-parks/wallis-sands-state-beach.aspx">Wallis Sands State Beach</a> offers oceanfront swimming, views of the Isles of Shoals, and a sandy beach that families especially enjoy. Beach amenities include a store that sells a variety of items, food, and drinks; and a large bathhouse with hot and cold showers. The park has a grassy area with picnic tables, but fires are not allowed.</p>
<ul class="b">
<li> <a href="http://www.atlanticwhalewatch.com/" target="_blank">Whalewatching/Fishing</a></li>
<li> <a href="http://www.islesofshoals.com/" target="_blank">Portsmouth Cruises</a></li>
<li> <a href="http://www.nhstateparks.com/odiorne.html" target="_blank">Odiorne Point State Park</a></li>
<li> <a href="http://www.watercountry.com/" target="_blank">Water Country</a></li>
<li> <a href="http://www.portsmouthchamber.org/" target="_blank">Portsmouth Chamber of Commerce</a></li>
<li> <a href="http://www.casinoballroom.com/" target="_blank">Hampton Beach Casino Ballroom</a></li>
<li> <a href="http://www.childrens-museum.org/cmnh/" target="_blank">The Childrens Museum of New Hampshire</a></li>
<li> <a href="http://www.thekitteryoutlets.com/" target="_blank">The Kittery Outlets</a></li>
</ul>
<p>Fantastic fireworks are every week are only 10 miles down Rt. 1 on Hampton Beach. There are 16 fireworks shows in all, to 80 free summer concerts, Hampton Beach has something for everyone. Come marvel at the Masters of Sand Sculpting in June, find out who will be Miss Hampton Beach in July, show off your talent at the annual Hampton Beach Talent competition, or feel like a kid again in August and join us to see off the end of the season with our famous Seafood Festival in September. But please, don't sit around waiting for these and other special events!</p>
<div style="text-align:center;">
<div class="map-responsive">
  <iframe src="https://www.google.com/maps/embed?pb=!1m18!1m12!1m3!1d186637.02907792313!2d-70.85793188067471!3d43.037147979147306!2m3!1f0!2f0!3f0!3m2!1i1024!2i768!4f13.1!3m3!1m2!1s0x89e2c0b2dad571d3%3A0xf0f66f2f40db8717!2sPebble+Cove+Motel!5e0!3m2!1sen!2sus!4v1463168351650" width="900" height="450" frameborder="0" style="border:0" allowfullscreen></iframe>  
</div>

</div>
<div style="clear:both;"></div>
</div>
</div>
<div id="footer"><a href="">Pebble Cove Motel</a> &nbsp; 741 Ocean Blvd Rye, NH 03870 &nbsp; <a href="mailto:pebblecovemotel@comcast.net">pebblecovemotel@comcast.net</a> &nbsp; Phone:<a href="tel:603-436-8108">603-436-8108</a></div>
</body>
</html>