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/

CSS Menu - Submenu on click (JS)

I downloaded this menu. Seems to work good. But when you shrink the page the menu appears only when you click the button. Same for the subitems. But those subitems extends only when you click the "+" and not the "Products". I want to make it extend with both li (Products) and + symbol.
Image of shrank menu
The problem is in the .js file but I can't make it work.
(function($) {
$.fn.menumaker = function(options) {
var cssmenu = $(this), settings = $.extend({
title: "Menu",
format: "dropdown",
sticky: false
}, options);
return this.each(function() {
cssmenu.prepend('<div id="menu-button">' + settings.title + '</div>');
$(this).find("#menu-button").on('click', function(){
$(this).toggleClass('menu-opened');
var mainmenu = $(this).next('ul');
if (mainmenu.hasClass('open')) {
mainmenu.hide().removeClass('open');
}
else {
mainmenu.show().addClass('open');
if (settings.format === "dropdown") {
mainmenu.find('ul').show();
}
}
});
cssmenu.find('li ul').parent().addClass('has-sub');
multiTg = function() {
cssmenu.find(".has-sub").prepend('<span class="submenu-button"></span>');
cssmenu.find('.submenu-button').on('click', function() {
$(this).toggleClass('submenu-opened');
if ($(this).siblings('ul').hasClass('open')) {
$(this).siblings('ul').removeClass('open').hide();
}
else {
$(this).siblings('ul').addClass('open').show();
}
});
};
if (settings.format === 'multitoggle') multiTg();
else cssmenu.addClass('dropdown');
if (settings.sticky === true) cssmenu.css('position', 'fixed');
resizeFix = function() {
if ($( window ).width() > 768) {
cssmenu.find('ul').show();
}
if ($(window).width() <= 768) {
cssmenu.find('ul').hide().removeClass('open');
}
};
resizeFix();
return $(window).on('resize', resizeFix);
});
};
})(jQuery);
(function($){
$(document).ready(function(){
$("#cssmenu").menumaker({
title: "Menu",
format: "multitoggle"
});
});
})(jQuery);
#import url(http://fonts.googleapis.com/css?family=Montserrat:400,700);
#cssmenu,
#cssmenu ul,
#cssmenu ul li,
#cssmenu ul li a,
#cssmenu #menu-button {
margin: 0;
padding: 0;
border: 0;
list-style: none;
line-height: 1;
display: block;
position: relative;
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
}
#cssmenu:after,
#cssmenu > ul:after {
content: ".";
display: block;
clear: both;
visibility: hidden;
line-height: 0;
height: 0;
}
#cssmenu #menu-button {
display: none;
}
#cssmenu {
font-family: Montserrat, sans-serif;
background: #333333;
}
#cssmenu > ul > li {
float: left;
}
#cssmenu.align-center > ul {
font-size: 0;
text-align: center;
}
#cssmenu.align-center > ul > li {
display: inline-block;
float: none;
}
#cssmenu.align-center ul ul {
text-align: left;
}
#cssmenu.align-right > ul > li {
float: right;
}
#cssmenu > ul > li > a {
padding: 17px;
font-size: 12px;
letter-spacing: 1px;
text-decoration: none;
color: #dddddd;
font-weight: 700;
text-transform: uppercase;
}
#cssmenu > ul > li:hover > a {
color: #ffffff;
}
#cssmenu > ul > li.has-sub > a {
padding-right: 30px;
}
#cssmenu > ul > li.has-sub > a:after {
position: absolute;
top: 22px;
right: 11px;
width: 8px;
height: 2px;
display: block;
background: #dddddd;
content: '';
}
#cssmenu > ul > li.has-sub > a:before {
position: absolute;
top: 19px;
right: 14px;
display: block;
width: 2px;
height: 8px;
background: #dddddd;
content: '';
-webkit-transition: all .25s ease;
-moz-transition: all .25s ease;
-ms-transition: all .25s ease;
-o-transition: all .25s ease;
transition: all .25s ease;
}
#cssmenu > ul > li.has-sub:hover > a:before {
top: 23px;
height: 0;
}
#cssmenu ul ul {
position: absolute;
left: -9999px;
}
#cssmenu.align-right ul ul {
text-align: right;
}
#cssmenu ul ul li {
height: 0;
-webkit-transition: all .25s ease;
-moz-transition: all .25s ease;
-ms-transition: all .25s ease;
-o-transition: all .25s ease;
transition: all .25s ease;
}
#cssmenu li:hover > ul {
left: auto;
}
#cssmenu.align-right li:hover > ul {
left: auto;
right: 0;
}
#cssmenu li:hover > ul > li {
height: 35px;
}
#cssmenu ul ul ul {
margin-left: 100%;
top: 0;
}
#cssmenu.align-right ul ul ul {
margin-left: 0;
margin-right: 100%;
}
#cssmenu ul ul li a {
border-bottom: 1px solid rgba(150, 150, 150, 0.15);
padding: 11px 15px;
width: 170px;
font-size: 12px;
text-decoration: none;
color: #dddddd;
font-weight: 400;
background: #333333;
}
#cssmenu ul ul li:last-child > a,
#cssmenu ul ul li.last-item > a {
border-bottom: 0;
}
#cssmenu ul ul li:hover > a,
#cssmenu ul ul li a:hover {
color: #ffffff;
}
#cssmenu ul ul li.has-sub > a:after {
position: absolute;
top: 16px;
right: 11px;
width: 8px;
height: 2px;
display: block;
background: #dddddd;
content: '';
}
#cssmenu.align-right ul ul li.has-sub > a:after {
right: auto;
left: 11px;
}
#cssmenu ul ul li.has-sub > a:before {
position: absolute;
top: 13px;
right: 14px;
display: block;
width: 2px;
height: 8px;
background: #dddddd;
content: '';
-webkit-transition: all .25s ease;
-moz-transition: all .25s ease;
-ms-transition: all .25s ease;
-o-transition: all .25s ease;
transition: all .25s ease;
}
#cssmenu.align-right ul ul li.has-sub > a:before {
right: auto;
left: 14px;
}
#cssmenu ul ul > li.has-sub:hover > a:before {
top: 17px;
height: 0;
}
#media all and (max-width: 768px), only screen and (-webkit-min-device-pixel-ratio: 2) and (max-width: 1024px), only screen and (min--moz-device-pixel-ratio: 2) and (max-width: 1024px), only screen and (-o-min-device-pixel-ratio: 2/1) and (max-width: 1024px), only screen and (min-device-pixel-ratio: 2) and (max-width: 1024px), only screen and (min-resolution: 192dpi) and (max-width: 1024px), only screen and (min-resolution: 2dppx) and (max-width: 1024px) {
#cssmenu {
width: 100%;
}
#cssmenu ul {
width: 100%;
display: none;
}
#cssmenu.align-center > ul {
text-align: left;
}
#cssmenu ul li {
width: 100%;
border-top: 1px solid rgba(120, 120, 120, 0.2);
}
#cssmenu ul ul li,
#cssmenu li:hover > ul > li {
height: auto;
}
#cssmenu ul li a,
#cssmenu ul ul li a {
width: 100%;
border-bottom: 0;
}
#cssmenu > ul > li {
float: none;
}
#cssmenu ul ul li a {
padding-left: 25px;
}
#cssmenu ul ul ul li a {
padding-left: 35px;
}
#cssmenu ul ul li a {
color: #dddddd;
background: none;
}
#cssmenu ul ul li:hover > a,
#cssmenu ul ul li.active > a {
color: #ffffff;
}
#cssmenu ul ul,
#cssmenu ul ul ul,
#cssmenu.align-right ul ul {
position: relative;
left: 0;
width: 100%;
margin: 0;
text-align: left;
}
#cssmenu > ul > li.has-sub > a:after,
#cssmenu > ul > li.has-sub > a:before,
#cssmenu ul ul > li.has-sub > a:after,
#cssmenu ul ul > li.has-sub > a:before {
display: none;
}
#cssmenu #menu-button {
display: block;
padding: 17px;
color: #dddddd;
cursor: pointer;
font-size: 12px;
text-transform: uppercase;
font-weight: 700;
}
#cssmenu #menu-button:after {
position: absolute;
top: 22px;
right: 17px;
display: block;
height: 4px;
width: 20px;
border-top: 2px solid #dddddd;
border-bottom: 2px solid #dddddd;
content: '';
}
#cssmenu #menu-button:before {
position: absolute;
top: 16px;
right: 17px;
display: block;
height: 2px;
width: 20px;
background: #dddddd;
content: '';
}
#cssmenu #menu-button.menu-opened:after {
top: 23px;
border: 0;
height: 2px;
width: 15px;
background: #ffffff;
-webkit-transform: rotate(45deg);
-moz-transform: rotate(45deg);
-ms-transform: rotate(45deg);
-o-transform: rotate(45deg);
transform: rotate(45deg);
}
#cssmenu #menu-button.menu-opened:before {
top: 23px;
background: #ffffff;
width: 15px;
-webkit-transform: rotate(-45deg);
-moz-transform: rotate(-45deg);
-ms-transform: rotate(-45deg);
-o-transform: rotate(-45deg);
transform: rotate(-45deg);
}
#cssmenu .submenu-button {
position: absolute;
z-index: 99;
right: 0;
top: 0;
display: block;
border-left: 1px solid rgba(120, 120, 120, 0.2);
height: 46px;
width: 46px;
cursor: pointer;
}
#cssmenu .submenu-button.submenu-opened {
background: #262626;
}
#cssmenu ul ul .submenu-button {
height: 34px;
width: 34px;
}
#cssmenu .submenu-button:after {
position: absolute;
top: 22px;
right: 19px;
width: 8px;
height: 2px;
display: block;
background: #dddddd;
content: '';
}
#cssmenu ul ul .submenu-button:after {
top: 15px;
right: 13px;
}
#cssmenu .submenu-button.submenu-opened:after {
background: #ffffff;
}
#cssmenu .submenu-button:before {
position: absolute;
top: 19px;
right: 22px;
display: block;
width: 2px;
height: 8px;
background: #dddddd;
content: '';
}
#cssmenu ul ul .submenu-button:before {
top: 12px;
right: 16px;
}
#cssmenu .submenu-button.submenu-opened:before {
display: none;
}
}
<!doctype html>
<html lang=''>
<head>
<meta charset='utf-8'>
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="styles.css">
<script src="http://code.jquery.com/jquery-latest.min.js" type="text/javascript"></script>
<script src="script.js"></script>
<title>CSS MenuMaker</title>
</head>
<body>
<div id='cssmenu'>
<ul>
<li><a href='#'>Home</a></li>
<li class='active'><a href='#'>Products</a>
<ul>
<li><a href='#'>Product 1</a>
<ul>
<li><a href='#'>Sub Product</a></li>
<li><a href='#'>Sub Product</a></li>
</ul>
</li>
<li><a href='#'>Product 2</a>
<ul>
<li><a href='#'>Sub Product</a></li>
<li><a href='#'>Sub Product</a></li>
</ul>
</li>
</ul>
</li>
<li><a href='#'>About</a></li>
<li><a href='#'>Contact</a></li>
</ul>
</div>
</body>
<html>
I would also like those sub-items centered.
PS: My menu will have only one sublevel. EG: Products > Product 1.

