We Keep Coding

How to collapse element on page load

How can a div (menu) be collapsed when a HTML page has loaded? I tried using the following code but it's not working as the menu remains visible.
When the page has loaded, I want the menu to be collapsed on #media screen and (max-width: 768px) only. When the menu is collpased, the button should say menu +. When the menu is visible, the button should say menu -
$('#togglelink').click(function() {
$('ul').toggle(300);
if ($(this).text() == "menu +")
$(this).text("menu -")
else
$(this).text("menu +");
})
.wrapper {
width: 90%;
height: auto;
margin: 10px auto 10px auto;
border: 2px solid #000000;
background-color: #0099cc;
}
#charset "utf-8";
/* CSS Document */
body {
font-family: 'Work Sans', sans-serif;
}
.wrapper h1 {
font-size: 2.75em;
line-height: 100%;
margin-left: 10px;
margin-right: 10px;
text-align: center;
color: #fff;
}
/*Header menu*/
#menu {
background: #ffffff;
width: auto;
margin-bottom: 5px;
}
#menu ul {
list-style: none;
margin: 0;
padding: 0;
line-height: 1;
/* display: block;
*/
zoom: 1;
/* Added the following for flexbox */
display: flex;
flex-wrap: wrap;
}
#menu ul:after {
content: ' ';
display: block;
font-size: 0;
height: 0;
clear: both;
visibility: hidden;
}
#menu ul li {
/* float: left;
*/
display: block;
padding: 0;
/* Added the following for flexbox */
flex-grow: 1;
}
#menu ul li a {
color: #000;
text-decoration: none;
display: block;
padding: 15px 25px;
font-family: 'Work Sans', sans-serif;
font-size: 1.5em;
font-weight: 500;
position: relative;
-webkit-transition: color .25s;
-moz-transition: color .25s;
-ms-transition: color .25s;
-o-transition: color .25s;
transition: color .25s;
/* Added the following for flexbox */
/* So that text appear visually centered */
text-align: center;
}
#menu ul li a:hover {
color: #000;
}
#menu ul li a:hover:before {
width: 100%;
}
#menu ul li a:before {
content: '';
display: block;
position: absolute;
left: 0;
bottom: 0;
height: 3px;
width: 0;
background: #000;
-webkit-transition: width .25s;
-moz-transition: width .25s;
-ms-transition: width .25s;
-o-transition: width .25s;
transition: width .25s;
}
#menu ul li.last > a:after,
#cssmenu ul li:last-child > a:after {
display: none;
}
#menu ul li.active a {
color: #000;
}
#menu ul li.active a:before {
width: 100%;
}
.menu_toggle {
display: none;
}
#media screen and (max-width: 768px) {
#menu ul li {
float: none;
width: 100%;
}
#menu ul li a {
width: 100%;
-moz-box-sizing: border-box;
-webkit-box-sizing: border-box;
box-sizing: border-box;
}
#menu ul li a:after {
display: none;
}
#menu ul li a:before {
height: 1px;
background: #000;
width: 100%;
opacity: .2;
}
#menu ul li.last > a:before,
#cssmenu ul li:last-child > a:before {
display: none;
}
.menu_toggle {
visibility: visible;
background-color: white;
border: 3px solid black;
color: black;
text-align: center;
text-decoration: none;
display: block;
font-size: 16px;
font-size: 1.5em;
padding: 0.5em 2em;
font-weight: 500;
margin: 0 auto;
margin-bottom: 10px;
cursor: pointer;
}
.menu_toggle:active {
background-color: black;
color: white;
}
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="wrapper">
<div>
<h1>Hello World</h1>
</div>
<div>
<button class="menu_toggle" tabindex="0" id="togglelink">menu +</button>
</div>
<div id="menu">
<ul>
<li><a><span>January</span></a>
</li>
<li><a><span>February</span></a>
</li>
<li><a><span>March</span></a>
</li>
<li><a><span>April</span></a>
</li>
<li><a><span>May</span></a>
</li>
<li><a><span>June</span></a>
</li>
<li><a><span>July</span></a>
</li>
<li><a><span>August</span></a>
</li>
<li><a><span>September</span></a>
</li>
<li><a><span>October</span></a>
</li>
<li><a><span>November</span></a>
</li>
<li><a><span>December</span></a>
</li>
</ul>
</div>
<p>
Hello World
</p>
</div>
window.innerWidth < 769 screens
window.innerWidth > 769 screens

