make navbar mobile responsive?

[mlegg]

On this test page I have a responsive nav bar.

I tried to set it to 100% width but this is what I get:


The navbar should be full width under the banner image. Also its not under my banner image. Please help

CSS:

body {
  margin: auto;
  color : #003366;
  background-image: url(images/beach.jpg);
  background-repeat : repeat;
  max-width : 90%;
}
#mainPicture {
  background-image: url(images/HamptonSunrise_logo2.jpg) no-repeat;
  max-width:100%;
  height: auto;
  margin: auto;
}
#logo-container img {
   width: 100%;
   height: auto;
}

a {
text-decoration: none;
}
ul, li {
list-style: none;
margin: 0;
padding: 0;
}
#nav {
width: 60em; /* 1000 */
font-family: 'Open Sans', sans-serif;
font-weight: 400;
position: absolute;
top: 25%;
left: 50%;
margin-left: -30em; /* 30 480 */
}
#nav > a {
display: none;
}
#nav li {
position: relative;
}
#nav li a {
color: #fff;
display: block;
}
#nav li a:active {
background-color: #c00 !important;
}
#nav span:after {
width: 0;
height: 0;
border: 0.313em solid transparent; /* 5 */
border-bottom: none;
border-top-color: #efa585;
content: '';
vertical-align: middle;
display: inline-block;
position: relative;
right: -0.313em; /* 5 */
}
/* first level */
 
#nav > ul {
height: 3.75em; /* 60 */
background-color: #e15a1f;
}
#nav > ul > li {
width: 25%;
height: 100%;
float: left;
}
#nav > ul > li > a {
height: 100%;
font-size: 1.5em; /* 24 */
line-height: 2.5em; /* 60 (24) */
text-align: center;
}
#nav > ul > li:not( :last-child ) > a {
border-right: 1px solid #cc470d;
}
#nav > ul > li:hover > a, #nav > ul:not( :hover ) > li.active > a {
background-color: #cc470d;
}
/* second level */
 
#nav li ul {
background-color: #cc470d;
display: none;
position: absolute;
top: 100%;
}
#nav li:hover ul {
display: block;
left: 0;
right: 0;
}
#nav li:not( :first-child ):hover ul {
left: -1px;
}
#nav li ul a {
font-size: 1.25em; /* 20 */
border-top: 1px solid #e15a1f;
padding: 0.75em; /* 15 (20) */
}
#nav li ul li a:hover, #nav li ul:not( :hover ) li.active a {
background-color: #e15a1f;
}
 @media only screen and ( max-width: 62.5em ) /* 1000 */ {
#nav {
width: 100%;
position: static;
margin: 0;
}
}
 @media only screen and ( max-width: 40em ) /* 640 */ {
html {
font-size: 75%; /* 12 */
}
#nav {
position: relative;
top: auto;
left: auto;
}
#nav > a {
width: 3.125em; /* 50 */
height: 3.125em; /* 50 */
text-align: left;
text-indent: -9999px;
background-color: #e15a1f;
position: relative;
}
#nav > a:before, #nav > a:after {
position: absolute;
border: 2px solid #fff;
top: 35%;
left: 25%;
right: 25%;
content: '';
}
#nav > a:after {
top: 60%;
}
#nav:not( :target ) > a:first-of-type, #nav:target > a:last-of-type {
display: block;
}
/* first level */
 
#nav > ul {
height: auto;
display: none;
position: absolute;
left: 0;
right: 0;
}
#nav:target > ul {
display: block;
}
#nav > ul > li {
width: 100%;
float: none;
}
#nav > ul > li > a {
height: auto;
text-align: left;
padding: 0 0.833em; /* 20 (24) */
}
#nav > ul > li:not( :last-child ) > a {
border-right: none;
border-bottom: 1px solid #cc470d;
}
/* second level */
 
#nav li ul {
position: static;
padding: 1.25em; /* 20 */
padding-top: 0;
}
}

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

#left {
    float: left;
    width: 32%;
    padding:5px;
}

#middle { 
    float: left;
    width: 32%;
    padding:5px;
}