I have removed the sub-menu items of individual products in the HTML since there will only be 1 sub-level.
Relevant JS:
multiTg = function () {
cssmenu.find(".has-sub")
.prepend('<span class="submenu-button"></span>')
.on("click", function () {
submenuButton = $(this).find("span:first");
submenuButton.toggleClass('submenu-opened');
if (submenuButton.siblings('ul').hasClass('open')) {
submenuButton.siblings('ul').removeClass('open').hide();
} else {
submenuButton.siblings('ul').addClass('open').show();
}
});
/*
cssmenu.find('.submenu-button').on('click', function () {
$(this).toggleClass('submenu-opened');
if ($(this).siblings('ul').hasClass('open')) {
$(this).siblings('ul').removeClass('open').hide();
} else {
$(this).siblings('ul').addClass('open').show();
}
});
*/
};
To center the submenu items
#cssmenu > ul > li.has-sub > ul > li > a {
text-align: center;
}
(function($) {
$.fn.menumaker = function(options) {
var cssmenu = $(this), settings = $.extend({
title: "Menu",
format: "dropdown",
sticky: false
}, options);
return this.each(function() {
cssmenu.prepend('<div id="menu-button">' + settings.title + '</div>');
$(this).find("#menu-button").on('click', function(){
$(this).toggleClass('menu-opened');
var mainmenu = $(this).next('ul');
if (mainmenu.hasClass('open')) {
mainmenu.hide().removeClass('open');
}
else {
mainmenu.show().addClass('open');
if (settings.format === "dropdown") {
mainmenu.find('ul').show();
}
}
});
cssmenu.find('li ul').parent().addClass('has-sub');
multiTg = function() {
cssmenu.find(".has-sub").prepend('<span class="submenu-button"></span>')
.on("click", function () {
var submenuButton = $(this).find("span:first");
submenuButton.toggleClass('submenu-opened');
if (submenuButton.siblings('ul').hasClass('open')) {
submenuButton.siblings('ul').removeClass('open').hide();
} else {
submenuButton.siblings('ul').addClass('open').show();
};
});
/*
cssmenu.find('.submenu-button').on('click', function() {
$(this).toggleClass('submenu-opened');
if ($(this).siblings('ul').hasClass('open')) {
$(this).siblings('ul').removeClass('open').hide();
}
else {
$(this).siblings('ul').addClass('open').show();
}
});
*/
};
if (settings.format === 'multitoggle') multiTg();
else cssmenu.addClass('dropdown');
if (settings.sticky === true) cssmenu.css('position', 'fixed');
resizeFix = function() {
if ($( window ).width() > 768) {
cssmenu.find('ul').show();
}
if ($(window).width() <= 768) {
cssmenu.find('ul').hide().removeClass('open');
}
};
resizeFix();
return $(window).on('resize', resizeFix);
});
};
})(jQuery);
(function($){
$(document).ready(function(){
$("#cssmenu").menumaker({
title: "Menu",
format: "multitoggle"
});
});
})(jQuery);
#import url(http://fonts.googleapis.com/css?family=Montserrat:400,700);
#cssmenu,
#cssmenu ul,
#cssmenu ul li,
#cssmenu ul li a,
#cssmenu #menu-button {
margin: 0;
padding: 0;
border: 0;
list-style: none;
line-height: 1;
display: block;
position: relative;
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
}
#cssmenu:after,
#cssmenu > ul:after {
content: ".";
display: block;
clear: both;
visibility: hidden;
line-height: 0;
height: 0;
}
#cssmenu #menu-button {
display: none;
}
#cssmenu {
font-family: Montserrat, sans-serif;
background: #333333;
}
#cssmenu > ul > li {
float: left;
}
#cssmenu.align-center > ul {
font-size: 0;
text-align: center;
}
#cssmenu.align-center > ul > li {
display: inline-block;
float: none;
}
#cssmenu.align-center ul ul {
text-align: left;
}
#cssmenu.align-right > ul > li {
float: right;
}
#cssmenu > ul > li > a {
padding: 17px;
font-size: 12px;
letter-spacing: 1px;
text-decoration: none;
color: #dddddd;
font-weight: 700;
text-transform: uppercase;
}
#cssmenu > ul > li:hover > a {
color: #ffffff;
}
#cssmenu > ul > li.has-sub > a {
padding-right: 30px;
}
#cssmenu > ul > li.has-sub > a:after {
position: absolute;
top: 22px;
right: 11px;
width: 8px;
height: 2px;
display: block;
background: #dddddd;
content: '';
}
#cssmenu > ul > li.has-sub > a:before {
position: absolute;
top: 19px;
right: 14px;
display: block;
width: 2px;
height: 8px;
background: #dddddd;
content: '';
-webkit-transition: all .25s ease;
-moz-transition: all .25s ease;
-ms-transition: all .25s ease;
-o-transition: all .25s ease;
transition: all .25s ease;
}
#cssmenu > ul > li.has-sub:hover > a:before {
top: 23px;
height: 0;
}
#cssmenu > ul > li.has-sub > ul > li > a {
text-align: center;
}
#cssmenu ul ul {
position: absolute;
left: -9999px;
}
#cssmenu.align-right ul ul {
text-align: right;
}
#cssmenu ul ul li {
height: 0;
-webkit-transition: all .25s ease;
-moz-transition: all .25s ease;
-ms-transition: all .25s ease;
-o-transition: all .25s ease;
transition: all .25s ease;
}
#cssmenu li:hover > ul {
left: auto;
}
#cssmenu.align-right li:hover > ul {
left: auto;
right: 0;
}
#cssmenu li:hover > ul > li {
height: 35px;
}
#cssmenu ul ul ul {
margin-left: 100%;
top: 0;
}
#cssmenu.align-right ul ul ul {
margin-left: 0;
margin-right: 100%;
}
#cssmenu ul ul li a {
border-bottom: 1px solid rgba(150, 150, 150, 0.15);
padding: 11px 15px;
width: 170px;
font-size: 12px;
text-decoration: none;
color: #dddddd;
font-weight: 400;
background: #333333;
}
#cssmenu ul ul li:last-child > a,
#cssmenu ul ul li.last-item > a {
border-bottom: 0;
}
#cssmenu ul ul li:hover > a,
#cssmenu ul ul li a:hover {
color: #ffffff;
}
#cssmenu ul ul li.has-sub > a:after {
position: absolute;
top: 16px;
right: 11px;
width: 8px;
height: 2px;
display: block;
background: #dddddd;
content: '';
}
#cssmenu.align-right ul ul li.has-sub > a:after {
right: auto;
left: 11px;
}
#cssmenu ul ul li.has-sub > a:before {
position: absolute;
top: 13px;
right: 14px;
display: block;
width: 2px;
height: 8px;
background: #dddddd;
content: '';
-webkit-transition: all .25s ease;
-moz-transition: all .25s ease;
-ms-transition: all .25s ease;
-o-transition: all .25s ease;
transition: all .25s ease;
}
#cssmenu.align-right ul ul li.has-sub > a:before {
right: auto;
left: 14px;
}
#cssmenu ul ul > li.has-sub:hover > a:before {
top: 17px;
height: 0;
}
#media all and (max-width: 768px), only screen and (-webkit-min-device-pixel-ratio: 2) and (max-width: 1024px), only screen and (min--moz-device-pixel-ratio: 2) and (max-width: 1024px), only screen and (-o-min-device-pixel-ratio: 2/1) and (max-width: 1024px), only screen and (min-device-pixel-ratio: 2) and (max-width: 1024px), only screen and (min-resolution: 192dpi) and (max-width: 1024px), only screen and (min-resolution: 2dppx) and (max-width: 1024px) {
#cssmenu {
width: 100%;
}
#cssmenu ul {
width: 100%;
display: none;
}
#cssmenu.align-center > ul {
text-align: left;
}
#cssmenu ul li {
width: 100%;
border-top: 1px solid rgba(120, 120, 120, 0.2);
}
#cssmenu ul ul li,
#cssmenu li:hover > ul > li {
height: auto;
}
#cssmenu ul li a,
#cssmenu ul ul li a {
width: 100%;
border-bottom: 0;
}
#cssmenu > ul > li {
float: none;
}
#cssmenu ul ul li a {
padding-left: 25px;
}
#cssmenu ul ul ul li a {
padding-left: 35px;
}
#cssmenu ul ul li a {
color: #dddddd;
background: none;
}
#cssmenu ul ul li:hover > a,
#cssmenu ul ul li.active > a {
color: #ffffff;
}
#cssmenu ul ul,
#cssmenu ul ul ul,
#cssmenu.align-right ul ul {
position: relative;
left: 0;
width: 100%;
margin: 0;
text-align: left;
}
#cssmenu > ul > li.has-sub > a:after,
#cssmenu > ul > li.has-sub > a:before,
#cssmenu ul ul > li.has-sub > a:after,
#cssmenu ul ul > li.has-sub > a:before {
display: none;
}
#cssmenu #menu-button {
display: block;
padding: 17px;
color: #dddddd;
cursor: pointer;
font-size: 12px;
text-transform: uppercase;
font-weight: 700;
}
#cssmenu #menu-button:after {
position: absolute;
top: 22px;
right: 17px;
display: block;
height: 4px;
width: 20px;
border-top: 2px solid #dddddd;
border-bottom: 2px solid #dddddd;
content: '';
}
#cssmenu #menu-button:before {
position: absolute;
top: 16px;
right: 17px;
display: block;
height: 2px;
width: 20px;
background: #dddddd;
content: '';
}
#cssmenu #menu-button.menu-opened:after {
top: 23px;
border: 0;
height: 2px;
width: 15px;
background: #ffffff;
-webkit-transform: rotate(45deg);
-moz-transform: rotate(45deg);
-ms-transform: rotate(45deg);
-o-transform: rotate(45deg);
transform: rotate(45deg);
}
#cssmenu #menu-button.menu-opened:before {
top: 23px;
background: #ffffff;
width: 15px;
-webkit-transform: rotate(-45deg);
-moz-transform: rotate(-45deg);
-ms-transform: rotate(-45deg);
-o-transform: rotate(-45deg);
transform: rotate(-45deg);
}
#cssmenu .submenu-button {
position: absolute;
z-index: 99;
right: 0;
top: 0;
display: block;
border-left: 1px solid rgba(120, 120, 120, 0.2);
height: 46px;
width: 46px;
cursor: pointer;
}
#cssmenu .submenu-button.submenu-opened {
background: #262626;
}
#cssmenu ul ul .submenu-button {
height: 34px;
width: 34px;
}
#cssmenu .submenu-button:after {
position: absolute;
top: 22px;
right: 19px;
width: 8px;
height: 2px;
display: block;
background: #dddddd;
content: '';
}
#cssmenu ul ul .submenu-button:after {
top: 15px;
right: 13px;
}
#cssmenu .submenu-button.submenu-opened:after {
background: #ffffff;
}
#cssmenu .submenu-button:before {
position: absolute;
top: 19px;
right: 22px;
display: block;
width: 2px;
height: 8px;
background: #dddddd;
content: '';
}
#cssmenu ul ul .submenu-button:before {
top: 12px;
right: 16px;
}
#cssmenu .submenu-button.submenu-opened:before {
display: none;
}
}
<!doctype html>
<html lang=''>
<head>
<meta charset='utf-8'>
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="styles.css">
<script src="http://code.jquery.com/jquery-latest.min.js" type="text/javascript"></script>
<script src="script.js"></script>
<title>CSS MenuMaker</title>
</head>
<body>
<div id='cssmenu'>
<ul>
<li><a href='#'>Home</a></li>
<li class='active'><a href='#'>Products</a>
<ul>
<li><a href='#'>Product 1</a>
</li>
<li><a href='#'>Product 2</a>
</li>
</ul>
</li>
<li><a href='#'>About</a></li>
<li><a href='#'>Contact</a></li>
</ul>
</div>
</body>
<html>