Due to you requiring display: flex, one of the easiest ways to do this is with JS, you just need to add a hide() function before the click.
This will still then display your menu as display: flex as adding a display: none will change the menu to display: block when open.
$(document).ready(function() {
if(window.innerWidth < 769) {
$('#menu ul').hide();
}
$('#togglelink').click(function() {
$('ul').toggle(300);
if ($(this).text() == "menu +")
$(this).text("menu -")
else
$(this).text("menu +");
})
});
.wrapper {
width: 90%;
height: auto;
margin: 10px auto 10px auto;
border: 2px solid #000000;
background-color: #0099cc;
}
#charset "utf-8";
/* CSS Document */
body {
font-family: 'Work Sans', sans-serif;
}
.wrapper h1 {
font-size: 2.75em;
line-height: 100%;
margin-left: 10px;
margin-right: 10px;
text-align: center;
color: #fff;
}
/*Header menu*/
#menu {
background: #ffffff;
width: auto;
margin-bottom: 5px;
}
#menu ul {
list-style: none;
margin: 0;
padding: 0;
line-height: 1;
/* display: block;
*/
zoom: 1;
/* Added the following for flexbox */
display: flex;
flex-wrap: wrap;
}
#menu ul:after {
content: ' ';
display: block;
font-size: 0;
height: 0;
clear: both;
visibility: hidden;
}
#menu ul li {
/* float: left;
*/
display: block;
padding: 0;
/* Added the following for flexbox */
flex-grow: 1;
}
#menu ul li a {
color: #000;
text-decoration: none;
display: block;
padding: 15px 25px;
font-family: 'Work Sans', sans-serif;
font-size: 1.5em;
font-weight: 500;
position: relative;
-webkit-transition: color .25s;
-moz-transition: color .25s;
-ms-transition: color .25s;
-o-transition: color .25s;
transition: color .25s;
/* Added the following for flexbox */
/* So that text appear visually centered */
text-align: center;
}
#menu ul li a:hover {
color: #000;
}
#menu ul li a:hover:before {
width: 100%;
}
#menu ul li a:before {
content: '';
display: block;
position: absolute;
left: 0;
bottom: 0;
height: 3px;
width: 0;
background: #000;
-webkit-transition: width .25s;
-moz-transition: width .25s;
-ms-transition: width .25s;
-o-transition: width .25s;
transition: width .25s;
}
#menu ul li.last > a:after,
#cssmenu ul li:last-child > a:after {
display: none;
}
#menu ul li.active a {
color: #000;
}
#menu ul li.active a:before {
width: 100%;
}
.menu_toggle {
display: none;
}
#media screen and (max-width: 768px) {
#menu ul li {
float: none;
width: 100%;
}
#menu ul li a {
width: 100%;
-moz-box-sizing: border-box;
-webkit-box-sizing: border-box;
box-sizing: border-box;
}
#menu ul li a:after {
display: none;
}
#menu ul li a:before {
height: 1px;
background: #000;
width: 100%;
opacity: .2;
}
#menu ul li.last > a:before,
#cssmenu ul li:last-child > a:before {
display: none;
}
.menu_toggle {
visibility: visible;
background-color: white;
border: 3px solid black;
color: black;
text-align: center;
text-decoration: none;
display: block;
font-size: 16px;
font-size: 1.5em;
padding: 0.5em 2em;
font-weight: 500;
margin: 0 auto;
margin-bottom: 10px;
cursor: pointer;
}
.menu_toggle:active {
background-color: black;
color: white;
}
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="wrapper">
<div>
<h1>Hello World</h1>
</div>
<div>
<button class="menu_toggle" tabindex="0" id="togglelink">menu +</button>
</div>
<div id="menu">
<ul>
<li><a><span>January</span></a>
</li>
<li><a><span>February</span></a>
</li>
<li><a><span>March</span></a>
</li>
<li><a><span>April</span></a>
</li>
<li><a><span>May</span></a>
</li>
<li><a><span>June</span></a>
</li>
<li><a><span>July</span></a>
</li>
<li><a><span>August</span></a>
</li>
<li><a><span>September</span></a>
</li>
<li><a><span>October</span></a>
</li>
<li><a><span>November</span></a>
</li>
<li><a><span>December</span></a>
</li>
</ul>
</div>
<p>
Hello World
</p>
</div>

Try This answer
https://jsfiddle.net/alfinpaul/umbtL1wq/2/
var windowSize = $(window).width(); // Could've done $(this).width()
if(windowSize < 768){
$('#menu ul').each(function(){
$(this).slideUp();
});
}
$('#togglelink').click(function() {
$('ul').toggle(300);
if ($(this).text() == "menu +")
$(this).text("menu -")
else
$(this).text("menu +");
})
.wrapper {
width: 90%;
height: auto;
margin: 10px auto 10px auto;
border: 2px solid #000000;
background-color: #0099cc;
}
#charset "utf-8";
/* CSS Document */
body {
font-family: 'Work Sans', sans-serif;
}
/*'FACH Technical Support' title*/
.wrapper h1 {
font-size: 2.75em;
line-height: 100%;
margin-left: 10px;
margin-right: 10px;
text-align: center;
color: #fff;
}
/*Header menu*/
#menu {
background: #ffffff;
width: auto;
margin-bottom: 5px;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="wrapper">
<div>
<h1>Hello World</h1>
</div>
<div>
<button class="menu_toggle" tabindex="0" id="togglelink">menu +</button>
</div>
<div id="menu">
<ul>
<li><a><span>January</span></a>
</li>
<li><a><span>February</span></a>
</li>
<li><a><span>March</span></a>
</li>
<li><a><span>April</span></a>
</li>
<li><a><span>May</span></a>
</li>
<li><a><span>June</span></a>
</li>
<li><a><span>July</span></a>
</li>
<li><a><span>August</span></a>
</li>
<li><a><span>September</span></a>
</li>
<li><a><span>October</span></a>
</li>
<li><a><span>November</span></a>
</li>
<li><a><span>December</span></a>
</li>
</ul>
</div>
<p>
Hello World
</p>
</div>