#right {
   float: left;
    width: 32%;
    padding:5px;
}

.columns
{
    width:100%;
}
.left
{
    float:left;
    width:300px;
    
}
.right
{
    margin-left:360px;
}
.clear
{
    clear:both;
}
.google-maps {
position: relative;
padding-bottom: 75%; // This is the aspect ratio
height: 0;
overflow: hidden;
}
.google-maps iframe {
position: absolute;
top: 0;
left: 0;
width: 100% !important;
height: 100% !important;
}
#map
    {
        height: 100%;
    }
    #map
    {
        width: 100%;
    }
#footer {
  background : #F5DEB3;
  max-width : 960px;
  text-align : center;
  font-size : small;
  font-family : sans-serif;
  color : #010101;
  padding-top: 5px;
  padding-bottom: 5px;
}
#footer A {
  color : #010101;
}
/* 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 */
}

[mlegg]

HTML:

<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>HamptonSunrise.com brought to you by Samonas Realty</title>
<link rel="stylesheet" type="text/css" href="styles2.css">
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.4/jquery.min.js"></script>
<link href="http://www.jqueryscript.net/css/jquerysctipttop.css" rel="stylesheet" type="text/css">

<link rel="stylesheet" href="http://fonts.googleapis.com/css?family=Open+Sans:400">
<script type="text/javascript">
	$(document).ready(function(){
		$(window).bind("resize", resizeWindow);
		function resizeWindow(e){
			var newWindowWidth = $(window).width();

			// If width width is below 600px, switch to the mobile stylesheet
			if(newWindowWidth < 600){ 				$("link[rel=stylesheet]").attr({href : "mobile.css"});	 			} 			// Else if width is above 600px, switch to the large stylesheet 			else if(newWindowWidth > 600){
				$("link[rel=stylesheet]").attr({href : "style.css"});
			}
		}
	});
</script>

<meta name="description" content="Hampton Beach Vacation Rentals, Hampton Beach Rentals. Find and inquire about Vacation Rentals in Hampton Beach, Seacoast New Hampshire, Samonas Realty, Vacationing in Hampton Beach NH, vacationing at the seacoast">
<meta name="keywords" content="Hampton Sunrise, Hampton Beach Vacation Rentals, Hampton Beach Rentals, Vacation Rentals in Hampton Beach, Hampton Beach rental, renting in Hampton Beach, Hampton Beach property for rent, Hampton Beach Rentals for vacation, 29 Epping Avenue, views of the Ocean, private cottage rentals, renting a cottage in hampton beach, rental agencies for hampton beach, accomodations, hotels, motels, Vacationing in Hampton Beach NH, vacationing at the seacoast, motels and hotels, places to stay, motels, discount motels,hotels NH,bed & breakfast, B&Bs,Inns,">
<style type="text/css">
audio {visibility: hidden; height: 0; width: 0; position: absolute; top: -300px; left: -300px;}
#pauseplay {float: right; width: 32px; height: 32px; overflow: hidden; cursor: pointer}
</style>
<!-- Start WOWSlider.com HEAD section -->
	<link rel="stylesheet" type="text/css" href="engine1/style.css" />
	<script type="text/javascript" src="engine1/jquery.js"></script>
	<!-- End WOWSlider.com HEAD section -->
<!-- Start css3menu.com HEAD section -->
	<link rel="stylesheet" href="index_files/css3menu1/style.css" type="text/css" /><style type="text/css">._css3m{display:none}</style>
	<!-- End css3menu.com HEAD section -->
</head>
<body>
<div id="logo-container"><img src="images/HamptonSunrise_logo.jpg" alt="Hampton Sunrise logo" /></div>
<nav id="nav" role="navigation"> <a href="#nav" title="Show navigation">Show navigation</a> <a href="#" title="Hide navigation">Hide navigation</a>
<ul class="clearfix">
<li><a href="#">Home</a></li>
<li> <a href="#"><span>Units</span></a>
<ul>
<li><a href="upper.html" title="Upper Level">Upper Level</a></li>
<li><a href="lower.html" title="Lower Level">Lower Level</a></li>
</ul>
</li>
<li><a href="slideshow.html" title="Lower Level">Slideshow</a></li>
<li><a href="about.html" title="About">About</a></li>
<li><a href="rate.html" title="Rates">Rates</a></li>
<li><a href="map.html" title="Map">Map</a></li>
<li><a href="contact.html" title="Contact">Contact</a></li>
</ul>
</nav>
<script src="http://code.jquery.com/jquery-latest.min.js"></script> 
<script src="doubletaptogo.min.js"></script>
<script>

	$( function()
	{
		$( '#nav li:has(ul)' ).doubleTapToGo();
	});