This works with both li (Product) and + symbol and the sub-level menu.
Add this function call:
e.stopPropagation();
Here is the complete JavaScript code to make it work:
(function($) {
$.fn.menumaker = function(options) {
var cssmenu = $(this), settings = $.extend({
title: "Menu",
format: "dropdown",
sticky: false
}, options);
return this.each(function() {
cssmenu.prepend('<div id="menu-button">' + settings.title + '</div>');
$(this).find("#menu-button").on('click', function() {
$(this).toggleClass('menu-opened');
var mainmenu = $(this).next('ul');
if (mainmenu.hasClass('open')) {
mainmenu.slideToggle().removeClass('open');
}
else {
mainmenu.show().addClass('open');
if (settings.format === "dropdown") {
mainmenu.find('ul').show();
}
}
});
cssmenu.find('li ul').parent().addClass('has-sub');
multiTg = function() {
cssmenu.find(".has-sub").prepend('<span class="submenu-button"></span>')
.on("click", function (e) {
e.stopPropagation();
var submenuButton = $(this).find("span:first");
submenuButton.toggleClass('submenu-opened');
if (submenuButton.siblings('ul').hasClass('open')) {
submenuButton.siblings('ul').removeClass('open').hide();
} else {
submenuButton.siblings('ul').addClass('open').show();
};
});
};
if (settings.format === 'multitoggle') multiTg();
else cssmenu.addClass('dropdown');
if (settings.sticky === true) cssmenu.css('position', 'fixed');
resizeFix = function() {
if ($( window ).width() > 768) {
cssmenu.find('ul').show();
}
if ($(window).width() <= 768) {
cssmenu.find('ul').hide().removeClass('open');
}
};
resizeFix();
return $(window).on('resize', resizeFix);
});
};
})(jQuery);
(function($){
$(document).ready(function(){
$("#cssmenu").menumaker({
title: "Sufi",
format: "multitoggle"
});
});
})(jQuery);