Helloo,
In your #media screen and (max-width: 768px) try adding:
#menu ul {
display:none;
}
Fiddle: https://jsfiddle.net/rq2a3b4b/1/

navigation on media cant get 100% width

My navigation cant get a full width on media, I tried every way and cant locate where my mistake is, so I attached you the code, please if any one have an idea how to solve this, and set the width to full width = 100%?
The HTML
<nav class="navi" id="target">
<div class="menu" id="header">
<li><a class="link-1" href="#">home</a></li>
<li><a class="link-1" href="#">second</a></li>
<li><a class="link-1" href="#">third</a></li>
<div class="logo">
<li><img alt="Brand" src="logo.png" height="40px" width="60px"><li>
</div>
</div>
<div class="handle"><p>menu</p></div>
</nav>
The CSS:
nav {
width:100%;
margin-top: 0;
padding: 10px;
text-align: center;
font-family: arial;
box-shadow: 2px 2px 8px rgba(0, 0, 0, 0.5);
position:fixed;
text-align:right;
z-index:10;
}
nav li{
display: inline;
}
nav ul{
min-height:20px;
}
.navi{
background: rgba(0,0, 0, 0.5);
}
.navi:hover{
background-color: rgba(0,0,0, 1);
}
.link-1 {
transition: 0.3s ease;
color: #fff;
font-size: 16px;
text-decoration: none;
border-top: 1px solid ;
text-align:right;
padding: 20px 0px;
margin: 0 20px;
font-weight: italic;
letter-spacing:2px;
}
.link-1:hover {
border-top: 2px solid #fff;
text-decoration: none;
color:#fff;
padding: 3px 6px;
}
.logo{
text-align:left;
margin-left:35px;
margin-top:-25px;
}
.menu {display:block;
}
.handle {display:none;}
/*media try*/
#media (max-width: 580px) {
#target{
}
nav {
width:100%;
margin-top: 0;
display:block;
max-height:0;
margin-top:-20px;
padding-top:18px;
padding-right:-20%;
}
nav li{
display:block;
padding:10px;
background:#000;
}
.navi{
background: rgba(0,0, 0, 0.9);
text-align:center;
border:0;
background:#000;
}
.navi:hover{
background-color: rgba(0,0,0, 1);
border:0;
}
.link-1 {
border:0px solid #bbb;
font-size:18px;
}
.link-1:hover {
text-decoration:underline;
border:0px solid #bbb;
}
.logo{
text-align:left;
margin-left:35px;
margin-top:-25px;
display: none;
}
.menu {display:none;
}
.handle {display:block;
color:#fff;
font-size:40px;
text-decoration:none;
text-align:right;
}
.handle:hover{
}
.handle p{
color:#fff;
cursor: pointer;
-webkit-text-stroke: 1px black;
-webkit-font-smoothing: antialiased;
}
}
I fixed the HTML.

Add box-sizing: border-box; for nav.
ul tag is missing in your html.
Also make sure to remove the default padding and margin for ul.
nav ul{ padding: 0; margin:0;}
To stretch menu to full width of the window, apply the bg colour for nav, Or remove the padding:10px from nav.

changing the button movement on scroll using css and js

