menu bar and banner responsive issues....any guidance is appreciated!

Phoenix

Phoenix

Joined
Apr 5, 2016
Messages
1
Reaction score
0
hello everyone i am new to this forum and relatively new at web design. i found this free template online but the menu bar and the header are not acting responsive. can anyone help with how to make it more responsive?
here is the page i am referring to:

http://www.aquidneckislanddaycamp.com/AIDC/index.html

*when it is on phone size, the banner does not size down. how do i make it do this?
*when i stretch the website to a larger size, the menu bar is all messed up and does not fully show unless i expand it the full length of my screen.

i have been working through some things..but at this point i am not sure if i am helping it or hurting it more as nothing i find online is working too well.

if you can lead me any step closer to the right direction, i would be very grateful.
i attached the index.html code and also all of the css pages.
i am not sure what a lot of it means but hoping to figure it out with some guidance.

thank you and be well.
-phoenix-





- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
here is the index.html



<!DOCTYPE HTML>
<html>
<head>
<title>AQUIDNECK ISLAND DAY CAMP - A SUMMER CAMP FILLED WITH FUN, FRIENDS AND ADVENTURE IN MIDDLETOWN, RI</title>
<meta http-equiv="content-type" content="text/html; charset=utf-8" />
<meta name="description" content="" />
<meta name="keywords" content="" />
<link href='http://fonts.googleapis.com/css?family=Raleway:400,100,200,300,500,600,700,800,900' rel='stylesheet' type='text/css'>
<!--[if lte IE 8]><script src="js/html5shiv.js"></script><![endif]-->
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
<script src="js/skel.min.js"></script>
<script src="js/skel-panels.min.js"></script>
<script src="js/init.js"></script>
<noscript>
<link rel="stylesheet" href="css/skel-noscript.css" />
<link rel="stylesheet" href="css/style.css" />
<link rel="stylesheet" href="css/style-desktop.css" />
</noscript>
<!--[if lte IE 8]><link rel="stylesheet" href="css/ie/v8.css" /><![endif]-->
<!--[if lte IE 9]><link rel="stylesheet" href="css/ie/v9.css" /><![endif]-->
</head>
<body class="homepage">


<div id="banner">&nbsp;</div>


<!-- Header -->
<div id="header">
<div class="container">


<!-- Nav -->
<nav id="nav">
<ul>
<li class="active"><a href="index.html">Home</a></li>
<li><a href="index.html">Activities</a></li>
<li><a href="index.html">Time For Learning</a></li>
<li><a href="index.html">Our Cournselors</a></li>
<li><a href="index.html">Register/Contact</a></li>
<li><a href="index.html">Thank you!</a></li>
<li><a href="index.html">Employment</a></li>
</ul>

</nav>

</div>
</div>


<div id="featured">
<div class="container">
<header>
<h2> Summer Camp filled with Fun, Friends and Adventure</h2>
</header>
<section>
<ul class="style1">
<li class="first"><img src="images/girls.jpg" width="200" height="auto" alt="children_at_beach">
<p><strong>They’ve waited all year for summer to come…</strong>&nbsp; Every child knows summer goes by in a flash. So they’re determined to pack their summer with loads of fun, friends and adventure. Make it memorable, a summer that lasts.</p>
<p>Aquidneck Island Day Camp gives parents a way to provide all the fun that our island has to offer:&nbsp;<strong>Horseback Riding, Swimming, Sailing, Art &amp; Music, Sports, Field Trips &amp; More! </strong></p>
<p>&nbsp;</p>
<p>&nbsp;</p>
<p>&nbsp;</p>


</li>
</ul>
</section>
</div>
</div>


</div>
</div>

<!-- Copyright -->
<div id="copyright">
<div class="container">
Copyright (c) 2011-2016 Aquidneck Island Day Camp All rights reserved.
</div>
</div>

</body>
</html>




- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
here is the style.css



/*********************************************************************************/
/* Basic */
/*********************************************************************************/

body {
margin: 0px;
padding: 0px;
background: #00a7a9;
font-family: 'Raleway', sans-serif;
font-size: 11pt;
color: #000000;
}

h1, h2, h3 {
margin: 0px;
padding: 0px;
}

h2 {
padding: 0px 0px 20px 0px;
letter-spacing: -1px;
font-size: 1.8em;
}

p, ol, ul {
margin-top: 0px;
line-height: 160%;
}

p {
margin-bottom: 2em;
line-height: 160%;
}


strong {
font-weight: 700;
}

a {
color: #A2A2A2;
}

a:hover {
text-decoration: none;
}

/* Images */

.image
{
display: inline-block;
}

.image img
{
display: block;
width: 100%;
}

.image.featured
{
display: block;
width: 100%;
margin: 0 0 2em 0;
}