Navigation Menu Width Size, Fixed Menu on Top

I'm new on CSS and I'm following a tutorial on making a responsive menu for my site. I was able to make it work except for a few things: the navigation menu shrinks both on desktop and mobile view. Everything is working except for the size. Also, the navigation menu won't stay on the top page whenever I edit the display, position, and z-line elements. Below are the codes for the CSS. Thank you for your help!
HTML
<div class="container-fluid">
<div class="row">
<div class="col-md-8 col-md-offset-2 col-sm-8 col-sm-offset-2 col-xs-8 col-xs-offset-2">
<div id='cssmenu'>
<ul>
<li><a href='#intro'>Home</a></li>
<li><a href='#features'>About Us</a></li>
<li class='active'><a href='#portfolio'>Products and Services</a>
<ul>
<li><a href='#portfolio'>Product 1 Support</a></li>
<li><a href='#portfolio'>Product 2</a></li>
<li><a href='#portfolio'>Product 3</a></li>
<li><a href='#portfolio'>Product 4</a></li>
<li><a href='#portfolio'>Product 5</a></li>
<li><a href='#portfolio'>Product 6</a></li>
</ul>
</li>
<li><a href='#team'>Team</a></li>
<li><a href='#responsive'>Testimonials</a></li>
<li><a href='#contact'>Get In Touch</a></li>
</ul>
</div>
</div>
</div>
</div>
CSS
#cssmenu,
#cssmenu ul,
#cssmenu ul li,
#cssmenu ul li a,
#cssmenu #menu-button {
margin: 0;
padding: 0;
border: 0;
list-style: none;
line-height: 1;
display: block;
position: relative;
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
}
#cssmenu:after,
#cssmenu > ul:after {
content: ".";
display: block;
clear: both;
visibility: hidden;
line-height: 0;
height: 0;
}
#cssmenu #menu-button {
display: none;
}
#cssmenu {
font-family: Varela Round, sans-serif;
background: #333333;
}
#cssmenu > ul > li {
float: left;
}
#cssmenu.align-center > ul {
font-size: 0;
text-align: center;
}
#cssmenu.align-center > ul > li {
display: inline-block;
float: none;
}
#cssmenu.align-center ul ul {
text-align: left;
}
#cssmenu.align-right > ul > li {
float: right;
}
#cssmenu > ul > li > a {
padding: 17px;
font-size: 12px;
letter-spacing: 1px;
text-decoration: none;
color: #dddddd;
font-weight: 700;
text-transform: uppercase;
}
#cssmenu > ul > li:hover > a {
color: #ffffff;
}
#cssmenu > ul > li.has-sub > a {
padding-right: 30px;
}
#cssmenu > ul > li.has-sub > a:after {
position: absolute;
top: 22px;
right: 11px;
width: 8px;
height: 2px;
display: block;
background: #dddddd;
content: '';
}
#cssmenu > ul > li.has-sub > a:before {
position: absolute;
top: 19px;
right: 14px;
display: block;
width: 2px;
height: 8px;
background: #dddddd;
content: '';
-webkit-transition: all .25s ease;
-moz-transition: all .25s ease;
-ms-transition: all .25s ease;
-o-transition: all .25s ease;
transition: all .25s ease;
}
#cssmenu > ul > li.has-sub:hover > a:before {
top: 23px;
height: 0;
}
#cssmenu ul ul {
position: absolute;
left: -9999px;
}
#cssmenu.align-right ul ul {
text-align: right;
}
#cssmenu ul ul li {
height: 0;
-webkit-transition: all .25s ease;
-moz-transition: all .25s ease;
-ms-transition: all .25s ease;
-o-transition: all .25s ease;
transition: all .25s ease;
}
#cssmenu li:hover > ul {
left: auto;
}
#cssmenu.align-right li:hover > ul {
left: auto;
right: 0;
}
#cssmenu li:hover > ul > li {
height: 35px;
}
#cssmenu ul ul ul {
margin-left: 100%;
top: 0;
}
#cssmenu.align-right ul ul ul {
margin-left: 0;
margin-right: 100%;
}
#cssmenu ul ul li a {
border-bottom: 1px solid rgba(150, 150, 150, 0.15);
padding: 11px 15px;
width: 170px;
font-size: 12px;
text-decoration: none;
color: #dddddd;
font-weight: 400;
background: #333333;
}
#cssmenu ul ul li:last-child > a,
#cssmenu ul ul li.last-item > a {
border-bottom: 0;
}
#cssmenu ul ul li:hover > a,
#cssmenu ul ul li a:hover {
color: #ffffff;
}
#cssmenu ul ul li.has-sub > a:after {
position: absolute;
top: 16px;
right: 11px;
width: 8px;
height: 2px;
display: block;
background: #dddddd;
content: '';
}
#cssmenu.align-right ul ul li.has-sub > a:after {
right: auto;
left: 11px;
}
#cssmenu ul ul li.has-sub > a:before {
position: absolute;
top: 13px;
right: 14px;
display: block;
width: 2px;
height: 8px;
background: #dddddd;
content: '';
-webkit-transition: all .25s ease;
-moz-transition: all .25s ease;
-ms-transition: all .25s ease;
-o-transition: all .25s ease;
transition: all .25s ease;
}
#cssmenu.align-right ul ul li.has-sub > a:before {
right: auto;
left: 14px;
}
#cssmenu ul ul > li.has-sub:hover > a:before {
top: 17px;
height: 0;
}
#media all and (max-width: 768px), only screen and (-webkit-min-device-pixel-ratio: 2) and (max-width: 1024px), only screen and (min--moz-device-pixel-ratio: 2) and (max-width: 1024px), only screen and (-o-min-device-pixel-ratio: 2/1) and (max-width: 1024px), only screen and (min-device-pixel-ratio: 2) and (max-width: 1024px), only screen and (min-resolution: 192dpi) and (max-width: 1024px), only screen and (min-resolution: 2dppx) and (max-width: 1024px) {
#cssmenu {
width: 100%;
}
#cssmenu ul {
width: 100%;
display: none;
}
#cssmenu.align-center > ul {
text-align: left;
}
#cssmenu ul li {
width: 100%;
border-top: 1px solid rgba(120, 120, 120, 0.2);
}
#cssmenu ul ul li,
#cssmenu li:hover > ul > li {
height: auto;
}
#cssmenu ul li a,
#cssmenu ul ul li a {
width: 100%;
border-bottom: 0;
}
#cssmenu > ul > li {
float: none;
}
#cssmenu ul ul li a {
padding-left: 25px;
}
#cssmenu ul ul ul li a {
padding-left: 35px;
}
#cssmenu ul ul li a {
color: #dddddd;
background: none;
}
#cssmenu ul ul li:hover > a,
#cssmenu ul ul li.active > a {
color: #ffffff;
}
#cssmenu ul ul,
#cssmenu ul ul ul,
#cssmenu.align-right ul ul {
position: relative;
left: 0;
width: 100%;
margin: 0;
text-align: left;
}
#cssmenu > ul > li.has-sub > a:after,
#cssmenu > ul > li.has-sub > a:before,
#cssmenu ul ul > li.has-sub > a:after,
#cssmenu ul ul > li.has-sub > a:before {
display: none;
}
#cssmenu #menu-button {
display: block;
padding: 17px;
color: #dddddd;
cursor: pointer;
font-size: 12px;
text-transform: uppercase;
font-weight: 700;
}
#cssmenu #menu-button:after {
position: absolute;
top: 22px;
right: 17px;
display: block;
height: 4px;
width: 20px;
border-top: 2px solid #dddddd;
border-bottom: 2px solid #dddddd;
content: '';
}
#cssmenu #menu-button:before {
position: absolute;
top: 16px;
right: 17px;
display: block;
height: 2px;
width: 20px;
background: #dddddd;
content: '';
}
#cssmenu #menu-button.menu-opened:after {
top: 23px;
border: 0;
height: 2px;
width: 15px;
background: #ffffff;
-webkit-transform: rotate(45deg);
-moz-transform: rotate(45deg);
-ms-transform: rotate(45deg);
-o-transform: rotate(45deg);
transform: rotate(45deg);
}
#cssmenu #menu-button.menu-opened:before {
top: 23px;
background: #ffffff;
width: 15px;
-webkit-transform: rotate(-45deg);
-moz-transform: rotate(-45deg);
-ms-transform: rotate(-45deg);
-o-transform: rotate(-45deg);
transform: rotate(-45deg);
}
#cssmenu .submenu-button {
position: absolute;
z-index: 99;
right: 0;
top: 0;
display: block;
border-left: 1px solid rgba(120, 120, 120, 0.2);
height: 46px;
width: 46px;
cursor: pointer;
}
#cssmenu .submenu-button.submenu-opened {
background: #262626;
}
#cssmenu ul ul .submenu-button {
height: 34px;
width: 34px;
}
#cssmenu .submenu-button:after {
position: absolute;
top: 22px;
right: 19px;
width: 8px;
height: 2px;
display: block;
background: #dddddd;
content: '';
}
#cssmenu ul ul .submenu-button:after {
top: 15px;
right: 13px;
}
#cssmenu .submenu-button.submenu-opened:after {
background: #ffffff;
}
#cssmenu .submenu-button:before {
position: absolute;
top: 19px;
right: 22px;
display: block;
width: 2px;
height: 8px;
background: #dddddd;
content: '';
}
#cssmenu ul ul .submenu-button:before {
top: 12px;
right: 16px;
}
#cssmenu .submenu-button.submenu-opened:before {
display: none;
}
}