I have tried a lot and have reached till here. what wrong is going on i don't understand. where i am missing. please see to it. I want the button request a proposal to change its position form horizontal to vertical when we scroll down.I want that css class .vertical-pos and .head__get-in-touch-wrap to change by function. Thanks in advance
$(function() {
var span = $(".head__get-in-touch-wrap");
$(window).scroll(function() {
var scroll = $(window).scrollTop();
if (scroll >= 50) {
span.removeClass('head__get-in-touch-wrap').addClass("vertical-pos");
} else {
span.removeClass("vertical-pos").addClass('head__get-in-touch-wrapr');
}
});
});
html, body {
height: 100%;
-webkit-font-smoothing: subpixel-antialiased;
}
body {
background: white;
display: block;
margin: 0px;
}
.main-menu {
float: right;
padding-top: 2%;
padding-right: 5%;
padding-left: 0;
margin: -90px 235px 0 0 !important;
list-style: none;
transition: opacity .6s 2.5s;
font-weight: 700;
}
.navbar--inverted .main-menu__item {
color: #000;
}
.main-menu__item {
display: inline-block;
margin: 0 10px;
font: 400 15px/20px 'Oswald',sans-serif;
letter-spacing: .5px;
word-spacing: 1px;
text-transform: uppercase;
color: #fff;
transition: opacity .3s ease-in-out;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
}
.main-menu__item--request {
border:1px solid black;
cursor:pointer;
display:inline-block;
margin-right:0;
padding:15px 30px;
}
.main-menu__item > a {
color:black;
text-decoration:none;
font-weight: 700;
}
a {
background-color:transparent;
text-decoration:none;
}
a:active, a:hover {
outline:0;
color:#C1C1C1;
}
.menu-toggle {
position: absolute;
right: 4%;
display: none;
width: 44px;
height: 56px;
background: 0 0;
cursor: pointer;
-webkit-tap-highlight-color: rgba(0,0,0,0);
-webkit-touch-callout: none;
-webkit-user-select: none;
border: 0 none;
padding: 4% 0 20px 20px;
z-index: 1;
align-items: flex-start;
}
.menu-toggle:hover{
color:#C1C1C1;
}
.logo{
margin:20px;
}
.main-block__line {
background:#171717;
display:none;
height:5px;
left:5%;
margin-left:15px;
position:absolute;
top:550px;
width:20px;
z-index:10;
}
.head__menu-btn__wrap {
display:block;
margin:-25px -40px 0 0;
position:fixed;
right:5%;
top:47px;
width:226px;
z-index:999;
}.head__menu-btn {
-webkit-transition:all 0.1s ease;
background-image:url(../pixster/menu-btn.png);
background-position:0 0;
background-repeat:no-repeat;
background-size:45px 45px;
cursor:pointer;
display:block;
height:45px;
position:absolute;
right:0;
top:0;
transition:all 0.1s ease;
width:45px;
z-index:999;
}
.head__get-in-touch-wrap {
-webkit-transform-origin:203px 23px 0 !important;
-webkit-transition-duration:0.5s!important ;
-webkit-transition-timing-function:cubic-bezier(0.39, -0.16, 0.4, 1.21)!important ;
display:block;
height:45px;
left:0;
position:absolute !important;
top:0;
transform-origin:203px 23px 0;
transition-duration:0.5s;
transition-timing-function:cubic-bezier(0.39, -0.16, 0.4, 1.21);
width:146px;
}
.vertical-pos{
-webkit-transform: rotate(-90deg);
-ms-transform: rotate(-90deg);
transform: rotate(-90deg);
}
.head__get-in-touch {
-webkit-transition:all 0.1s ease;
background-color:#0072F6;
border:none;
color:#FFFFFF;
display:block;
font-size:12px;
font-weight:600;
letter-spacing:2.5px;
margin-top:0;
padding:15px 0;
text-align:center;
text-transform:uppercase;
transition:all 0.1s ease;
width:146px;
}
<header class="logo">
<img src="../pixster/logo.png" alt="Pixster Studio" />
</header>
<span class="main-block__line">
</span>
<div class="head__menu-btn__wrap">
<span class="head__menu-btn open-main-menu-button">
</span>
<span class="head__get-in-touch-wrap">
Request a proposal
</span>
</div>
<ul class="main-menu in-view">
<li class="main-menu__item">About</li>
<li class="main-menu__item">Services</li>
<li class="main-menu__item">Work</li>
<li class="main-menu__item">Blog</li>
<li class="main-menu__item">Contact</li>
</ul>
<button data-menu-button="" type="button" class="menu-toggle">
<span class="menu-toggle__lines"></span>
</button>

