make navbar mobile responsive?

**coothead** · 06-29-2014, 11:32 AM

Hi there mlegg,

here is my take on your navigation problem...

Code:


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

<meta charset="utf-8">

<title>>HamptonSunrise.com brought to you by Samonas Realty</title>

<link rel="stylesheet"  href="/">

<link rel="stylesheet" href="http://fonts.googleapis.com/css?family=Open+Sans:400">

<style>
body {
    margin:0;
    background-image:url(http://andrewsamonas.com/images/beach.jpg);
    font-family:'Open Sans',sans-serif;
    font-size:100%;
    color:#036;
 }
a {
    text-decoration:none;
 }
#container {
    width:90%;
    margin:auto;
    background-color:#fff;    
 }
#logo {
    display:block;
    width:100%;
 }
#nav,#nav ul {
    padding:0;
    margin:0;
    list-style-type:none;
    border-top:1px solid #cc470d;
    border-bottom:1px solid #cc470d;
    background-color:#e15a1f;
 }
#nav:after{
    content:'';
    display:block;
    clear:both;
    border-bottom:1px solid #cc470d;
 }
#nav {
    box-shadow:0 0.4em 0.4em #999;
 }
#nav ul {
    box-shadow:0.4em 0.4em 0.4em #999;
 }
#nav li {
    position:relative;
    float:left;
    width:14.285%;
 }
#nav a {
    display:block;
    line-height:2.5em;
    border-right:1px solid #cc470d;
    font-size:1.5em;
    color:#fff; 
    text-align:center;
 }
#nav li:last-of-type a {
    border:0;
 }
#nav a span {
    line-height:60%;
    margin-left:0.5em;
    font-size:60%;
    color:#efa585;
 }
#nav a:hover {
    background-color:#cc470d;
 }
#nav ul {
    display:none;
    min-width:100%;
    position:absolute;
    height:auto;
    white-space:nowrap;
 }
#nav ul li {
    float:none;
    width:auto; 
 }
#nav ul a {
    padding:0 0.5em;
}
#nav li:hover ul {
    display:block;
 }
#content {
    clear:both;
    padding:1em 5%;
 }
h2 {
    text-align:center;
 }
@media screen and (max-width:920px) {
body {
    font-size:90%;
 }
#nav li {
    height:90%;
 }
}
@media screen and (max-width:820px) {
body {
    font-size:80%;
 }
#nav li {
    height:80%;
 }
}
@media screen and (max-width:740px) {
body {
    font-size:70%;
 }
#nav li{
    height:70%;
 }
}
@media screen and (max-width:660px) {
body {
    font-size:60%;
 }
#nav li {
    height:60%;
 }
}
@media screen and (max-width:570px) {
#nav ul {
    position:static;
    border:0;
    box-shadow:none;
 }
#nav li {
    float:none;
    width:100%;
 }
#nav a,#nav ul a{
    text-align:left;
    padding:0 0 0 1em;
 }
}
</style>

</head>
<body>

<div id="container">

<img id="logo" src="http://andrewsamonas.com/images/HamptonSunrise_logo.jpg" alt="Hampton Sunrise logo">

<ul id="nav">
 <li><a href="#">Home</a></li>
 <li><a href="#">Units<span>▼</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>

<div id="content">

<h2>Wake up every morning to the gorgeous Hampton Beach sunrise!</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! 
<a href="http://www.hamptonbeach.org/" target="blank"><sub>1</sub></a>
</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! 
<a href="http://www.hamptonbeach.org/annual-events.cfm" target="blank"><sub>2</sub></a>
</p>

</div><!--end #content-->

</div><!--end #container-->

</body>
</html>

coothead

**mlegg** · 06-29-2014, 03:21 PM

coothead that made things better with the navbar width but when you scale down the page the menu doesn't shrink and turn into the 3 bar symbol.

Name: Mobile_3bar_icon.png
Views: 122
Size: 559 Bytes

then the banner image and the below text container shrinks, it's only about 60% wide, so appears left justified. that messes up the footer too.

this is the uploaded new page

**coothead** · 06-29-2014, 04:31 PM

Hi there mlegg,

the code that I provided was free standing and not intended to be acted upon by your existing CSS.

As John pointed out in a previous post...

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.

Obviously, as that is what I saw, I was not going to use your CSS.

Hiding and showing the menu appeared to me to be an optional extra that could easily be added,
at any time, if it was absolutely required.

**mlegg** · 06-29-2014, 04:57 PM

should I add what you used as inline css onto my style.css sheet? and make sure there are no duplicated or conflicting line?

this is the current style sheet http://andrewsamonas.com/styles2.css

**jscheuer1** · 06-29-2014, 06:12 PM

Looks like the demo page is going from bad to worse.

**jscheuer1** · 06-29-2014, 06:26 PM

How about (where I do what I previously suggested - make the menu static and put it in the banner's container, below the banner):

http://home.comcast.net/~jscheuer1/s...nsunmenu-h.htm

Note: Includes minor changes in style and markup.

Or even (improves menu's action):

http://home.comcast.net/~jscheuer1/s...unmenu-2-h.htm

**coothead** · 06-29-2014, 07:20 PM

Hi there mlegg,

check out the attachment which contains your "navbar.html" and "styles2.css" files.
I have removed your conflicting CSS from the file but have not done hide and show.
Unfortunately, I have not been able to assess the validity of your remaining CSS.

coothead

**mlegg** · 07-03-2014, 05:11 PM

Hi all. I have just about everything fixed now on http://hamptonsunrise.com/
How can I make navbar scale down and turn into the 3 bar symbol when the page size is smaller or on mobile or tablet?

Name: Mobile_3bar_icon.png
Views: 104
Size: 559 Bytes

http://hamptonsunrise.com/styles2.css is where the css style sheet is

**jscheuer1** · 07-04-2014, 05:44 AM

Have you attempted this at all yet? The way to go would probably media queries. I see there are quite a few in the stylesheet already. If you have already tried this, which one(s) represent your attempt? If not, I would try something straight forward like making the current menu display none at screen widths less than a certain amount and the alternative one display block at those widths, visa versa for larger widths.