Use position fixed for sticky navigation
#cssmenu{ position:fixed; top:0; left:0; right:0; width:100%; }

Navbar's fixed position is not working

I've been searching for hours and simply cannot find an answer on why my navbar will not stay at the top with position fixed
here is my code: http://pastebin.com/eZnBuAEe
I am using animate.css and wow.js
<script src="js/wow.min.js"></script>
<script>
new WOW().init();
</script>
<script>
$(function() {
$('a[href*=#]:not([href=#])').click(function() {
if (location.pathname.replace(/^\//,'') == this.pathname.replace(/^\//,'') && location.hostname == this.hostname) {
var target = $(this.hash);
target = target.length ? target : $('[name=' + this.hash.slice(1) +']');
if (target.length) {
$('html,body').animate({
scrollTop: target.offset().top
}, 1000);
return false;
}
}
});
});
</script>
<script>
( function( $ ) {
$( document ).ready(function() {
$('#cssmenu').prepend('<div id="menu-button">Menu</div>');
$('#cssmenu #menu-button').on('click', function(){
var menu = $(this).next('ul');
if (menu.hasClass('open')) {
menu.removeClass('open');
}
else {
menu.addClass('open');
}
});
});
} )( jQuery );
</script>
#navBar {
width: 100%;
position: fixed;
}
#nav {
box-shadow: 0px 0px 40px 5px black;
z-index: 3;
position: fixed;
width: 100%;
}
#cssmenu {
position: fixed;
margin-top: 0;
height: 60px;
background: #203F4F;
margin-left: 0;
margin-right: 0;
margin-bottom: 0;
width: 100%;
padding: 0;
line-height: 1;
display: block;
position: relative;
font-family: 'PT Sans', sans-serif;
}
#cssmenu #main {
width: 100%;
position: fixed;
margin-right: 0;
margin-left: 10%;
margin-top: 0px;
margin-bottom: 0px;
}
#cssmenu ul {
list-style: none;
margin: 0;
padding: 0;
display: block;
}
#cssmenu ul:after,
#cssmenu:after {
content: " ";
display: block;
font-size: 0;
height: 0;
clear: both;
visibility: hidden;
}
#cssmenu ul li {
margin-top: 0;
padding: 0;
display: block;
position: relative;
}
#cssmenu ul li a {
text-decoration: none;
display: block;
margin-top: 0px;
-webkit-transition: color .2s ease;
-moz-transition: color .2s ease;
-ms-transition: color .2s ease;
-o-transition: color .2s ease;
transition: color .2s ease;
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
}
#cssmenu ul li ul {
position: absolute;
left: -9999px;
top: auto;
}
#cssmenu ul li ul li {
max-height: 0;
position: absolute;
-webkit-transition: max-height 0.4s ease-out;
-moz-transition: max-height 0.4s ease-out;
-ms-transition: max-height 0.4s ease-out;
-o-transition: max-height 0.4s ease-out;
transition: max-height 0.4s ease-out;
background: #ffffff;
}
#cssmenu ul li ul li.has-sub:after {
display: block;
position: absolute;
content: "";
height: 10px;
width: 10px;
border-radius: 5px;
background: #000000;
z-index: 1;
top: 13px;
right: 15px;
}
#cssmenu.align-right ul li ul li.has-sub:after {
right: auto;
left: 15px;
}
#cssmenu ul li ul li.has-sub:before {
display: block;
position: absolute;
content: "";
height: 0;
width: 0;
border: 3px solid transparent;
border-left-color: #ffffff;
z-index: 2;
top: 15px;
right: 15px;
}
#cssmenu.align-right ul li ul li.has-sub:before {
right: auto;
left: 15px;
border-left-color: transparent;
border-right-color: #ffffff;
}
#cssmenu #media{
margin-right: 15%;
font: 40px;
float: right;
}
#cssmenu ul li ul li a {
font-size: 14px;
font-weight: 400;
text-transform: none;
color: #000000;
letter-spacing: 0;
display: block;
width: 170px;
padding: 11px 10px 11px 20px;
}
#cssmenu ul li ul li:hover > a,
#cssmenu ul li ul li.active > a {
color: #203F4F;
}
#cssmenu ul li ul li:hover:after,
#cssmenu ul li ul li.active:after {
background: #203F4F;
}
#cssmenu ul li ul li:hover > ul {
left: 100%;
top: 0;
}
#cssmenu ul li ul li:hover > ul > li {
max-height: 72px;
position: relative;
}
#cssmenu > ul > li {
float: left;
}
#cssmenu.align-center > ul > li {
float: none;
display: inline-block;
}
#cssmenu.align-center > ul {
text-align: center;
}
#cssmenu.align-center ul ul {
text-align: left;
}
#cssmenu.align-right > ul {
float: right;
}
#cssmenu.align-right > ul > li:hover > ul {
left: auto;
right: 0;
}
#cssmenu.align-right ul ul li:hover > ul {
right: 100%;
left: auto;
}
#cssmenu.align-right ul ul li a {
text-align: right;
}
#cssmenu > ul > li:after {
content: "";
display: block;
position: absolute;
width: 100%;
height: 0;
top: 0;
z-index: 0;
background: #ffffff;
-webkit-transition: height .2s;
-moz-transition: height .2s;
-ms-transition: height .2s;
-o-transition: height .2s;
transition: height .2s;
}
#cssmenu > ul > li.has-sub > a {
padding-right: 40px;
}
#cssmenu > ul > li.has-sub > a:after {
display: block;
content: "";
background: #ffffff;
height: 12px;
width: 12px;
position: absolute;
border-radius: 13px;
right: 14px;
top: 16px;
}
#cssmenu > ul > li.has-sub > a:before {
display: block;
content: "";
border: 4px solid transparent;
border-top-color: #203F4F;
z-index: 2;
height: 0;
width: 0;
position: absolute;
right: 16px;
top: 21px;
}
#cssmenu > ul > li > a {
color: #ffffff;
padding: 15px 20px;
font-weight: 700;
letter-spacing: 1px;
text-transform: uppercase;
font-size: 14px;
z-index: 2;
position: relative;
}
#cssmenu > ul > li:hover:after,
#cssmenu > ul > li.active:after {
height: 100%;
}
#cssmenu > ul > li:hover > a,
#cssmenu > ul > li.active > a {
color: #000000;
}
#cssmenu > ul > li:hover > a:after,
#cssmenu > ul > li.active > a:after {
background: #000000;
}
#cssmenu > ul > li:hover > a:before,
#cssmenu > ul > li.active > a:before {
border-top-color: #ffffff;
}
#cssmenu > ul > li:hover > ul {
left: 0;
}
#cssmenu > ul > li:hover > ul > li {
max-height: 72px;
position: relative;
}
#cssmenu #menu-button {
display: none;
}
#cssmenu > ul > li > a {
display: block;
}
#cssmenu > ul > li {
width: auto;
}
#cssmenu > ul > li > ul {
width: 170px;
display: block;
}
#cssmenu > ul > li > ul > li {
width: 170px;
display: block;
}
#media all and (max-width: 800px), only screen and (-webkit-min-device-pixel-ratio: 2) and (max-width: 1024px), only screen and (min--moz-device-pixel-ratio: 2) and (max-width: 1024px), only screen and (-o-min-device-pixel-ratio: 2/1) and (max-width: 1024px), only screen and (min-device-pixel-ratio: 2) and (max-width: 1024px), only screen and (min-resolution: 192dpi) and (max-width: 1024px), only screen and (min-resolution: 2dppx) and (max-width: 1024px) {
#cssmenu > ul {
max-height: 0;
overflow: hidden;
-webkit-transition: max-height 0.35s ease-out;
-moz-transition: max-height 0.35s ease-out;
-ms-transition: max-height 0.35s ease-out;
-o-transition: max-height 0.35s ease-out;
transition: max-height 0.35s ease-out;
}
#cssmenu > ul > li > ul {
width: 100%;
display: block;
}
#cssmenu.align-right ul li a {
text-align: left;
}
#cssmenu > ul > li > ul > li {
width: 100%;
display: block;
}
#cssmenu.align-right ul ul li a {
text-align: left;
}
#cssmenu > ul > li > ul > li > a {
width: 100%;
display: block;
}
#cssmenu ul li ul li a {
width: 100%;
}
#cssmenu.align-center > ul {
text-align: left;
}
#cssmenu.align-center > ul > li {
display: block;
}
#cssmenu > ul.open {
max-height: 1000px;
border-top: 1px solid rgba(110, 110, 110, 0.25);
}
#cssmenu ul {
width: 100%;
}
#cssmenu ul > li {
float: none;
width: 100%;
}
#cssmenu ul li a {
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
width: 100%;
padding: 12px 20px;
}
#cssmenu ul > li:after {
display: none;
}
#cssmenu ul li.has-sub > a:after,
#cssmenu ul li.has-sub > a:before,
#cssmenu ul li ul li.has-sub:after,
#cssmenu ul li ul li.has-sub:before {
display: none;
}
#cssmenu ul li ul,
#cssmenu ul li ul li ul,
#cssmenu ul li ul li:hover > ul,
#cssmenu.align-right ul li ul,
#cssmenu.align-right ul li ul li ul,
#cssmenu.align-right ul li ul li:hover > ul {
left: 0;
position: relative;
right: auto;
}
#cssmenu ul li ul li,
#cssmenu ul li:hover > ul > li {
max-height: 999px;
position: relative;
background: none;
}
#cssmenu ul li ul li a {
padding: 8px 20px 8px 35px;
color: #ffffff;
}
#cssmenu ul li ul ul li a {
padding: 8px 20px 8px 50px;
}
#cssmenu ul li ul li:hover > a {
color: #000000;
}
#cssmenu #menu-button {
display: block;
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
width: 100%;
padding: 15px 20px;
text-transform: uppercase;
font-weight: 700;
font-size: 14px;
letter-spacing: 1px;
color: #ffffff;
cursor: pointer;
}
#cssmenu #menu-button:after {
display: block;
content: '';
position: absolute;
height: 3px;
width: 22px;
border-top: 2px solid #ffffff;
border-bottom: 2px solid #ffffff;
right: 20px;
top: 16px;
}
#cssmenu #menu-button:before {
display: block;
content: '';
position: absolute;
height: 3px;
width: 22px;
border-top: 2px solid #ffffff;
right: 20px;
top: 26px;
}
}
<div id='navBar'><nav id='nav' class='wow fadeInDown animated' data-wow-delay="1s">
<div id='cssmenu'>
<ul id="media">
<li><a href='#'><span>Mystery Crocs</span></a></li>
</ul>
<ul id="main">
<li class='active has-sub'><a href='#'><span>Products</span></a>
<ul>
<li class='has-sub'><a href='#'><span>The Classics</span></a>
<ul>
<li><a href='#menFull'><span>Mens</span></a></li>
<li><a href='#womenFull'><span>Womens</span></a></li>
<li><a href='#girlsFull'><span>Girls</span></a></li>
<li class='last'><a href='#boysFull'><span>Boys</span></a></li>
</ul>
</li>
<li class='has-sub'><a href='#'><span>Loafers</span></a>
<ul>
<li><a href='#'><span>Mens</span></a></li>
<li><a href='#'><span>Womens</span></a></li>
<li><a href='#'><span>Girls</span></a></li>
<li class='last'><a href='#'><span>Boys</span></a></li>
</ul>
</li>
<li class='has-sub'><a href='#'><span>Boots</span></a>
<ul>
<li><a href='#'><span>Mens</span></a></li>
<li><a href='#'><span>Womens</span></a></li>
<li><a href='#'><span>Girls</span></a></li>
<li class='last'><a href='#'><span>Boys</span></a></li>
</ul>
</li>
<li class='has-sub'><a href='#'><span>Sneakers</span></a> <ul>
<li><a href='#'><span>Mens</span></a></li>
<li><a href='#'><span>Womens</span></a></li>
<li><a href='#'><span>Girls</span></a></li>
<li class='last'><a href='#'><span>Boys</span></a></li>
</ul>
</li>
<li class='has-sub'><a href='#'><span>Flip Flops <br>and Sandals</span></a>
<ul>
<li><a href='#'><span>Mens</span></a></li>
<li><a href='#'><span>Womens</span></a></li>
<li><a href='#'><span>Girls</span></a></li>
<li class='last'><a href='#'><span>Boys</span></a></li>
</ul>
</li>
</ul>
</li>
<li><a href='#'><span>Jibbitz</span></a></li>
<li><a href='#'><span>About</span></a></li>
<li class='last'><a href='#'><span>Contact</span></a></li>
</ul>
</div>
</nav>
</div>