See the fiddle : http://jsfiddle.net/sachinkk/p3x9k67d/
Change the css to:
.head__get-in-touch-wrap {
display: inline-block;
-webkit-transform-origin:203px 23px 0 !important;
-webkit-transition-duration:0.5s!important ;
-webkit-transition-timing-function:cubic-bezier(0.39, -0.16, 0.4, 1.21)!important ;
display:block;
height:45px;
left:0;
position:absolute !important;
top:0;
transform-origin:203px 23px 0;
transition-duration:0.5s;
transition-timing-function:cubic-bezier(0.39, -0.16, 0.4, 1.21);
width:146px;
}
JS to :
$(function() {
var span = $(".head__get-in-touch-wrap");
$(window).scroll(function() {
var scroll = $(window).scrollTop();
if (scroll >= 10) {
span.addClass("vertical-pos");
} else {
span.removeClass("vertical-pos");
}
});
});
snippet code : ignore
$(function() {
var span = $(".head__get-in-touch-wrap");
$(window).scroll(function() {
var scroll = $(window).scrollTop();
if (scroll >= 10) {
span.addClass("vertical-pos");
} else {
span.removeClass("vertical-pos");
}
});
});
html, body {
height: 100%;
-webkit-font-smoothing: subpixel-antialiased;
}
body {
background: white;
display: block;
margin: 0px;
}
.main-menu {
float: right;
padding-top: 2%;
padding-right: 5%;
padding-left: 0;
margin: -90px 235px 0 0 !important;
list-style: none;
transition: opacity .6s 2.5s;
font-weight: 700;
}
.navbar--inverted .main-menu__item {
color: #000;
}
.main-menu__item {
display: inline-block;
margin: 0 10px;
font: 400 15px/20px 'Oswald',sans-serif;
letter-spacing: .5px;
word-spacing: 1px;
text-transform: uppercase;
color: #fff;
transition: opacity .3s ease-in-out;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
}
.main-menu__item--request {
border:1px solid black;
cursor:pointer;
display:inline-block;
margin-right:0;
padding:15px 30px;
}
.main-menu__item > a {
color:black;
text-decoration:none;
font-weight: 700;
}
a {
background-color:transparent;
text-decoration:none;
}
a:active, a:hover {
outline:0;
color:#C1C1C1;
}
.menu-toggle {
position: absolute;
right: 4%;
display: none;
width: 44px;
height: 56px;
background: 0 0;
cursor: pointer;
-webkit-tap-highlight-color: rgba(0,0,0,0);
-webkit-touch-callout: none;
-webkit-user-select: none;
border: 0 none;
padding: 4% 0 20px 20px;
z-index: 1;
align-items: flex-start;
}
.menu-toggle:hover{
color:#C1C1C1;
}
.logo{
margin:20px;
}
.main-block__line {
background:#171717;
display:none;
height:5px;
left:5%;
margin-left:15px;
position:absolute;
top:550px;
width:20px;
z-index:10;
}
.head__menu-btn__wrap {
display:block;
margin:-25px -40px 0 0;
position:fixed;
right:5%;
top:47px;
width:226px;
z-index:999;
}.head__menu-btn {
-webkit-transition:all 0.1s ease;
background-image:url(../pixster/menu-btn.png);
background-position:0 0;
background-repeat:no-repeat;
background-size:45px 45px;
cursor:pointer;
display:block;
height:45px;
position:absolute;
right:0;
top:0;
transition:all 0.1s ease;
width:45px;
z-index:999;
}
.head__get-in-touch-wrap {
display: inline-block;
-webkit-transform-origin:203px 23px 0 !important;
-webkit-transition-duration:0.5s!important ;
-webkit-transition-timing-function:cubic-bezier(0.39, -0.16, 0.4, 1.21)!important ;
display:block;
height:45px;
left:0;
position:absolute !important;
top:0;
transform-origin:203px 23px 0;
transition-duration:0.5s;
transition-timing-function:cubic-bezier(0.39, -0.16, 0.4, 1.21);
width:146px;
}
.vertical-pos{
-webkit-transform: rotate(-90deg);
-ms-transform: rotate(-90deg);
transform: rotate(-90deg);
}
.head__get-in-touch {
-webkit-transition:all 0.1s ease;
background-color:#0072F6;
border:none;
color:#FFFFFF;
display:block;
font-size:12px;
font-weight:600;
letter-spacing:2.5px;
margin-top:0;
padding:15px 0;
text-align:center;
text-transform:uppercase;
transition:all 0.1s ease;
width:146px;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<header class="logo">
<img src="../pixster/logo.png" alt="Pixster Studio" />
</header>
<span class="main-block__line">
</span>
<div class="head__menu-btn__wrap">
<span class="head__menu-btn open-main-menu-button">
</span>
<span class="head__get-in-touch-wrap">
Request a proposal
</span>
</div>
<ul class="main-menu in-view">
<li class="main-menu__item">About</li>
<li class="main-menu__item">Services</li>
<li class="main-menu__item">Work</li>
<li class="main-menu__item">Blog</li>
<li class="main-menu__item">Contact</li>
</ul>
<button data-menu-button="" type="button" class="menu-toggle">
<span class="menu-toggle__lines"></span>
</button>

try add to the span an id attribute, so you can reach it more clearly,the id stays while you change the class
<span class="head__get-in-touch-wrap" id="foo">
also attach the scroll event to the window with on():
var span = $("#foo");
$(window).on("scroll", function() {
var scroll = $(window).scrollTop();
if (scroll >= 50) {
span.removeClass('head__get-in-touch-wrap').addClass("vertical-pos");
} else {
span.removeClass("vertical-pos").addClass('head__get-in-touch-wrapr');
}
});

Expand Collapse Menu on Mobile While Maintaining Hover on Desktop

I have a html page on my desktop that uses a vertical sliding menu on hover. On an iPad I can click the menu to expand it, but I can't figure out how to make it collapse. I have tried using jquery but I can't seem to make it work. Here is the code I am starting with.
#navigation_slideout {
position: fixed;
top: 80px;
left: -370px;
-webkit-transition-duration: .5s;
-moz-transition-duration: .5s;
-o-transition-duration: .5s;
transition-duration: .5s;
-webkit-border-radius: 5px;
-moz-border-radius: 5px;
border-radius: 5px;
-webkit-box-shadow: 0 0 40px #222;
-moz-box-shadow: 0 0 40px #222;
box-shadow: 0 0 40px #222;
}
#navigation_slideout:hover {
left: -39px;
}
#navigation_slideout ul
{
list-style: none;
}
#navigation_slideout ul li {
background: #548EBE;
width: 325px;
height: 30px;
text-align: left;
padding-top: 5px;
font-family:HelveticaNeue,Helvetica Neue,Helvetica,Arial,sans-serif;
font-size: 12pt;
color:white;
font-weight:bold;
}
#navigation_slideout ul li a{
color: #000;
text-decoration: none;
font-weight:bold;
display: block;
background-color:#548EBE;
color:white;
}
#navigation_slideout ul li ul{
width:285px;
}
#navigation_slideout ul li ul li {
width:10px;
position:relative;
left:-41px;
}
#navigation_slideout ul li ul li a {
background:#548EBE;
width:326px;
height:30px;
text-align:left;
padding-top:5px;
font-family: helvetica, arial, sans-serif;
font-size: 12pt;
color:white;
font-weight:bold;
}
#menu{
-ms-transform: rotate(-90deg);
-webkit-transform: rotate(-90deg);
transform: rotate(-90deg);
font-family:HelveticaNeue,Helvetica Neue,Helvetica,Arial,sans-serif;
font-size: 14pt;
color:white;
font-weight:bold;
margin:0px 0px 0px 0px;
right:0px;
padding:0px 0px 0px 0px
}
#menu a{
font-size: 14pt;
color:white;
font-weight:bold;
text-decoration:none;
}
table.nospacing {
border-collapse: collapse;
border-spacing: 0;
table-layout: fixed;
}
table.nospacing th, td {
padding: 0;
}
.menu-col{max-width: 30px;}
<div id="navigation_slideout" style="background-color:#548EBE;z-index:1" >
<table class="nospacing" style="border-style:none">
<tr>
<td>
<ul>
<li> Home</li>
<li> About</li>
<li><a href="contact/default.html" > Contacts</a></li>
<li><a href="faq/default.html" > FAQs</a></li>
</ul>
<hr width="200px"/>
<ul>
<!-- #BeginEditable "redlines" -->
<li style="display:none"> Redlines</li>
<!-- #EndEditable -->
</ul>
</td>
<td class="menu-col" style="border-left:medium;border-left-color:white;border-left-style:solid"><p id="menu">MENU</p></td>
</tr>
</table>​

