I have a java script code for a top navigation bar. The code only works if I am at the root (home) of the website. For example if you click on the plus icon on the top right corner you are taken to another page and then the menu stops working. I am not good at JS right now and I cannot figure out why. I have guessed this could be due to the fact some of the elements are not loaded when the url is different, but I cannot fix it. I am going to post the CSS and html code to see where SCRIPTS are placed. One fact about the Script that is inside the body of the html file is that I cannot move it to outside body since the menu stops working again. I I think the cause is the same thing, but I cannot fix it.
Please give me an edited code since in another question people gave me ideas, while I tried all of them and none worked. This is just to make sure that any answer is a working answer and it is not just a hunch. Thanks!
Here is a link for the deployed website you can use for your trial and error:
http://ejeddi.pythonanywhere.com/
js:
var cbpHorizontalMenu =(function() {
var b = $("#cbp-hrmenu > ul > li"),
g = b.children("a"),
c = $("body"),
d = -1;
function f() {
g.on('click', a);
b.on('click', function(h) {
h.stopPropagation()
})
}
function a(j) {
if (d !== -1) {
b.eq(d).removeClass("cbp-hropen")
}
var i = $(j.currentTarget).parent("li"),
h = i.index();
if (d === h) {
i.removeClass("cbp-hropen");
d = -1
} else {
i.addClass("cbp-hropen");
$("cbp-hropen");
d = h;
c.off('click').on('click', e)
}
return false
}
function e(h) {
b.eq(d).removeClass("cbp-hropen");
d = -1
}
return {
init: f
}
})();
Base html:
{% load staticfiles %}
<!DOCTYPE html>
<html lang="en" class="no-js">
<head>
{% block meta_tags %}{% endblock meta_tags%}
<title>
{% block title %}BPM App{% endblock title %}
</title>
{% block stylesheets %}
<link type="text/javascript" href="{% static 'bpmapp/js/topnavbar.js' %}">
<link rel="shortcut icon" type="image/png" href="{{STATIC_URL}}/favicon.ico"/>
{% endblock %}
{% block javascript %}
<script type='text/javascript' src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
<script>
$(function() {
cbpHorizontalMenu.init();
});
</script>
{% endblock javascript %}
{% block extra_head %}{% endblock %}
</head>
<body>
<header class="navbar topnavbar">
{% include 'bpmapp/_topnavbar.html' %}
</header>
<div id="main" role="main">
<div class="container">
{% block content %}
{% endblock content %}
</div>
</div> {# /#main #}
<script type='text/javascript' src="static/bpmapp/js/cbpHorizontalMenu.min.js"></script>
</body>
</html>
topnavbar html
{% load static %}
{% load staticfiles %}
<head>
<link rel="stylesheet" type="text/css" href="{% static 'bpmapp/css/topnav-default.css' %}">
<link rel="stylesheet" type="text/css" href="{% static 'bpmapp/css/topnav-component.css' %}">
<!-- used for icons in navbar -->
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
</head>
<div class="container">
<header class="clearfix">
<!--<span>Tagline</span>-->
<i class="fa fa-home fa-2x" id="icon-home"> </i>
<nav>
<i class="fa fa-plus fa-2x" id="icon-new-process" data-info="New Process"></i>
<!--
Previous Blueprint
back to the Codrops article
-->
</nav>
</header>
<div class="nav-main">
<nav id="cbp-hrmenu" class="cbp-hrmenu">
<ul>
<li>
Products
<div class="cbp-hrsub">
<div class="cbp-hrsub-inner">
<div>
<h4>Learning & Games</h4>
<ul>
<li>Catch the Bullet</li>
<li>Snoopydoo</li>
<li>Fallen Angel</li>
<li>Sui Maker</li>
<li>Wave Master</li>
<li>Golf Pro</li>
</ul>
</div>
<div>
<h4>Utilities</h4>
<ul>
<li>Gadget Finder</li>
<li>Green Tree Express</li>
<li>Green Tree Pro</li>
<li>Wobbler 3.0</li>
<li>Coolkid</li>
</ul>
</div>
<div>
<h4>Education</h4>
<ul>
<li>Learn Thai</li>
<li>Math Genius</li>
<li>Chemokid</li>
</ul>
<h4>Professionals</h4>
<ul>
<li>Success 1.0</li>
<li>Moneymaker</li>
</ul>
</div>
</div><!-- /cbp-hrsub-inner -->
</div><!-- /cbp-hrsub -->
</li>
<li>
Downloads
<div class="cbp-hrsub">
<div class="cbp-hrsub-inner">
<div>
<h4>Education & Learning</h4>
<ul>
<li>Learn Thai</li>
<li>Math Genius</li>
<li>Chemokid</li>
</ul>
<h4>Professionals</h4>
<ul>
<li>Success 1.0</li>
<li>Moneymaker</li>
</ul>
</div>
<div>
<h4>Entertainment</h4>
<ul>
<li>Gadget Finder</li>
<li>Green Tree Express</li>
<li>Green Tree Pro</li>
<li>Holy Cannoli</li>
<li>Wobbler 3.0</li>
<li>Coolkid</li>
</ul>
</div>
<div>
<h4>Games</h4>
<ul>
<li>Catch the Bullet</li>
<li>Snoopydoo</li>
<li>Fallen Angel</li>
<li>Sui Maker</li>
<li>Wave Master</li>
<li>Golf Pro</li>
</ul>
</div>
</div><!-- /cbp-hrsub-inner -->
</div><!-- /cbp-hrsub -->
</li>
<li>
Applications
<div class="cbp-hrsub">
<div class="cbp-hrsub-inner">
<div>
<h4>Learning & Games</h4>
<ul>
<li>Catch the Bullet</li>
<li>Snoopydoo</li>
</ul>
<h4>Utilities</h4>
<ul>
<li>Gadget Finder</li>
<li>Green Tree Express</li>
<li>Green Tree Pro</li>
<li>Wobbler 3.0</li>
<li>Coolkid</li>
</ul>
</div>
<div>
<h4>Education</h4>
<ul>
<li>Learn Thai</li>
<li>Math Genius</li>
<li>Chemokid</li>
</ul>
<h4>Professionals</h4>
<ul>
<li>Success 1.0</li>
<li>Moneymaker</li>
</ul>
</div>
</div><!-- /cbp-hrsub-inner -->
</div><!-- /cbp-hrsub -->
</li>
<li>
Projects
<div class="cbp-hrsub">
<div class="cbp-hrsub-inner">
<div>
<h4>Learning & Games</h4>
<ul>
<li>Catch the Bullet</li>
<li>Snoopydoo</li>
<li>Fallen Angel</li>
<li>Sui Maker</li>
<li>Wave Master</li>
<li>Golf Pro</li>
</ul>
</div>
<div>
<h4>Entertainment</h4>
<ul>
<li>Gadget Finder</li>
<li>Green Tree Express</li>
<li>Green Tree Pro</li>
<li>Holy Cannoli</li>
<li>Wobbler 3.0</li>
<li>Coolkid</li>
</ul>
</div>
</div><!-- /cbp-hrsub-inner -->
</div><!-- /cbp-hrsub -->
</li>
</ul>
</nav>
</div>
</div>
topnavbar default CSS:
/* General Demo Style */
#import url(http://fonts.googleapis.com/css?family=Lato:300,400,700);
#font-face {
font-family: 'fontawesome';
src:url('../fonts/fontawesome.eot');
src:url('../fonts/fontawesome.eot?#iefix') format('embedded-opentype'),
url('../fonts/fontawesome.svg#fontawesome') format('svg'),
url('../fonts/fontawesome.woff') format('woff'),
url('../fonts/fontawesome.ttf') format('truetype');
font-weight: normal;
font-style: normal;
}
body, html { font-size: 100%; padding: 0; margin: 0;}
/* Reset */
*,
*:after,
*:before {
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
}
/* Clearfix hack by Nicolas Gallagher: http://nicolasgallagher.com/micro-clearfix-hack/ */
.clearfix:before,
.clearfix:after {
content: " ";
display: table;
}
.clearfix:after {
clear: both;
}
body {
font-family: 'Lato', Calibri, Arial, sans-serif;
color: #47a3da;
}
a {
color: #f0f0f0;
text-decoration: none;
}
a:hover {
color: yellow;
transform: scale(1.2);
}
.container{
padding-top:0px;
}
.container > header {
width: 90%;
max-width: 70em;
margin: 0 auto; /* remove auto to push the h1 text to left*/
padding: 0 0.5em 0.5em 0.5em;
}
/* Brand Name Text */
.container > header h1 {
font-size: 1.5em;
line-height: 1.3;
margin: 0;
float: left;
font-weight: 400;
margin-top:0;
}
.container > header span {
display: block;
font-weight: 700;
text-transform: uppercase;
letter-spacing: 0.5em;
padding: 0 0 0.1em 0.1em;
}
.container > header nav {
float: right;
text-align:bottom;
padding-top:0.1em;
}
/* next previous icons*/
/*
.container > header nav a {
display: block;
float: left;
position: relative;
width: 2.5em;
height: 2.5em;
background: #fff;
border-radius: 50%;
color: transparent;
margin: 0 0.5em;
border: 4px solid #47a3da;
text-indent: -8000px;
}
*/
/* after click next previous icons*/
.container > header nav a:after {
content: attr(data-info);
color: #47a3da;
position: absolute;
width: 600%;
top: 120%;
text-align: right;
right: 0;
opacity: 0;
pointer-events: none;
}
.container > header nav a:hover:after {
opacity: 1;
}
/* hover next previous icons*/
/*
.container > header nav a:hover {
background: #47a3da;
}
*/
.icon-drop:before,
.icon-arrow-left:before {
font-family: 'fontawesome';
position: absolute;
top: 0;
width: 100%;
height: 100%;
speak: none;
font-style: normal;
font-weight: normal;
line-height: 2;
text-align: center;
color: #47a3da;
-webkit-font-smoothing: antialiased;
text-indent: 8000px;
padding-left: 8px;
}
.container > header nav a:hover:before {
color: #fff;
}
.icon-drop:before {
content: "\e000";
}
.icon-arrow-left:before {
content: "\f060";
}
.fa{
color:#999;
transition: all .2s ease-in-out;
}
.fa:hover{
color: #47a3da;
/*color:rgb(20,220,180); ----- green ----- */
transform: scale(1.2);
}
topnavbar component CSS:
/* menu separator */
.cbp-hrmenu {
width: 100%;
margin-top: 0em;
border-bottom: 4px solid #47a3da;
}
/* general ul (div of tabs) */
.cbp-hrmenu ul {
margin: 0;
padding: 0;
list-style-type: none;
}
/* first level ul style (div of tabs)*/
.cbp-hrmenu > ul,
.cbp-hrmenu .cbp-hrsub-inner {
width: 90%;
max-width: 70em;
margin: 0 auto; /*remove auto to push tabs to left*/
padding: 0 1.875em;
}
/* tabs individually + the menu that drops*/
.cbp-hrmenu > ul > li {
display: inline-block;
}
/* link (text) of tabs */
.cbp-hrmenu > ul > li > a {
font-size:1.1em;
font-weight: 700;
padding: 0.1em 1em; /* height of tabs*/
color: #999;
display: inline-block;
border-radius:0.5em 0.5em 0em 0em;
transition: all .2s ease-in-out;
}
/* hover tabs' text */
.cbp-hrmenu > ul > li > a:hover {
/*color: #47a3da;
transition: color 0.2s linear;*/
color:#47a3da;
transform: scale(1.2);
}
/* links inside the drop down menu */
.cbp-hrmenu > ul > li.cbp-hropen > a,
.cbp-hrmenu > ul > li.cbp-hropen > a:hover {
color: white;
background: #47a3da;
}
/* sub-menu (the one that drops and contains options)*/
.cbp-hrmenu .cbp-hrsub {
display: none;
position: absolute;
background: #47a3da;
width: 100%;
left: 0;
}
.cbp-hropen .cbp-hrsub {
display: block;
padding-bottom: 3em;
}
.cbp-hrmenu .cbp-hrsub-inner > div {
width: 33%;
float: left;
padding: 0 2em 0;
}
.cbp-hrmenu .cbp-hrsub-inner:before,
.cbp-hrmenu .cbp-hrsub-inner:after {
content: " ";
display: table;
}
.cbp-hrmenu .cbp-hrsub-inner:after {
clear: both;
}
.cbp-hrmenu .cbp-hrsub-inner > div a {
line-height: 2em;
transition: all .2s ease-in-out;
}
.cbp-hrmenu .cbp-hrsub-inner > div a:hover {
font-weight:bold;
color:yellow;
}
.cbp-hrsub h4 {
color: #afdefa;
padding: 2em 0 0.6em;
margin: 0;
font-size: 160%;
font-weight: 300;
}
/* Examples for media queries */
#media screen and (max-width: 52.75em) {
.cbp-hrmenu {
font-size: 80%;
}
}
#media screen and (max-width: 43em) {
.cbp-hrmenu {
font-size: 120%;
border: none;
}
.cbp-hrmenu > ul,
.cbp-hrmenu .cbp-hrsub-inner {
width: 100%;
padding: 0;
}
.cbp-hrmenu .cbp-hrsub-inner {
padding: 0 2em;
font-size: 75%;
}
.cbp-hrmenu > ul > li {
display: block;
border-bottom: 4px solid #47a3da;
}
.cbp-hrmenu > ul > li > a {
display: block;
padding: 1em 3em;
}
.cbp-hrmenu .cbp-hrsub {
position: relative;
}
.cbp-hrsub h4 {
padding-top: 0.6em;
}
}
#media screen and (max-width: 36em) {
.cbp-hrmenu .cbp-hrsub-inner > div {
width: 100%;
float: none;
padding: 0 2em;
}
}
This is the main problem in your code that I can see:
you are using static files, so they are located in the url: http://yourdomain.com/static, but you are trying to load http://yourdomain.com/process_new/static/
you can fix it by 2 ways:
The first way is changing the src attribute in the script tag and adding a "/" at the beginning. It will get the js file from the root:
<script type='text/javascript' src="/static/bpmapp/js/cbpHorizontalMenu.min.js"></script>
Another way to fix it is using the Django static template tag. It will create the url of the static file for you:
<script type='text/javascript' src="{% static 'bpmapp/js/cbpHorizontalMenu.min.js' %}"></script>
Don't forget to add this tag at the beginning of the template file:
{% load staticfiles %}
Related
html {
position: relative;
min-height: 100%;
}
body {
/* Margin bottom by footer height */
margin-bottom: 60px;
overflow-x: hidden;
}
/*footer*/
.footer {
position: absolute;
bottom: 0;
width: 100%;
/* Set the fixed height of the footer here */
height: 60px;
background-color: #f5f5f5;
}
/*navbar*/
.navbar{
background-color:black;
font-family: sans-serif;
font-size: 20px;
}
.navbar-brand{
font-size: 20px;
}
.logo1{
height: 50px;
width: 75px;
opacity: 0.1px;
left: 0px;
top: 0px;
position: absolute;
}
.navbar-default .navbar-nav > li > a:hover, .navbar-default .navbar-nav > li > a:focus {
color: #000; /*Sets the text hover color on navbar*/
}
.navbar-default .navbar-nav > .active > a, .navbar-default .navbar-nav > .active >
a:hover, .navbar-default .navbar-nav > .active > a:focus {
color: white; /*BACKGROUND color for active*/
background-color: #030033;
}
.navbar-default {
background-color: #0f006f;
border-color: #030033;
}
.dropdown-menu > li > a:hover,
.dropdown-menu > li > a:focus {
color: #262626;
text-decoration: none;
background-color: #66CCFF; /*change color of links in drop down here*/
}
.nav > li > a:hover,
.nav > li > a:focus {
text-decoration: none;
background-color: silver; /*Change rollover cell color here*/
}
.navbar-default .navbar-nav > li > a {
color: whites; /*Change active text color here*/
}
body > .container {
padding: 60px 15px 0;
}
.container .text-muted {
margin: 20px 0;
}
/* side bar*/
/* Toggle Styles */
#wrapper {
padding-left: 0;
-webkit-transition: all 0.5s ease;
-moz-transition: all 0.5s ease;
-o-transition: all 0.5s ease;
transition: all 0.5s ease;
}
#wrapper.toggled {
padding-left: 250px;
}
#sidebar-wrapper {
z-index: 1000;
position: fixed;
left: 250px;
width: 0;
height: 100%;
margin-left: -250px;
overflow-y: auto;
background: #000;
-webkit-transition: all 0.5s ease;
-moz-transition: all 0.5s ease;
-o-transition: all 0.5s ease;
transition: all 0.5s ease;
}
#wrapper.toggled #sidebar-wrapper {
width: 250px;
}
#page-content-wrapper {
width: 100%;
position: absolute;
padding: 15px;
}
#wrapper.toggled #page-content-wrapper {
position: absolute;
margin-right: -250px;
}
/* Sidebar Styles */
.sidebar-nav {
position: absolute;
top: 0;
width: 250px;
margin: 0;
padding: 0;
list-style: none;
z-index: 1;
}
.sidebar-nav li {
text-indent: 20px;
line-height: 40px;
}
.sidebar-nav li a {
display: block;
text-decoration: none;
color: #999999;
}
.sidebar-nav li a:hover {
text-decoration: none;
color: #fff;
background: rgba(255,255,255,0.2);
}
.sidebar-nav li a:active,
.sidebar-nav li a:focus {
text-decoration: none;
}
.sidebar-nav > .sidebar-brand {
height: 65px;
font-size: 18px;
line-height: 60px;
}
.sidebar-nav > .sidebar-brand a {
color: #999999;
}
.sidebar-nav > .sidebar-brand a:hover {
color: #fff;
background: none;
}
.btn>.btn-default{
}
#media(min-width:768px) {
#wrapper {
padding-left: 0;
}
#wrapper.toggled {
padding-left: 250px;
}
#sidebar-wrapper {
width: 0;
}
#wrapper.toggled #sidebar-wrapper {
width: 250px;
}
#page-content-wrapper {
padding: 20px;
position: relative;
}
#wrapper.toggled #page-content-wrapper {
position: relative;
margin-right: 0;
}
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Bootstrap 101 Template</title>
<link href="css/bootstrap.min.css" rel="stylesheet">
<!--[if lt IE 9]>
<script src="https://oss.maxcdn.com/html5shiv/3.7.2/html5shiv.min.js"></script>
<script src="https://oss.maxcdn.com/respond/1.4.2/respond.min.js"></script>
<![endif]-->
<link rel="stylesheet" type="text/css" href="style1.css" />
<link href="bootstrap.min1.css" rel="stylesheet">
</head>
<body>
<!--top bar-->
<nav class="navbar navbar-inverse navbar-static-top">
<div class="container">
<div class="navbar-header">
<button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1" aria-expanded="false">
<span class="sr-only">Toggle navigation</span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<img class="logo1" src="images/capture.png" alt=" logo">
<a class="navbar-brand" href="#">Web Portax</a>
</div>
<form class="navbar-form navbar-left" role="search">
<div class="form-group">
<input type="text" class="form-control" placeholder="Search">
</div>
<button type="submit" class="btn btn-default">Submit</button>
</form>
<div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
<ul class="nav navbar-nav navbar-right">
<li>Account Setting</li>
<li>Message</li>
<li class="dropdown">
Services<span class="caret"></span>
<ul class="dropdown-menu">
<li>Log Out</li>
<li>Edit Profile</li>
<li>Manage prefrences</li>
</ul>
</li>
</ul>
</div>
</div>
</nav>
<div id="wrapper">
<!-- Sidebar -->
<div id="sidebar-wrapper">
<ul class="sidebar-nav">
<li class="sidebar-brand">
<a href="#">
Start Bootstrap
</a>
</li>
<li>
Dashboard
</li>
<li>
Shortcuts
</li>
<li>
Overview
</li>
<li>
Events
</li>
<li>
About
</li>
<li>
Services
</li>
<li>
Contact
</li>
</ul>
</div>
<!-- /#sidebar-wrapper -->
<!-- Page Content -->
<div id="page-content-wrapper">
<div class="container-fluid">
<div class="row">
<div class="col-lg-12">
</div>
</div>
</div>
</div>
<!-- /#page-content-wrapper -->
</div>
<!-- /#wrapper -->
<!-- jQuery -->
<script src="jquery1.js"></script>
<!-- Bootstrap Core JavaScript -->
<script src="bootstrap.min1.js"></script>
<!-- Menu Toggle Script -->
<script>
$("#menu-toggle").click(function(e) {
e.preventDefault();
$("#wrapper").toggleClass("toggled");
});
</script>
<!-- body-->
<!-- Footer -->
<div class="container">
<div class="page-header">
<h1>Content</h1>
</div>
</div>
<footer class="footer">
<div class="container">
<div class="row">
<p class="text-muted"> All rights reserved. </p>
</div>
</div>
</footer>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
<script src="js/bootstrap.min.js"></script>
</body>
</html>
Hey guys can anyone help me as my current page looks like this[enter image description here]
enter image description here
When i click toogle to expand my side bar it looks like this.
enter image description here
How can i fix the white spaces that is in between the header and the sidebar? How can i shift the little grey thing to toggle the sidebar to left corner? and lastly how can i shift "Web Portax" from the top nav bar slightly to the right so when i minimize it the logo and the text do not crumple together?
I am new to html thing so sorry for the amateur question. Thank you!
Use the margin property in CSS to adjust the space around your elements.
Example:
margin-top: 100px;
margin-bottom: 100px;
margin-right: 150px;
margin-left: 80px;
and the padding element to adjust the space in between the content and the border of the element.
Example:
padding-top: 50px;
padding-right: 30px;
padding-bottom: 50px;
padding-left: 80px;
You can also use the height and width properties to adjust the size of the element.
Example height: 100px;
jsut a quick question.
I am having trouble figuring out how to align the gallery icons into the centre of the screen. As you can see from the code snippet it is misaligned. Just to illustrate what I mean you can take a look at this:
Anyone able to point me in the right direction?
* {
font-family: "Trebuchet MS";
}
/* BODY */
body {
background-color: #FFF6E5;
}
body hr {
width: 55%;
}
/*LOGO*/
#logo {
font-size: 4em;
text-align: center;
}
#logo p {
margin: 0px;
}
/* NAVBAR */
#navbar a {
text-decoration: none;
color: black;
}
#navbar {
text-align: center;
font-size: 1.4em;
}
/* CONTENT */
#content {
width: 30%;
text-align: center;
margin: auto;
font-size: 1.05em;
}
/* MENU */
#item {
float: left;
width: 30%;
margin: 5px;
}
#item img {
width: 100%;
}
#img-box {
width: 100%;
overflow: hidden;
border: 1px solid black;
}
<!DOCTYPE html>
<html>
<head>
<title>GingeSwag Productions</title>
<link href="main.css" rel="stylesheet">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.0/jquery.min.js"></script>
<script type="text/javascript" src="main.js"></script>
<link rel="stylesheet" type="text/css" media="screen" href="http://cdnjs.cloudflare.com/ajax/libs/fancybox/1.3.4/jquery.fancybox-1.3.4.css"/>
</head>
<body>
<!-- STYLE SECTION -->
<style type="text/css">
body {
font-family: "Aller", "sans-serif"; /* just a custom font */
}
a:-webkit-any-link {
text-decoration: none; /* ignoring default link settings */
}
ul {
list-style-type: none; /* hiding the bullets from ul */
}
.fade {
opacity: 0.8; /* sets default view to a 80% opacity */
transition: opacity .25s ease-in-out;
-moz-transition: opacity .25s ease-in-out;
-webkit-transition: opacity .25s ease-in-out;
}
.fade:hover {
opacity: 1; /* sets default view to a 100% opacity when on hover state */
}
.img-wrapper {
width: 300px;
height: 200px;
border: 0.1em solid #ccc;
border-radius: 0.4em;
background-color: #f3f3f3;
box-shadow: 0.1em 0.1em 0.5em -0.2em #777;
margin: 1em 1em;
}
img {
border-radius: 0.4em 0.4em 0.4em 0.4em; /* radius should be the same as the img-wrapper */
}
.gallery-wrapper {
max-width: 1200px;
margin: auto;
}
.gallery-wrapper ul li {
display: inline-block; /* sit wrappers in rows, not column block */
}
h1 {
padding-left: 14em;
}
h4 { /* style the photos titles */
text-align: center;
font-size: 1em;
margin: 0;
padding: 0.5em 2em;
text-transform: uppercase;
font-weight: bold;
color: black;
}
.logo {
margin-left: 22em;
margin-bottom: 4em;
}
</style>
<div id="logo">
<p>GingeSwagProductions</p>
</div>
<div id="navbar">
<p>
Home -
Film -
Photography -
About -
Contact
</p>
</div>
<hr>
<div class="gallery-wrapper">
<h1>Natalia - Photoshoot</h1>
<ul>
<li>
<figure class="img-wrapper fade"><a class="fancybox" href="pictures/albums/natalia/images/1.JPG"><img src="pictures/albums/natalia/thumbnail/1.jpg"></a></figure>
</li>
<li>
<figure class="img-wrapper fade"><a class="fancybox" href="pictures/albums/natalia/images/2.JPG"><img src="pictures/albums/natalia/thumbnail/2.jpg"></a></figure>
</li>
<li>
<figure class="img-wrapper fade"><a class="fancybox" href="pictures/albums/natalia/images/3.JPG"><img src="pictures/albums/natalia/thumbnail/3.jpg"></a></figure>
</li>
<li>
<figure class="img-wrapper fade"><a class="fancybox" href="pictures/albums/natalia/images/4.JPG"><img src="pictures/albums/natalia/thumbnail/4.jpg"></a></figure>
</li>
<li>
<figure class="img-wrapper fade"><a class="fancybox" href="pictures/albums/natalia/images/5.JPG"><img src="pictures/albums/natalia/thumbnail/5.jpg"></a></figure>
</li>
<li>
<figure class="img-wrapper fade"><a class="fancybox" href="pictures/albums/natalia/images/6.JPG"><img src="pictures/albums/natalia/thumbnail/6.jpg"></a></figure>
</li>
<li>
<figure class="img-wrapper fade"><a class="fancybox" href="pictures/albums/natalia/images/7.JPG"><img src="pictures/albums/natalia/thumbnail/7.jpg"></a></figure>
</li>
<li>
<figure class="img-wrapper fade"><a class="fancybox" href="pictures/albums/natalia/images/8.JPG"><img src="pictures/albums/natalia/thumbnail/8.jpg"></a></figure>
</li>
<li>
<figure class="img-wrapper fade"><a class="fancybox" href="pictures/albums/natalia/images/9.JPG"><img src="pictures/albums/natalia/thumbnail/9.jpg"></a></figure>
</li>
</ul>
</div>
</body>
<script type="text/javascript" src="js/jquery-1.11.0.min.js"></script>
<script type="text/javascript" src="js/jquery-migrate-1.2.1.min.js"></script>
<script type="text/javascript" src="js/jquery.fancybox-1.3.4.pack.min.js"></script>
<script type="text/javascript">
$(function($){
var addToAll = false;
var gallery = true;
var titlePosition = 'inside';
$(addToAll ? 'img' : 'img.fancybox').each(function(){
var $this = $(this);
var title = $this.attr('title');
var src = $this.attr('data-big') || $this.attr('src');
var a = $('').attr('href', src).attr('title', title);
$this.wrap(a);
});
if (gallery)
$('a.fancybox').attr('rel', 'fancyboxgallery');
$('a.fancybox').fancybox({
titlePosition: titlePosition
});
});
$.noConflict();
</script>
<footer></footer>
</html>
Try setting these properties to the ul element:
padding: 0;
text-align: center;
* {
font-family: "Trebuchet MS";
}
/* BODY */
body {
background-color: #FFF6E5;
}
body hr {
width: 55%;
}
/*LOGO*/
#logo {
font-size: 4em;
text-align: center;
}
#logo p {
margin: 0px;
}
/* NAVBAR */
#navbar a {
text-decoration: none;
color: black;
}
#navbar {
text-align: center;
font-size: 1.4em;
}
/* CONTENT */
#content {
width: 30%;
text-align: center;
margin: auto;
font-size: 1.05em;
}
/* MENU */
#item {
float: left;
width: 30%;
margin: 5px;
}
#item img {
width: 100%;
}
#img-box {
width: 100%;
overflow: hidden;
border: 1px solid black;
}
<!DOCTYPE html>
<html>
<head>
<title>GingeSwag Productions</title>
<link href="main.css" rel="stylesheet">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.0/jquery.min.js"></script>
<script type="text/javascript" src="main.js"></script>
<link rel="stylesheet" type="text/css" media="screen" href="http://cdnjs.cloudflare.com/ajax/libs/fancybox/1.3.4/jquery.fancybox-1.3.4.css"/>
</head>
<body>
<!-- STYLE SECTION -->
<style type="text/css">
body {
font-family: "Aller", "sans-serif"; /* just a custom font */
}
a:-webkit-any-link {
text-decoration: none; /* ignoring default link settings */
}
ul {
padding: 0;
text-align: center;
list-style-type: none; /* hiding the bullets from ul */
}
.fade {
opacity: 0.8; /* sets default view to a 80% opacity */
transition: opacity .25s ease-in-out;
-moz-transition: opacity .25s ease-in-out;
-webkit-transition: opacity .25s ease-in-out;
}
.fade:hover {
opacity: 1; /* sets default view to a 100% opacity when on hover state */
}
.img-wrapper {
width: 300px;
height: 200px;
border: 0.1em solid #ccc;
border-radius: 0.4em;
background-color: #f3f3f3;
box-shadow: 0.1em 0.1em 0.5em -0.2em #777;
margin: 1em 1em;
}
img {
border-radius: 0.4em 0.4em 0.4em 0.4em; /* radius should be the same as the img-wrapper */
}
.gallery-wrapper {
max-width: 1200px;
margin: auto;
}
.gallery-wrapper ul li {
display: inline-block; /* sit wrappers in rows, not column block */
}
h1 {
padding-left: 14em;
}
h4 { /* style the photos titles */
text-align: center;
font-size: 1em;
margin: 0;
padding: 0.5em 2em;
text-transform: uppercase;
font-weight: bold;
color: black;
}
.logo {
margin-left: 22em;
margin-bottom: 4em;
}
</style>
<div id="logo">
<p>GingeSwagProductions</p>
</div>
<div id="navbar">
<p>
Home -
Film -
Photography -
About -
Contact
</p>
</div>
<hr>
<div class="gallery-wrapper">
<h1>Natalia - Photoshoot</h1>
<ul>
<li>
<figure class="img-wrapper fade"><a class="fancybox" href="pictures/albums/natalia/images/1.JPG"><img src="pictures/albums/natalia/thumbnail/1.jpg"></a></figure>
</li>
<li>
<figure class="img-wrapper fade"><a class="fancybox" href="pictures/albums/natalia/images/2.JPG"><img src="pictures/albums/natalia/thumbnail/2.jpg"></a></figure>
</li>
<li>
<figure class="img-wrapper fade"><a class="fancybox" href="pictures/albums/natalia/images/3.JPG"><img src="pictures/albums/natalia/thumbnail/3.jpg"></a></figure>
</li>
<li>
<figure class="img-wrapper fade"><a class="fancybox" href="pictures/albums/natalia/images/4.JPG"><img src="pictures/albums/natalia/thumbnail/4.jpg"></a></figure>
</li>
<li>
<figure class="img-wrapper fade"><a class="fancybox" href="pictures/albums/natalia/images/5.JPG"><img src="pictures/albums/natalia/thumbnail/5.jpg"></a></figure>
</li>
<li>
<figure class="img-wrapper fade"><a class="fancybox" href="pictures/albums/natalia/images/6.JPG"><img src="pictures/albums/natalia/thumbnail/6.jpg"></a></figure>
</li>
<li>
<figure class="img-wrapper fade"><a class="fancybox" href="pictures/albums/natalia/images/7.JPG"><img src="pictures/albums/natalia/thumbnail/7.jpg"></a></figure>
</li>
<li>
<figure class="img-wrapper fade"><a class="fancybox" href="pictures/albums/natalia/images/8.JPG"><img src="pictures/albums/natalia/thumbnail/8.jpg"></a></figure>
</li>
<li>
<figure class="img-wrapper fade"><a class="fancybox" href="pictures/albums/natalia/images/9.JPG"><img src="pictures/albums/natalia/thumbnail/9.jpg"></a></figure>
</li>
</ul>
</div>
</body>
<script type="text/javascript" src="js/jquery-1.11.0.min.js"></script>
<script type="text/javascript" src="js/jquery-migrate-1.2.1.min.js"></script>
<script type="text/javascript" src="js/jquery.fancybox-1.3.4.pack.min.js"></script>
<script type="text/javascript">
$(function($){
var addToAll = false;
var gallery = true;
var titlePosition = 'inside';
$(addToAll ? 'img' : 'img.fancybox').each(function(){
var $this = $(this);
var title = $this.attr('title');
var src = $this.attr('data-big') || $this.attr('src');
var a = $('').attr('href', src).attr('title', title);
$this.wrap(a);
});
if (gallery)
$('a.fancybox').attr('rel', 'fancyboxgallery');
$('a.fancybox').fancybox({
titlePosition: titlePosition
});
});
$.noConflict();
</script>
<footer></footer>
</html>
add
text-align: center;
padding: 0;
to the ul
* {
font-family: "Trebuchet MS";
}
/* BODY */
body {
background-color: #FFF6E5;
}
body hr {
width: 55%;
}
/*LOGO*/
#logo {
font-size: 4em;
text-align: center;
}
#logo p {
margin: 0px;
}
/* NAVBAR */
#navbar a {
text-decoration: none;
color: black;
}
#navbar {
text-align: center;
font-size: 1.4em;
}
/* CONTENT */
#content {
width: 30%;
text-align: center;
margin: auto;
font-size: 1.05em;
}
/* MENU */
#item {
float: left;
width: 30%;
margin: 5px;
}
#item img {
width: 100%;
}
#img-box {
width: 100%;
overflow: hidden;
border: 1px solid black;
}
<!DOCTYPE html>
<html>
<head>
<title>GingeSwag Productions</title>
<link href="main.css" rel="stylesheet">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.0/jquery.min.js"></script>
<script type="text/javascript" src="main.js"></script>
<link rel="stylesheet" type="text/css" media="screen" href="http://cdnjs.cloudflare.com/ajax/libs/fancybox/1.3.4/jquery.fancybox-1.3.4.css"/>
</head>
<body>
<!-- STYLE SECTION -->
<style type="text/css">
body {
font-family: "Aller", "sans-serif"; /* just a custom font */
}
a:-webkit-any-link {
text-decoration: none; /* ignoring default link settings */
}
ul {
list-style-type: none; /* hiding the bullets from ul */
text-align: center;
padding: 0;
}
.fade {
opacity: 0.8; /* sets default view to a 80% opacity */
transition: opacity .25s ease-in-out;
-moz-transition: opacity .25s ease-in-out;
-webkit-transition: opacity .25s ease-in-out;
}
.fade:hover {
opacity: 1; /* sets default view to a 100% opacity when on hover state */
}
.img-wrapper {
width: 300px;
height: 200px;
border: 0.1em solid #ccc;
border-radius: 0.4em;
background-color: #f3f3f3;
box-shadow: 0.1em 0.1em 0.5em -0.2em #777;
margin: 1em 1em;
}
img {
border-radius: 0.4em 0.4em 0.4em 0.4em; /* radius should be the same as the img-wrapper */
}
.gallery-wrapper {
max-width: 1200px;
margin: auto;
}
.gallery-wrapper ul li {
display: inline-block; /* sit wrappers in rows, not column block */
}
h1 {
padding-left: 14em;
}
h4 { /* style the photos titles */
text-align: center;
font-size: 1em;
margin: 0;
padding: 0.5em 2em;
text-transform: uppercase;
font-weight: bold;
color: black;
}
.logo {
margin-left: 22em;
margin-bottom: 4em;
}
</style>
<div id="logo">
<p>GingeSwagProductions</p>
</div>
<div id="navbar">
<p>
Home -
Film -
Photography -
About -
Contact
</p>
</div>
<hr>
<div class="gallery-wrapper">
<h1>Natalia - Photoshoot</h1>
<ul>
<li>
<figure class="img-wrapper fade"><a class="fancybox" href="pictures/albums/natalia/images/1.JPG"><img src="pictures/albums/natalia/thumbnail/1.jpg"></a></figure>
</li>
<li>
<figure class="img-wrapper fade"><a class="fancybox" href="pictures/albums/natalia/images/2.JPG"><img src="pictures/albums/natalia/thumbnail/2.jpg"></a></figure>
</li>
<li>
<figure class="img-wrapper fade"><a class="fancybox" href="pictures/albums/natalia/images/3.JPG"><img src="pictures/albums/natalia/thumbnail/3.jpg"></a></figure>
</li>
<li>
<figure class="img-wrapper fade"><a class="fancybox" href="pictures/albums/natalia/images/4.JPG"><img src="pictures/albums/natalia/thumbnail/4.jpg"></a></figure>
</li>
<li>
<figure class="img-wrapper fade"><a class="fancybox" href="pictures/albums/natalia/images/5.JPG"><img src="pictures/albums/natalia/thumbnail/5.jpg"></a></figure>
</li>
<li>
<figure class="img-wrapper fade"><a class="fancybox" href="pictures/albums/natalia/images/6.JPG"><img src="pictures/albums/natalia/thumbnail/6.jpg"></a></figure>
</li>
<li>
<figure class="img-wrapper fade"><a class="fancybox" href="pictures/albums/natalia/images/7.JPG"><img src="pictures/albums/natalia/thumbnail/7.jpg"></a></figure>
</li>
<li>
<figure class="img-wrapper fade"><a class="fancybox" href="pictures/albums/natalia/images/8.JPG"><img src="pictures/albums/natalia/thumbnail/8.jpg"></a></figure>
</li>
<li>
<figure class="img-wrapper fade"><a class="fancybox" href="pictures/albums/natalia/images/9.JPG"><img src="pictures/albums/natalia/thumbnail/9.jpg"></a></figure>
</li>
</ul>
</div>
</body>
<script type="text/javascript" src="js/jquery-1.11.0.min.js"></script>
<script type="text/javascript" src="js/jquery-migrate-1.2.1.min.js"></script>
<script type="text/javascript" src="js/jquery.fancybox-1.3.4.pack.min.js"></script>
<script type="text/javascript">
$(function($){
var addToAll = false;
var gallery = true;
var titlePosition = 'inside';
$(addToAll ? 'img' : 'img.fancybox').each(function(){
var $this = $(this);
var title = $this.attr('title');
var src = $this.attr('data-big') || $this.attr('src');
var a = $('').attr('href', src).attr('title', title);
$this.wrap(a);
});
if (gallery)
$('a.fancybox').attr('rel', 'fancyboxgallery');
$('a.fancybox').fancybox({
titlePosition: titlePosition
});
});
$.noConflict();
</script>
<footer></footer>
</html>
So I have a panel layout that I've been throwing together and it has a fancy vertical navbar. I have it aligned correctly and everything and I have successfully been able to get a dropdown menu to appear in a vertical fashion, however, for some reason it is always appending to the last item on list. I can't understand why it is doing this.
I've posted all of my code below, and from previous research on the initial issue of just getting the menu to show up, I believe that my css is correct, so I'm wondering if it may be a javascript issue on the boostrap side, but I have no javascript currently being used with the side menu.
CSS
/************
* side navbar
*************/
#side-nav{
height: 100%;
padding-left: 0;
padding-right: 0;
}
.nav-stacked{
height: 100%;
width: 100%;
background: #3B3B3B;
overflow-x: visible;
overflow-y: hidden;
margin-bottom: -99999px;
padding-bottom: 99999px;
}
.nav-stacked > li > a > p{
font-size: 14px;
padding-left: 4px;
display: block;
text-align: center;
}
.nav-stacked > li > a > span{
font-size: 36px;
display: block;
text-align: center;
}
.nav-pills > li > a{
border-radius: 0;
padding-top: 15px;
}
.nav-pills > li.active > a{
background: linear-gradient(#343434, #000000);
}
.nav-pills > li:not(.active) > a{
background: linear-gradient(#4B4B4B, #3B3B3B);
color : #e5e5e5;
}
.nav-pills > li:last-child:not(.active) > a{
border-bottom: solid 1px #353535;
}
.nav-pills > li:not(.active) > a:hover{
background: linear-gradient(#ffffff, #CACCCB);
color : #333;
}
.nav-stacked > li+li{
margin-top: 0;
}
#side-nav li.active.open, #side-nav li:not(.active).open{
position: static;
}
#side-nav .dropdown-menu{
overflow-x: visible;
width: 100% !important;
margin: -92px 0 0 100%;
border-radius: 0;
}
.dropdown-toggle .glyphicon-chevron-right{
font-size: 14px;
position: absolute;
top: 36px;
left: 85%;
}
html
<nav id='side-nav' class='hidden-xs col-sm-2 col-md-1'>
<ul class='nav nav-pills nav-stacked'>
<li>
<a class="dropdown-toggle" data-toggle="dropdown" href="#" role="button" aria-haspopup="true" aria-expanded="false">
<span class='glyphicon glyphicon-user'></span>
<p>Driver</p>
<span class='glyphicon glyphicon-chevron-right'></span>
</a>
<ul class='dropdown-menu'>
<li>EXPIRATIONS</li>
<li><a class='clinic' href="#">CLINICS</a></li>
<li><a class='drugTest' href="#">DRUG TESTING</a></li>
<li>RECRUITING</li>
</ul>
</li>
<li>
<a href="/comcheck">
<span class='glyphicon glyphicon-list-alt'></span>
<p>Comcheck</p>
</a>
</li>
<li>
<a href="/equipment">
<span class='glyphicon glyphicon-wrench'></span>
<p>Equipment</p>
</a>
</li>
</ul>
</nav>
I have a working fiddle to demonstrate what my issue is:
https://jsfiddle.net/ye1q4wfu/4/
All I want it to do is, when I click on the list item that has a dropdown. I want the dropdown to appear next to it.
Just set the top of dropdown to top: auto;
#side-nav .dropdown-menu {
top: auto;
}
https://jsbin.com/fukujazuko/
My internet has some trouble with jsfiddle
If you don't mind using a bit of JQuery, I think this will do the trick:
$('.dropdown-menu').each(function() {
$(this).css('top', $(this).closest('li').css('top'));
});
You will also need to change one line of your CSS:
#side-nav .dropdown-menu{
overflow-x: visible;
width: 100% !important;
//margin: -92px 0 0 100%; /* Removed */
margin: 0 0 0 100%; /* Added */
border-radius: 0;
}
Demo Here
Use the following CSS code that the sub-menu appears in front of the item.
#side-nav .dropdown-menu{
overflow-x: visible;
width: 100% !important;
margin: -290px 0 0 100%;
border-radius: 0;
}
I've added the clearfix class to the li element in which your dropdown menu is. Then, these attributes to dropdown-menu
#side-nav .dropdown-menu {
...
top: auto;
float: right;
}
And added this css rule:
#side-nav .dropdown-toggle {
float: left;
width: 100%;
}
This is the complete snippet with the changes. When showing the code snippet, please, click on "Full page" to see the result.
#side-nav{
height: 100%;
padding-left: 0;
padding-right: 0;
}
.nav-stacked{
height: 100%;
width: 100%;
background: #3B3B3B;
overflow-x: visible;
overflow-y: hidden;
margin-bottom: -99999px;
padding-bottom: 99999px;
}
.nav-stacked > li > a > p{
font-size: 14px;
padding-left: 4px;
display: block;
text-align: center;
}
.nav-stacked > li > a > span{
font-size: 36px;
display: block;
text-align: center;
}
.nav-pills > li > a{
border-radius: 0;
padding-top: 15px;
}
.nav-pills > li.active > a{
background: linear-gradient(#343434, #000000);
}
.nav-pills > li:not(.active) > a{
background: linear-gradient(#4B4B4B, #3B3B3B);
color : #e5e5e5;
}
.nav-pills > li:last-child:not(.active) > a{
border-bottom: solid 1px #353535;
}
.nav-pills > li:not(.active) > a:hover{
background: linear-gradient(#ffffff, #CACCCB);
color : #333;
}
.nav-stacked > li+li{
margin-top: 0;
}
#side-nav li.active.open, #side-nav li:not(.active).open{
position: static;
}
#side-nav .dropdown-menu{
overflow-x: visible;
width: 100% !important;
margin: 0 0 0 100%;
border-radius: 0;
top: auto;
float: right;
}
#side-nav .dropdown-toggle {
float: left;
width: 100%;
}
.dropdown-toggle .glyphicon-chevron-right{
font-size: 14px;
position: absolute;
top: 36px;
left: 85%;
}
<!DOCTYPE html>
<html>
<head>
<script src="https://code.jquery.com/jquery.min.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet" type="text/css" />
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width">
<title>JS Bin</title>
</head>
<body>
<nav id='side-nav' class='hidden-xs col-sm-2 col-md-1'>
<ul class='nav nav-pills nav-stacked'>
<li class="clearfix"> <!-- ADDED THE CLEARFIX CLASS -->
<a class="dropdown-toggle" data-toggle="dropdown" href="#" role="button" aria-haspopup="true" aria-expanded="false">
<span class='glyphicon glyphicon-user'></span>
<p>Driver</p>
<span class='glyphicon glyphicon-chevron-right'></span>
</a>
<ul class='dropdown-menu'>
<li>EXPIRATIONS</li>
<li><a class='clinic' href="#">CLINICS</a></li>
<li><a class='drugTest' href="#">DRUG TESTING</a></li>
<li>RECRUITING</li>
</ul>
</li>
<li>
<a href="/comcheck">
<span class='glyphicon glyphicon-list-alt'></span>
<p>Comcheck</p>
</a>
</li>
<li>
<a href="/comcheck">
<span class='glyphicon glyphicon-wrench'></span>
<p>Equipment</p>
</a>
</li>
</ul>
</nav>
</body>
</html>
I was wondering if there was a way to add a scroll to the nav bar when the user has a zoomed in browser.
Currently, I have my nav bar set to:
position: fixed;
left: 0;
top: 0;
Along with a javascript code that makes it stick to the side when the user scrolls on the page.
However, say the user has a browser that is zoomed in 150% or more, half of the nav bar gets cut off and the user is not able to see the other options in the nav bar. Is there a way to add a scroll when the user has a zoomed in browser?
Here is my code,
HTML:
<header>
<div class="logo">
<a href="index.html">
<img src="img/logo.png"/>
</a>
</div><!-- end logo -->
<div id="menu_icon"></div>
<nav>
<ul>
<div class="transition">
<div class="sideBar">
<li>About</li>
</div>
</div>
<div class="transition">
<div class="sideBar">
<li>Resume</li>
</div>
</div>
<div class="transition">
<div class="sideBar">
<li>Skills</li>
</div>
</div>
<div class="transition">
<div class="sideBar">
<li>Portfolio</li>
</div>
</div>
<div class="transition">
<div class="sideBar">
<li>Map Gallery</li>
</div>
</div>
<div class="transition">
<div class="sideBar">
<li>Thesis</li>
</div>
</div>
<div class="transition">
<div class="sideBar">
<li>Contact</li>
</div>
</div>
</ul>
</nav><!--end sidebar-->
<div class="footer clearfix">
<ul class="social clearfix">
<li><img src="img/email.png"></li>
<li><img src="img/linkedin.png"></li>
<li><img src="img/twitter.png"></li>
<li><img src="img/facebook.png"></li>
</ul><!-- end social -->
<div class="rights">
<p>Copyright © MD</p>
</div><!-- end rights -->
</div ><!-- end footer -->
</header><!-- end header -->
CSS:
/* Header */
#media (min-width:1100px) {
header {
display: block;
position: fixed;
left: 0;
top: 0;
width: 260px;
min-height: 100%;
padding: 0 0 0 50px;
background: #FFFFFF;
float: left;
overflow: hidden;
z-index: 9999;
}
header .logo {
margin-top: 50px;
margin-left: -50px;
}
header nav ul {
display: block;
overflow: hidden;
margin-top: 35px;
margin-left: -15px;
list-style: none;
}
header nav ul li {
display: block;
margin-bottom: 30px;
margin-top: 50px;
}
header nav ul li a {
color: #000000;
font-family: "raleway-regular", arial;
font-size: 20px;
text-decoration: none;
letter-spacing: 2px;
}
header nav ul li a:hover {
color: #8AE6B8;
}
header nav ul li a:active {
color: #CC99FF;
}
.transition {
width:50%;
height: 30px;
position: relative;
transition: 0.5s;
}
.transition:hover {
width:100%;
height: 30px;
position: relative;
transition: 0.5s;
}
.sideBar {
width:75%;
height: 100%;
position: relative;
padding:0px;
margin-left:20%;
}
header .footer {
margin-top: 30%;
}
header ul.social {
position: relative;
list-style: none;
margin-bottom: 5px;
filter: grayscale(100%);
-webkit-filter: grayscale(100%); /* For Webkit browsers */
filter: gray; /* For IE 6 - 9 */
-webkit-transition: all .7s ease; /* Transition for Webkit browsers */
}
header ul.social li {
display: block;
float: left;
position: relative;
margin: 0 15px 15px 4px;
}
header ul.social li a {
display: block;
width: 30px;
height: 30px;
background-position: 0 0;
}
header .rights p {
color: #000000;
font-family: "raleway-regular", arial;
font-size: 11px;
letter-spacing: 2px;
line-height: 18px;
}
header .rights a {
font-family: "raleway-bold", arial;
font-weight: bold;
text-decoration: none;
}
Here is the jsfiddle:
https://jsfiddle.net/n2zb3pnz/
Even on the js fiddle it doesn't show the full nav bar because it is too zoomed in.
Fiddle: https://jsfiddle.net/n2zb3pnz/5/
header {
overflow: auto;
bottom:0;
}
A few issues here..
The <header> html tag is normally used as a container element for "navigational aids" for some containing element (in your case <body>). From the docs:
The HTML Element represents a group of introductory or
navigational aids. It may contain some heading elements but also other
elements like a logo, wrapped section's header, a search form, and so
on.
.. So, it's not semantically incorrect, but think of it's typically usage as being the top portion of a "frame" or box on your page (not the sidebar nav)
Your navbar overflow property is set to hidden - which prevents the scrolling that you are looking for. It also has no parent element aside from the doc body, so unless you want the scrolling on the navbar itself, you'll need to add a parent with overflow: auto;.
Example:
html, body{
height: 1000px;
width: 1000px;
}
.content{
height: 100%;
width: 100%;
overflow: auto;
background-color: pink;
}
.header {
display: block;
position: fixed;
left: 0;
top: 0;
width: 260px;
min-height: 100%;
padding: 0 0 0 50px;
background: #FFFFFF;
float: left;
overflow: hidden;
z-index: 9999;
}
.header .logo {
margin-top: 50px;
margin-left: -50px;
}
.header nav ul {
display: block;
overflow: hidden;
margin-top: 35px;
margin-left: -15px;
list-style: none;
}
.header nav ul li {
display: block;
margin-bottom: 30px;
margin-top: 50px;
}
.header nav ul li a {
color: #000000;
font-family:"raleway-regular", arial;
font-size: 20px;
text-decoration: none;
letter-spacing: 2px;
}
.header nav ul li a:hover {
color: #8AE6B8;
}
.header nav ul li a:active {
color: #CC99FF;
}
.transition {
width:50%;
height: 30px;
position: relative;
transition: 0.5s;
}
.transition:hover {
width:100%;
height: 30px;
position: relative;
transition: 0.5s;
}
.sideBar {
width:75%;
height: 100%;
position: relative;
padding:0px;
margin-left:20%;
}
.header .footer {
margin-top: 30%;
}
.header ul.social {
position: relative;
list-style: none;
margin-bottom: 5px;
filter: grayscale(100%);
-webkit-filter: grayscale(100%);
/* For Webkit browsers */
filter: gray;
/* For IE 6 - 9 */
-webkit-transition: all .7s ease;
/* Transition for Webkit browsers */
}
.header ul.social li {
display: block;
float: left;
position: relative;
margin: 0 15px 15px 4px;
}
.header ul.social li a {
display: block;
width: 30px;
height: 30px;
background-position: 0 0;
}
.header .rights p {
color: #000000;
font-family:"raleway-regular", arial;
font-size: 11px;
letter-spacing: 2px;
line-height: 18px;
}
.header .rights a {
font-family:"raleway-bold", arial;
font-weight: bold;
text-decoration: none;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="content">
<div class="header">
<div class="logo"> <a href="index.html">
<img src="img/logo.png"/>
</a>
</div>
<!-- end logo -->
<div id="menu_icon"></div>
<nav>
<ul>
<div class="transition">
<div class="sideBar">
<li>About
</li>
</div>
</div>
<div class="transition">
<div class="sideBar">
<li>Resume
</li>
</div>
</div>
<div class="transition">
<div class="sideBar">
<li>Skills
</li>
</div>
</div>
<div class="transition">
<div class="sideBar">
<li>Portfolio
</li>
</div>
</div>
<div class="transition">
<div class="sideBar">
<li>Map Gallery
</li>
</div>
</div>
<div class="transition">
<div class="sideBar">
<li>Thesis
</li>
</div>
</div>
<div class="transition">
<div class="sideBar">
<li>Contact
</li>
</div>
</div>
</ul>
</nav>
<!--end sidebar-->
<div class="footer clearfix">
<ul class="social clearfix">
<li><img src="img/email.png">
</li>
<li><img src="img/linkedin.png">
</li>
<li><img src="img/twitter.png">
</li>
<li><img src="img/facebook.png">
</li>
</ul>
<!-- end social -->
<div class="rights">
<p>Copyright © MD</p>
</div>
<!-- end rights -->
</div>
<!-- end footer -->
</div>
<!-- end header -->
</div>
In below code the Purchase, sale, and new menus have some multilevel menus which need to open onClick using jQuery also when click on another menu the first one multilevel menu should be close and then this menu should be open with some transition effects.
$('#handle').on('click', function() {
$('ul').toggleClass('showing');
});
$('li').on('click', function(e) {
$(this).next('li li').toggleClass('showingg');
});
#charset "utf-8";
/* CSS Document */
body {
margin: 0;
padding: 0;
}
.container {
margin: 0;
padding: 0;
}
#handle {
display: none;
}
ul {
list-style-type: none;
margin: 0;
padding: 0;
-moz-transition: linear 0.4s;
}
li {
float: left;
}
li a {
text-decoration: none;
display: block;
padding: 15px;
background: #0C9;
color: #FFF;
border-bottom: 1px solid #ccc;
}
li a:hover {
background: #333;
}
li ul {
display: none;
}
li:hover > ul {
display: block;
position: absolute;
}
li:hover li {
float: none;
}
ul ul ul {
left: 100%;
top: 0;
}
ul:before,
ul:after {
content: " ";
/* 1 */
display: table;
/* 2 */
}
ul:after {
clear: both;
}
#media screen and (max-width: 480px) {
#handle {
display: block;
background: #066;
color: #fff;
padding: 10px;
text-align: center;
box-sizing: border-box;
font-size: xx-large;
cursor: pointer;
}
li {
width: 100%;
text-align: center;
font-size: x-large;
}
ul {
max-height: 0;
overflow: hidden;
}
li a:hover {
background: #0C9;
}
.showing {
max-height: 200em;
}
li:hover > ul {
position: relative;
}
/*li li {
display:none;
}*/
li li:hover > ul {
left: 0;
position: relative;
}
li li a {
background: #CCC;
}
.showingg {
display: block;
;
}
}
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>Untitled Document</title>
<link rel="stylesheet" href="nav1.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>
</head>
<body>
<div class="container">
<nav class="showing">
<div id="handle">Menu</div>
<ul id="nav">
<li>Available stock
</li>
<li>
Purchase +
<ul>
<li>
Purchase Return +
<ul>
<li>Return1
</li>
</ul>
</li>
</ul>
</li>
<li>
Sale +
<ul>
<li>
Sale Return +
<ul>
<li>Return2
</li>
</ul>
</li>
</ul>
</li>
<li>Cash Recieve
</li>
<li>Cash Payment
</li>
<li>
New +
<ul>
<li>New Product
</li>
<li>New Supplier
</li>
<li>New Town
</li>
<li>New Customer
</li>
</ul>
</li>
<li>Opening Stock
</li>
<li>Gate Pass
</li>
<li>Sale History
</li>
</ul>
</nav>
</div>
</body>
</html>