Well I've copied your code in this fiddle and it actually is fixed?
I didn't change anything - or did I get that wrong?
#navBar {
width: 100%;
position: fixed;
z-index: 100;
}
https://jsfiddle.net/3Lst3aqg/1/

Menu bar active class Smarty template

I want the menu bar to switch the active class depending on the page it is on instead of only showing home as active, still very new to this thanks =) ( my site has smarty template )
<div id='cssmenu'>
<ul>
<li class='active'><a href='http://www.example.com/tour/'><span>Home</span></a></li>
<li><a href='http://www.example.com/tour/category.php?id=4'><span>Photos</span></a></li>
<li><a href='http://www.example.com/tour/category.php?id=5'><span>Videos</span></a></li>
<li><a href='http://www.example.com/tour/category.php?id=59'><span>Webcam</span></a></li>
<li><a href='http://www.example.com/tour/category.php?id=58'><span>Archives</span></a></li>
<li><a href='http://www.example.com/tour/pages.php?id=donate'><span>Donate</span></a></li>
<li>JOIN NOW</span></li>
<li>Member Login <img src="/tour/images/locky.png"height="22px" width="22px"></span> </li>
This is my menu css, not entirely sure you guys might need this but here it is.
#cssmenu {
background: #FCB9C5;
width: auto;
text-align: center;
}
#cssmenu ul {
list-style: none;
margin: 0;
padding: 0;
line-height: 1;
display: block;
zoom: 1;
}
#cssmenu ul:after {
content: " ";
display: block;
font-size: 0;
height: 0;
clear: both;
visibility: hidden;
}
#cssmenu ul li {
display: inline-block;
padding: 0;
margin: 0;
}
#cssmenu.align-right ul li {
float: right;
}
#cssmenu.align-center ul {
text-align: center;
}
#cssmenu ul li a {
color: #000;
text-decoration: none;
display: block;
padding: 15px 25px;
font-family: 'Open Sans', sans-serif;
font-weight: 700;
text-transform: uppercase;
font-size: 16px;
position: relative;
-webkit-transition: color .25s;
-moz-transition: color .25s;
-ms-transition: color .25s;
-o-transition: color .25s;
transition: color .25s;
}
#cssmenu ul li a:hover {
color: #fff;
}
#cssmenu ul li a:hover:before {
width: 100%;
}
#cssmenu ul li a:after {
content: "";
display: block;
position: absolute;
right: -3px;
top: 19px;
height: 6px;
width: 6px;
background: #ffffff;
opacity: .5;
}
#cssmenu ul li a:before {
content: "";
display: block;
position: absolute;
left: 0;
bottom: 0;
height: 3px;
width: 0;
background: #333333;
-webkit-transition: width .25s;
-moz-transition: width .25s;
-ms-transition: width .25s;
-o-transition: width .25s;
transition: width .25s;
}
#cssmenu ul li.last > a:after,
#cssmenu ul li:last-child > a:after {
display: none;
}
#cssmenu ul li.active a {
color: #fff;
}
#cssmenu ul li.active a:before {
width: 100%;
}
#cssmenu.align-right li.last > a:after,
#cssmenu.align-right li:last-child > a:after {
display: block;
}
#cssmenu.align-right li:first-child a:after {
display: none;
}
#media screen and (max-width: 768px) {
#cssmenu ul li {
float: none;
display: block;
}
#cssmenu ul li a {
width: 100%;
-moz-box-sizing: border-box;
-webkit-box-sizing: border-box;
box-sizing: border-box;
border-bottom: 1px solid #fb998c;
}
#cssmenu ul li.last > a,
#cssmenu ul li:last-child > a {
border: 0;
}
#cssmenu ul li a:after {
display: none;
}
#cssmenu ul li a:before {
display: none;
}
}