</script>
<script type="text/javascript">

  var _gaq = _gaq || [];
  _gaq.push(['_setAccount', 'UA-36251023-1']);
  _gaq.push(['_setDomainName', 'jqueryscript.net']);
  _gaq.push(['_trackPageview']);

  (function() {
    var ga = document.createElement('script'); ga.type = 'text/javascript'; ga.async = true;
    ga.src = ('https:' == document.location.protocol ? 'https://ssl' : 'http://www') + '.google-analytics.com/ga.js';
    var s = document.getElementsByTagName('script')[0]; s.parentNode.insertBefore(ga, s);
  })();

</script>
<div class="contentBox innerBox contentText">

<h2 style="text-align:center">Wake up every morning to the gorgeous Hampton Beach sunrise! <audio controls loop></h2>

<p>Quietest Section of Hampton Beach in the sought after Island Section just steps to a beautiful, sandy beach. One of the few areas of Hampton Beach where you don't have to cross Rt. 1A to get to the beach. Views of the Ocean, Dunes, and River.</p>
<p>Available the weeks of Aug 18 through Aug 25 and Aug 25 through Sept 1 which would include Labor Day.</p>

<p>If you are ready for the vacation of your life, then call us now before we are all booked!</p>

<p>You will want to come back to stay at Hampton Sunrise again and again to add to your lifetime of memories.</p>

<p>Where else along the Seacoast can you find 80 free evening concerts taking place throughout the summer and fantastic fireworks displays every week? Where else can you spend a spectacular summer day on the sands, sandwiched between refreshing Atlantic surf and row after row of accommodations, amusements, boating adventures, restaurants, and shops?</p>

<p>Only at Hampton Beach, a great beach and a whole lot more!<sub><a href="http://www.hamptonbeach.org/" target="_blank">1</a></sub></p>

<p>Going to the beach? View the <a href="http://nhstateparks.org/explore/visiting/beach-conditions.aspx" target="_blank">daily beach report</a> starting in July!</p>

<p><a href="http://www.hamptonbeach.org/webcam.cfm">Watch the LIVE Hampton Beach webcam!</a></p>

<p>No one can deny that Hampton Beach is a great beach and a whole lot more.</p>

<p>From fantastic fireworks every week, 16 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 2014 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 >

<p>Because everyone knows that any day of the week Hampton Beach is a great beach and a whole lot more! <sub><a href="http://www.hamptonbeach.org/annual-events.cfm" target="_blank">2</a></sub></p>

<div style="clear:both;"></div><br>
<div class="columns">
    <div class="left">
<p><strong>Hampton Beach Events, Attractions and Recreation</strong></p>

<a href="http://www.hamptonchamber.com/" target="_blank">Hampton Area Chamber of Commerce</a><br>

<a href="http://www.hamptonbeach.com/" target="_blank">HamptonBeach.com</a><br>

<a href="http://www.hamptonbeach.org" target="_blank">HamptonBeach.org</a><br>

<a href="http://www.hamptonbeachguide.com/calendar/" target="_blank">Calendar of Events</a><br>

<a href="http://www.nhtourguide.com/seacoast/seacoast_attractions.htm" target="_blank">NH Seacoast Guide</a><br>

<a href="http://www.hamptonchamber.com/attractions.cfm" target="_blank">Hampton Attractions</a></div>
    <div class="right"><p>The National Resources Defense Council recently awarded Hampton Beach "Superstar Beach" status. It's one of only "four U.S. beaches featured in our (NRDC's) 5-star rating guide. These beaches deserve special notice for not only receiving a 5-star rating this year, but for having perfect testing results for the past three years, indicating a history of very good water quality."</p>