.image.full
{
display: block;
width: 100%;
margin-bottom: 2em;
}

.image.left
{
float: left;
margin: 0 2em 2em 0;
}

.image.centered
{
display: block;
margin: 0 0 2em 0;
}

.image.centered img
{
margin: 0 auto;
width: auto;
}

header
{
margin-bottom: 1em;
}

header h2
{
font-weight: 600;
}

header .byline
{
display: block;
margin: 0.5em 0 0 0;
padding: 0 0 0.5em 0;
}

ul.style
{
}

ul.style li
{
padding: 0.55em 0em;
}

ul.style li:first-child
{
}

ul.style a
{
color: #3A3A3A !important;
}

ul.style1
{
}

ul.style1 li
{
padding: 0.55em 0em;
}

ul.style1 li:first-child
{
}

ul.style1 a
{
color: #3A3A3A !important;
}

ul.style1 img
{
float: left;
margin-right: 1em;
}

/*********************************************************************************/
/* Header */
/*********************************************************************************/

#header
{
position: relative;
}

#header .container
{
position: relative;
padding: 3em 0em;
}


/*********************************************************************************/
/* Nav */
/*********************************************************************************/

#nav
{
position: relative;
right: 0em;
top: 3em;
}

#nav > ul > li
{
position: relative;
left: -50%; /* or right 50% */
text-align: left;
}


#nav > ul > li:last-child
{
padding-right: 0;
}

#nav > ul > li > a,
#nav > ul > li > span
{
display: block;
margin-left: 0.7em;
padding: 0.80em 1.2em;
letter-spacing: 0.06em;
text-decoration: none;
font-size: 1em;
outline: 0;
color: #FFF;
}

#nav li.active a
{
background: #9cdedf;
border-radius: 5px;
color: #FFF;
}

#nav > ul > li > ul
{
display: none;
}

/*********************************************************************************/
/* Banner */
/*********************************************************************************/

#banner
{
position: relative;
background: #333 url(../images/banner.jpg) no-repeat center;
background-size: cover;
width: 100%; height:auto;
}

.homepage #banner
{
}

/*********************************************************************************/
/* Main */
/*********************************************************************************/

#main
{
position: relative;
padding: 6em 0em;
background: #00a7a9;
color: #3A3A3A;
}

#main header h2
{
color: #3A3A3A;
}

#main a
{
color: #3A3A3A;
}

/*********************************************************************************/
/* Featured */
/*********************************************************************************/

#featured
{
position: relative;
padding: 6em 0em 4em 0em;
background: #FFF;
}

/*********************************************************************************/
/* Marketing */
/*********************************************************************************/

#marketing
{
position: relative;
padding: 6em 0em;
background: #e4e4e4;
color: #3A3A3A;
}

#marketing header h2
{
color: #3A3A3A;
}

/*********************************************************************************/
/* Copyright */
/*********************************************************************************/

#copyright
{
position: relative;
padding: 3em 0em;
text-align: center;
color: #FFF;
}

#copyright .container
{
}

#copyright a
{
text-decoration: none;
color: #3A3A3A !important;
}




- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
here is the mobile.css




/*********************************************************************************/
/* Basic */
/*********************************************************************************/

body,input,textarea,select
{
line-height: 1.75em;
font-size: 10pt;
letter-spacing: 0;
}

body
{
padding-top: 44px;
}

h2, h3, h4, h5, h6
{
font-size: 1.5em;
}

section,
article
{
clear: both;
margin: 2em 0 2em 0 !important;
}

section > :first-child,
article > :first-child
{
margin-top: 0 !important;
}

section:first-child,
article:first-child
{
margin-top: 0 !important;
}

.container
{
padding: 0em 1em;
}

/*********************************************************************************/
/* UI */
/*********************************************************************************/

#titleBar
{
background: #3A3A3A;
}

#titleBar .title a
{
display: block;
color: #fff !important;
text-align: center;
text-decoration: none;
line-height: 44px;
font-size: 1.4em;
font-weight: 700;
}

#titleBar .toggle
{
position: absolute;
left: 0;
top: 0;
width: 80px;
height: 60px;
}

#titleBar .toggle:before
{
content: '';
display: block;
width: 60px;
height: 40px;
border-radius: 4px;
position: absolute;
left: 5px;
top: 5px;
}

#titleBar .toggle:after
{
content: '';
display: block;
width: 20px;
height: 20px;
position: absolute;
left: 15px;
top: 15px;
background: url('images/mobileUI-site-nav-opener-bg.svg') 0px 0px no-repeat;
opacity: 1;
}

#titleBar .toggle:active:after
{
opacity: 1;
}

#navPanel
{
background: #3A3A3A;
}