iDevices have a wierd thing where where the hover state persists. I fixed this by adding hover classes. If you are using jquery you can do this...
elem.on('mouseenter', function () {
$(this).addClass('hover');
}
elem.on('mouseleave', function () {
$(this).removeClass('hover');
}
there are other fixes aswell...
http://davidwalsh.name/ios-hover-menu-fix
http://www.slickmedia.co.uk/news/blog/glenns-blog/fix-ipad-iphone-css-hover-issues/

DIV not working with different resolutions

This might have been answered before, my searching hasn't led me to any answers, so I apologize in advance if there's already a thread that might be able to help.
Here's a fiddle
I realize that what the page looks wonky, it looks much better from my own PC. I'm really just having trouble with the navbar not centering on the slideshow when it comes to differing resolutions.
HTML:
</div>
<div id="schedule">
<p> </p>
</div>
<div id="wrap">
<ul class="navbar">
<li>Courses
</li>
<li>Faculty
</li>
<li>Programs and Athletics
</li>
<li>Information ▽
<ul>
<li><a target="_blank" href="https://parentlink.ccsd.net/html/ContentBase/Content/Home/Login">ParentLink</a>
</li>
<li><a target="_blank" href="https://twitter.com/">Twitter</a>
</li>
<li><a target="_blank" href="https://www.facebook.com/">Facebook</a>
</li>
<li>Important Handouts
</ul>
</li>
</ul>
</div>
<br />
<div id="slide_background">
<!-- Start WOWSlider.com BODY section id=wowslider-container4 -->
<div id="wowslider-container4">
<div class="ws_images">
<ul>
<li>
<img src="#" />
</li>
<li>
<img src="#" />
</li>
<li>
<img src="#" />
</li>
<li>
<img src="#" />
</li>
<li>
<img src="#" />
</li>
</ul>
</div>
<div class="ws_bullets">
</div>
</div>
<div class="ws_shadow"></div>
</div>
<script type="text/javascript" src="engine4//wowslider.js"></script>
<script type="text/javascript" src="engine4//script.js"></script>
<!-- End WOWSlider.com BODY section -->
</div>
CSS:
/* CSS Document */
body {
background-image:url(images/images/banner_repeat_01.jpg);
width:auto;
height:auto;
background-repeat:repeat-x;
}
footer {
background-color:#c3c3c3;
background-repeat:repeat-x;
background-position:bottom;
width:100%;
left:0;
right:0;
position:absolute;
}
#banner {
width:auto;
height:auto;
margin-left:auto;
margin-right:auto;
text-align:center;
color:white;
text-shadow: 2px 2px 5px #000;
font-family:"Times New Roman", Times, serif;
}
#schedule {
color:white;
margin-left:auto;
margin-right:auto;
text-align:center;
margin-top:2.9em;
}
#slide_background {
background-color:#c3c3c3;
margin-left:auto;
margin-right:auto;
width:100%;
position:absolute;
left:0;
right:0;
}
#slides {
background-color:#000;
margin-left:auto;
margin-right:auto;
text-align:center;
height:13em;
width:70%;
margin-top:-1em;
color:white;
}
#frontpage {
margin-left:auto;
margin-right:auto;
width:100%;
color:#333;
margin-top:23em;
}
#banner hr {
width:15em;
margin-top:-1.8em
}
#frontpage table th {
color:#333;
border-collapse:collapse;
font-size:2em;
text-decoration:underline;
font-variant:small-caps;
}
#frontpage table td {
color:#161616;
border-collapse:collapse;
font-size:1.3em;
}
h1 {
font-size:2.8em;
margin-top:-.1em;
}
h3 {
font-variant:small-caps;
margin-top:-.2em;
letter-spacing:4px;
}
a:link {
text-decoration: none;
color:black;
}
a:visited {
text-decoration:none;
font-weight:bold;
color:black;
}
a:active {
text-decoration:underline;
color: #00F;
}
table a:hover {
text-decoration:underline;
font-weight:bold;
color:#33F;
}
a h3 {
color: #FFF;
text-decoration: none;
}
a h1 {
color: #FFF;
text-decoration: none;
}
table {
font-family:"Times New Roman", Times, serif;
font-size:1em;
margin-left:auto;
margin-right:auto;
letter-spacing:2px;
margin-top:-.5em;
}
td:nth-child(1) {
border-right:solid thin;
}
td:nth-child(2) {
border-right:solid thin;
}
td:nth-child(3) {
border-right:solid thin;
}
#frontpage td:nth-child(3) {
border-right:none;
}
.schedule_day {
font-weight:bold;
font-size:1.3em;
text-decoration:underline;
color:black;
font-variant:small-caps;
}
#banner a h1 {
text-decoration: none;
}
#wowslider-container4 {
zoom: 1;
position: relative;
max-width:960px;
margin:0px auto 0px;
z-index:90;
border:none;
text-align:left;
/* reset align=center */
font-size: 10px;
}
* html #wowslider-container4 {
width:960px
}
#wowslider-container4 .ws_images ul {
position:relative;
width: 10000%;
height:auto;
left:0;
list-style:none;
margin:0;
padding:0;
border-spacing:0;
overflow: visible;
/*table-layout:fixed;*/
}
#wowslider-container4 .ws_images ul li {
width:1%;
line-height:0;
/*opera*/
float:left;
font-size:0;
padding:0 0 0 0 !important;
margin:0 0 0 0 !important;
}
#wowslider-container4 .ws_images {
position: relative;
left:0;
top:0;
width:100%;
height:100%;
overflow:hidden;
}
#wowslider-container4 .ws_images a {
width:100%;
display:block;
color:transparent;
}
#wowslider-container4 img {
max-width: none !important;
}
#wowslider-container4 .ws_images img {
width:100%;
border:none 0;
max-width: none;
padding:0;
margin:0;
}
#wowslider-container4 a {
text-decoration: none;
outline: none;
border: none;
}
#wowslider-container4 .ws_bullets {
font-size: 0px;
float: left;
position:absolute;
z-index:70;
}
#wowslider-container4 .ws_bullets div {
position:relative;
float:left;
}
#wowslider-container4 .wsl {
display:none;
}
#wowslider-container4 sound, #wowslider-container4 object {
position:absolute;
}
#wowslider-container4 .ws_bullets {
padding: 9px;
}
#wowslider-container4 .ws_bullets a {
width:11px;
height:11px;
background: url(./bullet.png) left top;
float: left;
text-indent: -4000px;
position:relative;
margin-left:5px;
color:transparent;
}
#wowslider-container4 .ws_bullets a:hover {
background-position: 0 50%;
}
#wowslider-container4 .ws_bullets a.ws_selbull {
background-position: 0 100%;
}
#wowslider-container4 a.ws_next, #wowslider-container4 a.ws_prev {
position:absolute;
display:block;
top:50%;
margin-top:-2em;
z-index:60;
height: 4.5em;
width: 4.5em;
background-image: url(./arrows.png);
opacity: 0.8;
background-size: 200%;
}
#wowslider-container4 a.ws_next {
background-position: 100% 0;
right:2.1em;
}
#wowslider-container4 a.ws_prev {
left:2.1em;
background-position: 0 0;
}
#wowslider-container4 a.ws_next:hover {
opacity: 1;
}
#wowslider-container4 a.ws_prev:hover {
opacity: 1;
}
/*playpause*/
#wowslider-container4 .ws_playpause {
display:none;
width: 4.5em;
height: 4.5em;
position: absolute;
top: 50%;
left: 50%;
margin-left: -2em;
margin-top: -2em;
z-index: 59;
background-size: 100%;
}
#wowslider-container4:hover .ws_playpause {
display:block;
}
#wowslider-container4 .ws_pause {
background-image: url(./pause.png);
}
#wowslider-container4 .ws_play {
background-image: url(./play.png);
}
#wowslider-container4 .ws_pause:hover, #wowslider-container1 .ws_play:hover {
background-position: 100% 100% !important;
}
/* bottom center */
#wowslider-container4 .ws_bullets {
bottom: -26px;
left:862px;
}
#wowslider-container4 .ws_bullets div {
left:-50%;
}
#wowslider-container4 .ws-title {
position:absolute;
display:block;
bottom: 1.7em;
left: 0;
margin: 0.9em;
margin-left: 0;
margin-right: 0.9em;
padding:0.8em;
background:#FFFFFF;
color:#5D5D5D;
z-index: 50;
font-family:'Open Sans', Arial, Helvetica, sans-serif;
border-radius:0.5em;
-moz-border-radius:0 1em 1em 0;
border-radius:0 1em 1em 0;
opacity:0.8;
filter:progid:DXImageTransform.Microsoft.Alpha(opacity=90);
-moz-box-shadow: 0 0 0.2em #5D5D5D;
box-shadow: 0 0 0.2em #5D5D5D;
}
#wowslider-container4 .ws-title div {
padding-top:0.25em;
font-size: 1.4em;
}
#wowslider-container4 .ws-title span {
font-size: 1.8em;
}
#wowslider-container4 .ws_images ul {
animation: wsBasic 20s infinite;
-moz-animation: wsBasic 20s infinite;
-webkit-animation: wsBasic 20s infinite;
}
#keyframes wsBasic {
0% {
left:-0%
}
10% {
left:-0%
}
20% {
left:-100%
}
30% {
left:-100%
}
40% {
left:-200%
}
50% {
left:-200%
}
60% {
left:-300%
}
70% {
left:-300%
}
80% {
left:-400%
}
90% {
left:-400%
}
}
#-moz-keyframes wsBasic {
0% {
left:-0%
}
10% {
left:-0%
}
20% {
left:-100%
}
30% {
left:-100%
}
40% {
left:-200%
}
50% {
left:-200%
}
60% {
left:-300%
}
70% {
left:-300%
}
80% {
left:-400%
}
90% {
left:-400%
}
}
#-webkit-keyframes wsBasic {
0% {
left:-0%
}
10% {
left:-0%
}
20% {
left:-100%
}
30% {
left:-100%
}
40% {
left:-200%
}
50% {
left:-200%
}
60% {
left:-300%
}
70% {
left:-300%
}
80% {
left:-400%
}
90% {
left:-400%
}
}
#wowslider-container4 .ws_images img {
border-radius: 4px;
-moz-border-radius:4px;
-webkit-border-radius:4px;
}
#wowslider-container4 .ws_effect img {
border-radius: 4px;
-moz-border-radius:4px;
-webkit-border-radius:4px;
}
#wrap {
width: 100%;
/* Spans the width of the page */
height: 3.8em;
margin: 0;
/* Ensures there is no space between sides of the screen and the menu */
z-index: 99;
/* Makes sure that your menu remains on top of other page elements */
position: absolute;
background-color:#FFF;
left:-3px;
right:0;
top: 153px;
margin-left:auto;
margin-right:auto;
}
body {
width:100%;
height:100%;
}
.navbar {
height: .5em;
padding: 0;
margin-left: 40em;
margin-right: auto;
position: absolute;
/* Ensures that the menu doesn't affect other elements */
width: auto;
left: 0 top: 0px;
min-width:800px;
}
.navbar li {
height: 1.5em;
;
width: 10em;
/* Each menu item is 150px wide */
float:left;
text-align: center;
/* All text is placed in the center of the box */
list-style: none;
/* Removes the default styling (bullets) for the list */
font:"Times New Roman", Times, serif;
font-size:1em;
padding: 0;
margin:0;
border-left:thin solid #000;
border-right:thin solid #000;
}
.navbar a {
padding: 0;
/* Adds a padding on the top and bottom so the text appears centered vertically */
text-decoration: none;
/* Removes the default hyperlink styling. */
color: #000;
/* Text color is white */
display: block;
}
.navbar li ul {
display: none;
/* Hides the drop-down menu */
height: auto;
margin: 0;
/* Aligns drop-down box underneath the menu item */
}
.navbar li:hover ul {
display: block;
/* Displays the drop-down box when the menu item is hovered over */
border: none;
padding: .7em;
}
li:nth-child(1) {
border-right:solid thin;
}
li:nth-child(2) {
border-right:solid thin;
}
li:nth-child(3) {
border-right:solid thin;
}
li:nth-child(4) {
border-right:solid thin;
}
.navbar li ul li {
border:none;
background-color:#CCC;
border:thin solid #000;
padding:5px;
width:130px;
}
.navbar li ul li a:hover {
background-color: #CCC;
}
Thank you!

add this to your #wrap id
#wrap { text-align: center; }
and remove your .navbar code. paste this instead
.navbar { display: inline-block; }
fiddle demo

Hy Harin
If I understood you right, it's all about centering the navigation?
then try these:
.navbar {
margin: 10px auto;
width: 800px;
}
set a fixed with of your navbar UL. then set a margin: 0 auto. that means 0 margin on top and bottom and auto margin on the left and right side = it will be centered.
this won't work correctly, if the screen width is smaler than 800px ;)