</div></div>
<br>
<h2><a href="https://samonasgroup.wufoo.com/forms/z1k96fig1df4m4d/">Fill out the form to contact me about this property!</a></h2>
<div style="clear:both;"></div>
</div>
</div>
</div>

<div id="footer"><a href="http://samonasgroup.com/">Samonas Realty</a> | 111 Bow St, Portsmouth, NH 03801 | <a href="https://samonasgroup.wufoo.com/forms/z1k96fig1df4m4d/">John Samonas</a> | (603) 234-3400</div>
</body></html>

[ajfmrf]

Whem I viewed the page source a couple of the css pages had "404" errors

check the path to those css files

[jscheuer1]

Change:

#nav {
width: 60em; /* 1000 */
font-family: 'Open Sans', sans-serif;
font-weight: 400;
position: absolute;
top: 25%;
left: 50%;
margin-left: -30em; /* 30 480 */
}

to:

#nav {
width: 90%;
font-family: 'Open Sans', sans-serif;
font-weight: 400;
position: absolute;
top: 25%;
}

[mlegg]

John that does set it up full width but now Rates, Map and Contact do not show, however if you hover under the navbar they do show up.

Lastly the small space below the navbar is there before the contextbox code:

<div class="contentBox innerBox contentText">

<h2 style="text-align:center">Wake up every morning to the gorgeous Hampton Beach sunrise! <audio controls loop></h2>

[jscheuer1]

I should mention that the menu seemed funky to begin with. It did not appear to be working correctly (drop down items superimposed each other, and there were phantom border lines where drop downs would appear), that hasn't changed. As to where you want the bar, with the current level of responsiveness, it is where you want it - provided the window is at a certain width to height ratio. I think the problem there is that the menu is positioned absolutely and independently of any other item. If it were instead in the banner's container for example, and positioned statically beneath the banner, then it would always have to be beneath it.

[mlegg]

Is there another menu that you could suggest that would accomplish what I am trying to do?
I've tried some Bootstrap menus. I just dont like how the text on the bar is to the left. I want the text to be centered (horizontally) on the navbar.

[ajfmrf]

In your style2.css file I changed two things.
[code]
#nav > ul > li {
width: 25%;
height: 100%;
float: left;
}
[code]

I changed the width from 25% to 14% and it puts the links all on one line.

then here [code]
#nav > ul {
height: 3.75em; /* 60 */
background-color: #e15a1f;margin-top:100px;
}
[code]

I added the margin-top to your code -this brings the navbar below the banner

Then I went to to the inline css for the h2 with a sentence:

[code]<h2 style="text-align:center;margin-top:50px;">Wake up every morning to the gorgeous Hampton Beach sunrise! <audio controls loop></h2>[code]

and added the margin-top:50px to drop it below the image

[mlegg]

Bud that sort of worked. It did make it full width but now the navbar is in the text container box.

[mlegg]

here is the new html from the body to the h2

<body>
<div id="logo-container"><img src="images/HamptonSunrise_logo.jpg" alt="Hampton Sunrise logo" /></div>
<nav id="nav" role="navigation"> <a href="#nav" title="Show navigation">Show navigation</a> <a href="#" title="Hide navigation">Hide navigation</a>
<ul class="clearfix">
<li><a href="#">Home</a></li>
<li> <a href="#"><span>Units</span></a>
<ul>
<li><a href="upper.html" title="Upper Level">Upper Level</a></li>
<li><a href="lower.html" title="Lower Level">Lower Level</a></li>
</ul>
</li>
<li><a href="slideshow.html" title="Lower Level">Slideshow</a></li>
<li><a href="about.html" title="About">About</a></li>
<li><a href="rate.html" title="Rates">Rates</a></li>
<li><a href="map.html" title="Map">Map</a></li>
<li><a href="contact.html" title="Contact">Contact</a></li>
</ul>
</nav>
<script src="http://code.jquery.com/jquery-latest.min.js"></script> 
<script src="doubletaptogo.min.js"></script>
<script>

	$( function()
	{
		$( '#nav li:has(ul)' ).doubleTapToGo();
	});