#navPanel .link
{
display: block;
color: #888;
text-decoration: none;
height: 44px;
line-height: 44px;
border-top: solid 1px #e4e4e4;
padding: 0 1em 0 1em;
}

#navPanel .link:first-child
{
border-top: 0;
}

#navPanel .link.depth-0
{
color: #fff;
}

#navPanel .indent-1 { display: inline-block; width: 1em; }
#navPanel .indent-2 { display: inline-block; width: 2em; }
#navPanel .indent-3 { display: inline-block; width: 3em; }
#navPanel .indent-4 { display: inline-block; width: 4em; }
#navPanel .indent-5 { display: inline-block; width: 5em; }
#navPanel .depth-0 { color: #fff; }

/*********************************************************************************/
/* Header */
/*********************************************************************************/

#header
{
display: none;
}

#logo
{
display: none;
}

#nav
{
display: none;
}

/*********************************************************************************/
/* Banner */
/*********************************************************************************/

#banner
{
padding: 3em 0em;
}


.homepage #banner
{
padding: 6em 0em;
}

/*********************************************************************************/
/* Main */
/*********************************************************************************/

#main
{
padding: 4em 0em;
}

/*********************************************************************************/
/* Featured */
/*********************************************************************************/

#featured
{
padding: 4em 0em 2em 0em;
}

/*********************************************************************************/
/* Marketing */
/*********************************************************************************/

#marketing
{
padding: 3em 0em;
}




and here is the desktop css:

/*********************************************************************************/
/* Header */
/*********************************************************************************/

#header
{
position: relative;
}

#header .container
{
position: relative;
padding: 6em 0em;
}



/*********************************************************************************/
/* Nav */
/*********************************************************************************/

#nav
{
position: absolute;
right: 0em;
top: 4.5em;
}

#nav > ul > li
{
float: left;
}

#nav > ul > li:last-child
{
padding-right: 0;
}

#nav > ul > li > a,
#nav > ul > li > span
{
display: block;
margin-left: .5em;
padding: 0.80em .80em;
letter-spacing: 0.06em;
text-decoration: none;
font-size: 1em;
outline: 0;
color: #FFF;
}

#nav li.active a
{
background: #56c9d6;
border-radius: 5px;
color: #FFF;
}

#nav > ul > li > ul
{
display: none;
}

/*********************************************************************************/
/* Banner */
/*********************************************************************************/

#banner
{
padding: 6em 0em;
}

.homepage #banner
{
padding: 18em 0em;
}

/*********************************************************************************/
/* Main */
/*********************************************************************************/

#main
{
padding: 6em 0em;
}

/*********************************************************************************/
/* Featured */
/*********************************************************************************/

#featured
{
padding: 6em 0em 4em 0em;
}

/*********************************************************************************/
/* Marketing */
/*********************************************************************************/

#marketing
{
padding: 6em 0em;
}

/*********************************************************************************/
/* Copyright */
/*********************************************************************************/

#copyright
{
padding: 3em 0em;
}







- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
this css sheet is called skel-noscript.css



/* Resets (http://meyerweb.com/eric/tools/css/reset/ | v2.0 | 20110126 | License: none (public domain)) */

html,body,div,span,applet,object,iframe,h1,h2,h3,h4,h5,h6,p,blockquote,pre,a,abbr,acronym,address,big,cite,code,del,dfn,em,img,ins,kbd,q,s,samp,small,strike,strong,sub,sup,tt,var,b,u,i,center,dl,dt,dd,ol,ul,li,fieldset,form,label,legend,table,caption,tbody,tfoot,thead,tr,th,td,article,aside,canvas,details,embed,figure,figcaption,footer,header,hgroup,menu,nav,output,ruby,section,summary,time,mark,audio,video{margin:0;padding:0;border:0;font-size:100%;font:inherit;vertical-align:baseline;}article,aside,details,figcaption,figure,footer,header,hgroup,menu,nav,section{display:block;}body{line-height:1;}ol,ul{list-style:none;}blockquote,q{quotes:none;}blockquote:before,blockquote:after,q:before,q:after{content:'';content:none;}table{border-collapse:collapse;border-spacing:0;}body{-webkit-text-size-adjust:none}

/* Box Model */

*, *:before, *:after {
-moz-box-sizing: border-box;
-webkit-box-sizing: border-box;
-o-box-sizing: border-box;
-ms-box-sizing: border-box;
box-sizing: border-box;
}

/* Container */

body {
min-width: 800px;
}

.container {
width: 800px;
margin-left: auto;
margin-right: auto;
}

/* Modifiers */

.container.small {
width: 800px;
}

.container.big {
width: 100%;
max-width: 1500px;
min-width: 800px;
}

/* Grid */

/* Cells */