What you need is to assign in Smarty selected page.
For example:
$smarty->assign('selected_page', 'tour/category.php?id=4');
In PHP you could use for this $_SERVER['REQUEST_URI'] variable, probably something like this:
$smarty->assign('selected_page', substr($_SERVER['REQUEST_URI'],1));
should work fine.
And then in Smarty:
<div id='cssmenu'>
<ul>
<li {if $selected_page eq 'tour/'}class='active'{/if}><a href='http://www.example.com/tour/'><span>Home</span></a></li>
<li {if $selected_page eq 'tour/category.php?id='}class='active'{/if}><a href='http://www.example.com/tour/category.php?id=4'><span>Photos</span></a></li>
<li {if $selected_page eq 'tour/category.php?id=5'}class='active'{/if}><a href='http://www.example.com/tour/category.php?id=5'><span>Videos</span></a></li>
<li {if $selected_page eq 'tour/category.php?id=59'}class='active'{/if}><a href='http://www.example.com/tour/category.php?id=59'><span>Webcam</span></a></li>
<li {if $selected_page eq 'tour/category.php?id=58'}class='active'{/if}><a href='http://www.example.com/tour/category.php?id=58'><span>Archives</span></a></li>
<li {if $selected_page eq 'tour/pages.php?id=donate'}class='active'{/if}><a href='http://www.example.com/tour/pages.php?id=donate'><span>Donate</span></a></li>
<li {if $selected_page eq 'tour/pages.php?id=join'}class='active'{/if}>JOIN NOW</span></li>
<li {if $selected_page eq 'members/'}class='active'{/if}>Member Login <img src="/tour/images/locky.png"height="22px" width="22px"></span> </li>
EDIT Of course it would be much better if you put those menu data into array in PHP using url and anchor text. Then in Smarty you could use loop to display menu and you wouldn't need to write urls twice when you compare $selected_page with link url

To apply the 'active' class to a different < li > element you should perform a server side changing.
Please take a look at the following page:
http://www.smarty.net/forums/viewtopic.php?p=60336