</script>
<script type="text/javascript">

  var _gaq = _gaq || [];
  _gaq.push(['_setAccount', 'UA-36251023-1']);
  _gaq.push(['_setDomainName', 'jqueryscript.net']);
  _gaq.push(['_trackPageview']);

  (function() {
    var ga = document.createElement('script'); ga.type = 'text/javascript'; ga.async = true;
    ga.src = ('https:' == document.location.protocol ? 'https://ssl' : 'http://www') + '.google-analytics.com/ga.js';
    var s = document.getElementsByTagName('script')[0]; s.parentNode.insertBefore(ga, s);
  })();

</script>
<div class="contentBox innerBox contentText">

<h2 style="text-align:center;margin-top:50px;">Wake up every morning to the gorgeous Hampton Beach sunrise! <audio controls loop></h2>

updated css:

#nav {

width: 90%;

font-family: 'Open Sans', sans-serif;

font-weight: 400;

position: absolute;

top: 25%;

}

#nav > a {

display: none;

}

#nav li {

position: relative;

}

#nav li a {

color: #fff;

display: block;

}

#nav li a:active {

background-color: #c00 !important;

}

#nav span:after {

width: 0;

height: 0;

border: 0.313em solid transparent; /* 5 */

border-bottom: none;

border-top-color: #efa585;

content: '';

vertical-align: middle;

display: inline-block;

position: relative;

right: -0.313em; /* 5 */

}

/* first level */

 

#nav > ul {

height: 3.75em; /* 60 */

background-color: #e15a1f;

margin-top:100px;

}

#nav > ul > li {

width: 14%;

height: 100%;

float: left;

}

#nav > ul > li > a {

height: 100%;

font-size: 1.5em; /* 24 */

line-height: 2.5em; /* 60 (24) */

text-align: center;

}

#nav > ul > li:not( :last-child ) > a {

border-right: 1px solid #cc470d;

}

#nav > ul > li:hover > a, #nav > ul:not( :hover ) > li.active > a {

background-color: #cc470d;

}

/* second level */

 

#nav li ul {

background-color: #cc470d;

display: none;

position: absolute;

top: 100%;

}

#nav li:hover ul {

display: block;

left: 0;

right: 0;

}

#nav li:not( :first-child ):hover ul {

left: -1px;

}

#nav li ul a {

font-size: 1.25em; /* 20 */

border-top: 1px solid #e15a1f;

padding: 0.75em; /* 15 (20) */

}

#nav li ul li a:hover, #nav li ul:not( :hover ) li.active a {

background-color: #e15a1f;

}

 @media only screen and ( max-width: 62.5em ) /* 1000 */ {

#nav {

width: 100%;

position: static;

margin: 0;

}

}

 @media only screen and ( max-width: 40em ) /* 640 */ {

html {

font-size: 75%; /* 12 */

}

#nav {

position: relative;

top: auto;

left: auto;

}

#nav > a {

width: 3.125em; /* 50 */

height: 3.125em; /* 50 */

text-align: left;

text-indent: -9999px;

background-color: #e15a1f;

position: relative;

}

#nav > a:before, #nav > a:after {

position: absolute;

border: 2px solid #fff;

top: 35%;

left: 25%;

right: 25%;

content: '';

}

#nav > a:after {

top: 60%;

}

#nav:not( :target ) > a:first-of-type, #nav:target > a:last-of-type {

display: block;

}

/* first level */

 

#nav > ul {

height: auto;

display: none;

position: absolute;

left: 0;

right: 0;

}

#nav:target > ul {

display: block;

}

#nav > ul > li {

width: 100%;

float: none;

}

#nav > ul > li > a {

height: auto;

text-align: left;

padding: 0 0.833em; /* 20 (24) */

}

#nav > ul > li:not( :last-child ) > a {

border-right: none;

border-bottom: 1px solid #cc470d;

}

/* second level */

 

#nav li ul {

position: static;

padding: 1.25em; /* 20 */

padding-top: 0;

}

}