.\31 2u { width: 100% }
.\31 1u { width: 91.6666666667% }
.\31 0u { width: 83.3333333333% }
.\39 u { width: 75% }
.\38 u { width: 66.6666666667% }
.\37 u { width: 58.3333333333% }
.\36 u { width: 50% }
.\35 u { width: 41.6666666667% }
.\34 u { width: 33.3333333333% }
.\33 u { width: 25% }
.\32 u { width: 16.6666666667% }
.\31 u { width: 8.3333333333% }
.\-11u { margin-left: 91.6666666667% }
.\-10u { margin-left: 83.3333333333% }
.\-9u { margin-left: 75% }
.\-8u { margin-left: 66.6666666667% }
.\-7u { margin-left: 58.3333333333% }
.\-6u { margin-left: 50% }
.\-5u { margin-left: 41.6666666667% }
.\-4u { margin-left: 33.3333333333% }
.\-3u { margin-left: 25% }
.\-2u { margin-left: 16.6666666667% }
.\-1u { margin-left: 8.3333333333% }

.row > * {
padding: 50px 0 0 50px;
float: left;
-moz-box-sizing: border-box;
-webkit-box-sizing: border-box;
-o-box-sizing: border-box;
-ms-box-sizing: border-box;
box-sizing: border-box;
}

.row + .row > * {
padding-top: 50px;
}

.row {
margin-left: -50px;
}

/* Rows */

.row:after {
content: '';
display: block;
clear: both;
height: 0;
}

.row:first-child > * {
padding-top: 0;
}

.row > * {
padding-top: 0;
}

/* Modifiers */

/* Flush */

.row.flush {
margin-left: 0;
}

.row.flush > * {
padding: 0 !important;
}

/* Quarter */

.row.quarter > * {
padding: 12.5px 0 0 12.5px;
}

.row.quarter + .row.quarter > * {
padding-top: 12.5px;
}

.row.quarter {
margin-left: -12.5px;
}

/* Half */

.row.half > * {
padding: 25px 0 0 25px;
}

.row.half + .row.half > * {
padding-top: 25px;
}

.row.half {
margin-left: -25px;
}

/* One and (a) Half */

.row.oneandhalf > * {
padding: 75px 0 0 75px;
}

.row.oneandhalf + .row.oneandhalf > * {
padding-top: 75px;
}

.row.oneandhalf {
margin-left: -75px;
}

/* Double */

.row.double > * {
padding: 100px 0 0 100px;
}

.row.double + .row.double > * {
padding-top: 100px;
}

.row.double {
margin-left: -100px;
}








- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
here is the style-desktop.css




/*********************************************************************************/
/* Header */
/*********************************************************************************/

#header
{
position: relative;
}

#header .container
{
position: relative;
padding: 6em 0em;
}



/*********************************************************************************/
/* Nav */
/*********************************************************************************/

#nav
{
position: absolute;
right: 0em;
top: 4.5em;
}

#nav > ul > li
{
float: left;
}

#nav > ul > li:last-child
{
padding-right: 0;
}

#nav > ul > li > a,
#nav > ul > li > span
{
display: block;
margin-left: .5em;
padding: 0.80em .80em;
letter-spacing: 0.06em;
text-decoration: none;
font-size: 1em;
outline: 0;
color: #FFF;
}

#nav li.active a
{
background: #56c9d6;
border-radius: 5px;
color: #FFF;
}

#nav > ul > li > ul
{
display: none;
}

/*********************************************************************************/
/* Banner */
/*********************************************************************************/

#banner
{
padding: 6em 0em;
}

.homepage #banner
{
padding: 18em 0em;
}

/*********************************************************************************/
/* Main */
/*********************************************************************************/

#main
{
padding: 6em 0em;
}

/*********************************************************************************/
/* Featured */
/*********************************************************************************/

#featured
{
padding: 6em 0em 4em 0em;
}

/*********************************************************************************/
/* Marketing */
/*********************************************************************************/

#marketing
{
padding: 6em 0em;
}

/*********************************************************************************/
/* Copyright */
/*********************************************************************************/

#copyright
{
padding: 3em 0em;
}
 

Ask a Question

Want to reply to this thread or ask your own question?

You'll need to choose a username for the site, which only take a couple of moments. After that, you can post your question and our members will help you out.

Ask a Question

Similar Threads

Help with my responsive home page 2
Horizontal menu bar header 2
SendGrid email issue in responsive Gmail 1
Working on mobile css menu with plenty of frustration! 2
Align img inside nav tabs section 5
Justify-content not working 1
Help needed with code 5
Buttons lining up 1

Members online

No members online now.
Total: 26 (members: 0, guests: 26)
Robots: 473

Forum statistics

Threads
473,769
Messages
2,569,580
Members
45,055
Latest member
SlimSparkKetoACVReview

Latest Threads

Top