We Keep Coding

my sub navigation bar is visible when i hover over the navbar element itself but disappears when i hover over it

I made a sub nav bar, and it disappears when I hover over it, I tried changing somethings but it still will disappear when I hover over the submenu itself. if anyone knows what I could do that would be really helpful.
code:
<header>
<div class="containers">
<nav>
<ul>
<li>home</li>
<li>movies
<ul class="sub-menu">
<li>Recommended</li>
<li>best rated movies</li>
<li>Genre
<ul class="dsub-menu">
<li>Action</li>
<li>adventure</li>
<li>Comedy</li>
<li>Sci-Fi</li>
<li>Romance</li>
<li>Animation</li>
<li>Horror</li>
<li>Fantasy</li>
<li>Crime</li>
<li>Drama</li>
<li>Mystery</li>
</ul>
</li>
</ul>
</li>
<li>TV shows</li>
<li>watch list</li>
<li>Oscar</li>
<li><small>Sign In</small></li>
</ul>
</nav>
</div>
</header>
CSS:
containers{
width: 80%;
margin: 0 auto;
}
header{
background-color: firebrick;
height: 70px;
}
header::after{
content: '';
display: table;
clear: both;
}
img{
float: left;
padding: 10px 80px;
height: 50px;
width: 150px;
}
nav{
float: right;
padding: 10px 55px;
}
nav ul{
margin: 0;
padding: 0;
list-style: none;
}
nav ul li{
display: inline-block;
margin-left: 70px;
padding-top: 23px;
position: relative;
}
nav ul li a{
color: black;
text-decoration: none;
text-transform: uppercase;
}
nav a:hover{
color: #191919;
}
nav a::before{
content: '';
display: block;
height: 5px;
width: 100px;
background-color: black;
position: absolute;
top: 0;
width: 0%;
transition: all ease-in-out 250ms;
}
nav a:hover::before{
width: 100%;
}
.sub-menu{
position: absolute;
background-color: indianred;
width: 200%;
height: 200px;
box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
display: block;
top: 60px;
right: 0;
left: -30px;
overflow: hidden;
display: none;
}
.sub-menu li {
color: #eee;
font-size: 12px;
width: 100%;
left: -65px;
padding: 15px 0;
}
nav ul li:hover ul.sub-menu{
display: block;
}
note: the CSS code that I applied here doesn't contain the other submenu.
thank you for the help

You'll need to make the sub-menu appear on link hover like this
nav li:hover .sub-menu {
display: block;
background: #fff;
}
Codepen demo

Bootstrap sidebar and page content are merged

I am attempting to use a bootstrap sidebar which on smaller screens becomes horizontal navigation. Everything is working fine except for Page content (which has to be on right side of sidebar) appears on top of sidebar.
JS Fiddle
My code:
.nav-side-menu {
overflow: auto;
font-family:'Montserrat', sans-serif;
font-size: 12px;
font-weight: 200;
background-color: #FFF;
position: fixed;
top: 0px;
width: 250px;
height: 100%;
color: #000;
border-right:solid 1px black;
}
.nav-side-menu .brand {
background-color: #FFF;
line-height: 50px;
display: block;
text-align: center;
font-size: 14px;
}
.logoimg {
width: 70%;
margin-top: 20px;
background: url('logomedium.png');
background-size: 200px 133px;
height: 133px;
width: 200px;
/* margin-left:auto;
margin-right:auto; */
margin-left:20px;
background-position: center;
margin-bottom: 80px;
}
.nav-side-menu .toggle-btn {
display: none;
}
.nav-side-menu ul,
.nav-side-menu li {
list-style: none;
padding: 0px;
margin: 0px;
line-height: 35px;
cursor: pointer;
/*
.collapsed{
.arrow:before{
font-family: FontAwesome;
content: "\f053";
display: inline-block;
padding-left:10px;
padding-right: 10px;
vertical-align: middle;
float:right;
}
}
*/
}
.nav-side-menu ul :not(collapsed) .arrow:before,
.nav-side-menu li :not(collapsed) .arrow:before {
font-family: FontAwesome;
content: "\f078";
display: inline-block;
padding-left: 10px;
padding-right: 10px;
vertical-align: middle;
float: right;
}
.nav-side-menu ul .active,
.nav-side-menu li .active {
border-left: 3px solid #eeeeee;
background-color: #eeeeee;
}
.nav-side-menu ul .sub-menu li.active,
.nav-side-menu li .sub-menu li.active {
color: #d19b3d;
}
.nav-side-menu ul .sub-menu li.active a,
.nav-side-menu li .sub-menu li.active a {
color: #d19b3d;
}
.nav-side-menu ul .sub-menu li,
.nav-side-menu li .sub-menu li {
background-color: #eeeeee;
border: none;
line-height: 28px;
border-bottom: 1px solid #23282e;
margin-left: 0px;
}
.nav-side-menu ul .sub-menu li:hover,
.nav-side-menu li .sub-menu li:hover {
background-color: #020203;
}
.nav-side-menu ul .sub-menu li:before,
.nav-side-menu li .sub-menu li:before {
font-family: FontAwesome;
content: "\f105";
display: inline-block;
padding-left: 10px;
padding-right: 10px;
vertical-align: middle;
}
.nav-side-menu li {
padding-left: 0px;
text-align: center;
/*border-left: 3px solid #2e353d; */
padding-bottom: 15px;
padding-top: 15px;
/*border-bottom: 1px solid #23282e;*/
}
.nav-side-menu li a {
text-decoration: none;
font-size:12pt;
color: #000000;
text-transform: uppercase;
vertical-align: middle;
}
.nav-side-menu li a {
padding-left: 10px;
width: 20px;
padding-right: 20px;
}
.nav-side-menu li a:focus {
outline: 0;
}
.nav-side-hr {
width: 75%;
border: none;
height: 1px;
/* Set the hr color */
color: #333; /* old IE */
background-color: #333; /* Modern Browsers */
}
.nav-side-menu li:hover {
/*border-left: 3px solid##eeeeee;*/
background-color: #eeeeee;
-webkit-transition: all 1s ease;
-moz-transition: all 1s ease;
-o-transition: all 1s ease;
-ms-transition: all 1s ease;
transition: all 1s ease;
}
#media (max-width: 767px) {
.nav-side-menu {
position: relative;
width: 100%;
margin-bottom: 10px;
}
.logoimg {
margin-top: 10px;
background: url('logohorizontal.png');
background-size: 200px 48px;
height: 48px;
margin-bottom: 10px;
width: 200px;
/* margin-left:auto;
margin-right:auto; */
margin-left: 5px;
background-position: center;
}
.nav-side-menu .toggle-btn {
display: block;
cursor: pointer;
position: absolute;
right: 10px;
top: 10px;
z-index: 10 !important;
padding: 3px;
background-color: #ffffff;
color: #AF2024;
width: 40px;
text-align: center;
}
.brand {
text-align: left !important;
font-size: 22px;
padding-left: 20px;
border-bottom: 1px solid black;
line-height: 50px !important;
}
}
#media (min-width: 767px) {
.nav-side-menu .menu-list .menu-content {
display: block;
}
}
body {
margin: 0px;
padding: 0px;
}
<div id="wrapper">
<!-- Sidebar -->
<div class="nav-side-menu">
<div class="brand"><div class="logoimg" />LOGO PLACEHOLDER</div></div>
<i class="fa fa-bars fa-2x toggle-btn" data-toggle="collapse" data-target="#menu-content"></i>
<div class="menu-list">
<ul id="menu-content" class="menu-content collapse out">
<li>
<a href="#">
<i class=""></i> About Us
</a>
</li>
<li data-toggle="collapse" data-target="#products" class="collapsed">
<i class=""></i> Services
</li>
<li>
<ul class="sub-menu collapse" id="products">
<li class="active">CSS3 Animation</li>
<li>General</li>
<li>Buttons</li>
<li>Tabs & Accordions</li>
<li>Typography</li>
<li>FontAwesome</li>
<li>Slider</li>
<li>Panels</li>
<li>Widgets</li>
<li>Bootstrap Model</li>
</ul>
</li>
<li data-toggle="collapse" data-target="#service" class="collapsed">
<i class=""></i> Contact us
</li>
<li>
<ul class="sub-menu collapse" id="service">
<li>New Service 1</li>
<li>New Service 2</li>
<li>New Service 3</li>
</ul>
</li>
<hr class="nav-side-hr" />
<li data-toggle="collapse" data-target="#new" class="collapsed">
<i class=""></i> RATES
</li>
<li>
<ul class="sub-menu collapse" id="new">
<li>New New 1</li>
<li>New New 2</li>
<li>New New 3</li>
</ul>
</li>
<li>
<a href="#">
<i class=""></i> TRACKING SYSTEM
</a>
</li>
<li>
<a href="#">
<i class=""></i> QUOTE ME
</a>
</li>
<hr class="nav-side-hr" />
<li>
<a href="#">
<i class=""></i> FIND US
</a>
</ul>
</div>
</div>
<!-- End Sidebar -->
<!-- Page Content -->
<div id="page-content-wrapper">
<div class="container-fluid">
<div class="row">
<div class="col-lg-12">
<h1>Simple Sidebar</h1>
<p>This template has a responsive menu toggling system. The menu will appear collapsed on smaller screens, and will appear non-collapsed on larger screens. When toggled using the button below, the menu will appear/disappear. On small screens, the page content will be pushed off canvas.</p>
<p>Make sure to keep all page content within the <code>#page-content-wrapper</code>.</p>
</div>
</div>
</div>
</div>
</div>
UPDATE: As suggested added padding to page-wrapper, but when I add text to page content, sidenav links stop working/hovering.
JS FIDDLE https://jsfiddle.net/y3eL6m8v/4/

In the media query you should add a padding-left with the value of the width from the sidenav to the page-content-wrapper class.
#media(min-width:768px) {
#page-content-wrapper {
padding-left: 250px;
position: relative;
}
}
Click here for a jsfiddle

Please add this in your css:
#media (min-width: 768px)
{
#page-content-wrapper
{
padding: 20px 20px 20px 250px;
position: relative;
}
}
Check this fiddle https://jsfiddle.net/y3eL6m8v/2/

When I click on image popup, it appears at the bottom instead of over the top [closed]

Closed. This question needs debugging details. It is not currently accepting answers.
Edit the question to include desired behavior, a specific problem or error, and the shortest code necessary to reproduce the problem. This will help others answer the question.
Closed 6 years ago.
Improve this question
I am trying to code a modal image gallery. I found an html code for one, that includes a little JS, but it doesn't come with any CSS. So when I click on the image, (currently only the top left one is linked up) the modal shows up at the bottom. I know nothing about JS or modals, could someone help me with what sort of code I would need to make the modal pop up over top of everything? Thanks in advance!
#font-face {
font-family: Gudea;
src: url(https://www.google.com/fonts#UsePlace:use/Collection:Gudea:400,400italic,700);
}
h1, h2, h3, h4, h5, h6, p {
margin: 0;
padding: 0;
}
p {
margin: 0 0 1em 0;
font-size: 93%;
line-height: 1.5em;
}
body {
font-family: Helvetica, Arial, sans-serif;
padding: 0;
margin: 0;
background-image: url(http://oi68.tinypic.com/9tzv4n.jpg);
}
img {
max-width: 100%;
height: auto;
margin: 0 0 10px 0;
}
/* Section Inner */
div.section-inner {
max-width: 1100px;
padding: 0 25px;
margin: 0 auto;
}
/* Header */
div.header {
background-image: url(http://oi67.tinypic.com/33dfi86.jpg);
margin-top:40px;
height: 30px;
background-color: #E9E9E9;
padding: 40px 0;
}
/*Logo*/
h1 span {
position: absolute;
top: 97px;
left: 50%;
width: 402px;
height: 160px;
margin: -80px 0 0 -201px;
text-indent: -999em;
z-index: 99;
background: url(http://www.cutcodedown.com/for_others/barrelPony/sandmannFarm/images/h1Logo.png);
}
/*Satooth Pattern*/
h2 span {
position: absolute;
top: 140px;
height: 20px;
text-indent: -999em;
z-index: 90;
background: url(http://i1377.photobucket.com/albums/ah69/danalavelle3/Sawtooth_zps67oxpl7p.png);
background-repeat: repeat-x;
width: 100%;
}
/*Sawtooth Pattern Two*/
h3 span {
position: absolute;
margin-top: -30px;
height: 40px;
text-indent: -999em;
z-index: 90;
background: url(http://i1377.photobucket.com/albums/ah69/danalavelle3/Sawtooth_zps67oxpl7p.png);
background-repeat: repeat-x;
width: 100%;
}
/* Navigation */
#mainMenuCheck {
/* display none breaks this in some browsers, so just slide it out of view */
position:absolute;
left:-999em;
}
#mainMenu {
position:relative; /* depth sort over h1 */
background:#754 url(images/dots.png) top left;
padding:0.40em 0.75em 0.05em;
/* left margin adjusts for uneven menu width, change as needed */
text-align:center;
}
#mainMenu li {
list-style:none;
display:inline;
}
#mainMenu ul:before,
#mainMenu ul:after,
#mainMenu:after,
#mainMenu a {
color:#F0E8E0;
text-shadow:
0 0 2px #000,
2px 2px 2px #000,
2px 2px 3px #000;
}
#mainMenu a {
display:inline-block;
vertical-align:bottom;
text-decoration:none;
color:#F0E8E0;
-webkit-transition:color 0.3s, text-shadow 0.3s;
transition:color 0.3s, text-shadow 0.3s;
}
#mainMenu a.current {
color:#87C6BC;
}
#mainMenu a:active,
#mainMenu a:focus,
#mainMenu a:hover {
color:#87C6BC;
}
#mainMenu a:after {
display:inline-block;
padding:0 0.1em 0 0.5em;
color:#FFF;
}
#mainMenu .lastInSet a:after {
display:none;
}
#mainMenu .setBreak {
padding-right:8em;
}
#mainMenu a:after,
#mainMenu:after,
#mainMenu ul:before,
#mainMenu ul:after {
content:"\2605";
font-family:"arial unicode ms","dejavu sans",lastresort,sans-serif;
}
#mainMenu:after,
#mainMenu ul:before,
#mainMenu ul:after {
position:absolute;
left:50%;
width:3em;
bottom: 1em;
}
#mainMenu:after {
bottom:0.3em;
font-size:150%;
margin-left:-1.5em;
}
#mainMenu ul:before {
margin-left:-3em;
}
/* Body Content */
div.body-content {
padding: 50px 0;
background-image: url(http://i1377.photobucket.com/albums/ah69/danalavelle3/Page_zpscom5uhou.png);
font-family: Gudea;
}
div.center{
width:100%;
}
/*
#heart-header {
width: 50%;
height:auto;
margin-left: auto;
margin-right: auto;
display: block;
}
/*float left*/ .left { float: left; /*left in our text*/ margin: 20px; /*space around the image*/
}
/*float left*/ .right { float: right; margin: 20px; /*space around the image*/
}
#media screen and (max-width: 793px){
.left{
margin:0;
width:100%;
display: block;
float: none;
}
.right{
margin:0 auto;
width:75%;
display: block;
float: none;
}
}
}
/*
div.center h2 {
margin: 0;
font-size: 30px;
font-size: 3.5vw;
font-family: Gudea;
font-weight: bold;
position: absolute;
top:60%;
left: 50%;
margin-right: -50%;
transform: translate(-50%, -50%) }
/* Thirds */
div.thirds {
padding-bottom: 50px;
text-align: center;
font-family: Gudea;
}
div.button1 {
width:90px;
height:40px;
margin-left: 38%;
}
div.one-third {
width: 30%;
float: left;
margin-right: 5%;
text-align: center;
font-family: Gudea;
}
div.button2 {
width:90px;
height:40px;
margin-left: 38%;
}
div.one-third-last {
margin: 0;
text-align: center;
font-family: Gudea;
}
div.button3 {
width:90px;
height:40px;
margin-left: 38%;
}
/*Level Two*/
div.four {
padding-bottom: 50px;
text-align: center;
font-family: Gudea;
}
div.button4 {
width:90px;
height:40px;
margin-left: 38%;
}
div.five {
width: 30%;
float: left;
margin-right: 5%;
text-align: center;
font-family: Gudea;
}
div.button5 {
width:90px;
height:40px;
margin-left: 38%;
}
div.six {
margin: 0;
text-align: center;
font-family: Gudea;
}
div.button6 {
width:90px;
height:40px;
margin-left: 38%;
}
.flex {
padding: 4px;
display: flex;
flex-wrap: wrap;
}
.flex {
padding: 4px;
margin-right: 2%;
display: flex;
flex-wrap: wrap;
}
.item {
width: 30%;
margin-left:3%;
margin-bottom: 20px;
text-align: center;
}
/**/
h2 {
color:#4EB4AC;
font-family: Gudea;
font-size: 20px;
}
/* Main Column */
div.main {
width: 100%;
float: left;
margin-top: -30px;
margin-right: 5%;
text-align: center;
font-family: Gudea;
position: relative;
}
/* Footer */
div.footer {
background-image: url(http://oi67.tinypic.com/33dfi86.jpg);
margin-top: 30px;
margin-bottom: 30px;
color: #FFF;
padding: 15px 0;
text-align: center;
}
.clearfix:before, .clearfix:after { content: ""; display: table; }
.clearfix:after { clear: both; }
.clearfix { *zoom: 1; }
/*Mobile Nav*/
#media (min-width:900px) {
.header2 {
display: none;
}
.menu {
display: none;
}
}
#media (max-width:900px) {
body {
z-index: 100;
margin:;
font-family: font:bold 16px/18px arial,helvetica,sans-serif;
background-color: #f4f4f4;
}
a {
color: #F8F4E6;
text-shadow:
0 0 5px #000,
5px 5px 5px #754;
}
.menu a:before,
.menu ul:before,
.menu ul:before {
content:"\2605";
}
/* header */
.header2 {
background-color:#6A4E39;
box-shadow: 1px 1px 4px 0 rgba(0,0,0,.1);
position: relative;
width: 100%;
z-index: 3;
}
.header2 ul {
margin: 0;
padding: 0;
list-style: none;
overflow: hidden;
background-image:none;
}
.header2 li a {
display: block;
padding: 20px 20px;
border-right: 1px solid #f4f4f4;
text-decoration: none;
}
.header2 li a:hover,
.header2 .menu-btn:hover {
background-color:#4EB4AC;
}
.header2 .logo {
display: block;
float: left;
font-size: 15px;
padding: 10px 20px;
margin-top: 15px;
text-decoration: none;
}
/* menu */
.header2 .menu {
clear: both;
max-height: 0;
transition: max-height .2s ease-out;
}
/* menu icon */
.header2 .menu-icon {
cursor: pointer;
display: inline-block;
float: right;
padding: 28px 20px;
position: relative;
user-select: none;
}
.header2 .menu-icon .navicon {
background: #F8F4E6;
display: block;
height: 2px;
position: relative;
transition: background .2s ease-out;
width: 18px;
}
.header2 .menu-icon .navicon:before,
.header2 .menu-icon .navicon:after {
background: #F8F4E6;
content: '';
display: block;
height: 100%;
position: absolute;
transition: all .2s ease-out;
width: 100%;
margin-top: 7px;
}
.header2 .menu-icon .navicon:before {
top: 03px;
}
.header2 .menu-icon .navicon:after {
top: -2px;
}
/* menu btn */
.header2 .menu-btn {
display: none;
}
.header2 .menu-btn:checked ~ .menu {
max-height: none;
}
.header2 .menu-btn:checked ~ .menu-icon .navicon {
background: transparent;
}
.header2 .menu-btn:checked ~ .menu-icon .navicon:before {
transform: rotate(-45deg);
}
.header2 .menu-btn:checked ~ .menu-icon .navicon:after {
transform: rotate(45deg);
}
.header2 .menu-btn:checked ~ .menu-icon:not(.steps) .navicon:before,
.header2 .menu-btn:checked ~ .menu-icon:not(.steps) .navicon:after {
top: 0;
}
}
/* 48em = 768px */
#media (max-width: 899px) {
#mainMenu {
display: none;
justify-content: center;
}
/* section */
.section {
overflow: hidden;
margin: auto;
max-width: 1400px;
}
.section a {
position: relative;
float: left;
width: 100%;
}
.section a img {
width: 100%;
display: block;
}
.section a span {
color: #fff;
position: absolute;
left: 5%;
bottom: 5%;
font-size: 2em;
text-shadow: 1px 1px 0 #000;
}
.section-split a span {
display: none;
}
.section-split a:hover span {
display: block;
}
/* 48em = 768px */
#media (min-width: 48em) {
.section-split a {
width: 50%;
}
}
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
<title>Sandmann Farm</title>
<meta name="viewport" content="width=device-width">
<!-- css -->
<link rel="stylesheet" href="css/main.css">
<link rel="stylesheet" href="css/responsive.css" media="screen and (max-width: 900px)">
</head>
<body>
<!--Logo-->
<h1>
<a href="/">
<span>-</span>
</a>
</h1>
<!--Sawtooth Pattern-->
<h2>
<a href="/">
<span>-</span>
</a>
</h2>
<!-- Header -->
<div class="header"><div class="section-inner">
</div></div>
<!-- Navigation -->
<div id="container">
<input type="checkbox" id="mainMenuCheck">
<label for="mainMenuCheck"></label>
<div id="mainMenu">
<ul>
<li>Home</li>
<li>About</li>
<li>What We Do</li>
<li class="lastInSet setBreak">Events</li>
<li>Success Stories</li>
<li>Contact</li>
<li>Photos</li>
<li class="lastInSet">Blog</li>
</ul>
</div>
<!--Mobile Navigation-->
<link href="http://fonts.googleapis.com/css?family=Droid+Serif" rel="stylesheet" type="text/css" />
<header class="header2">
Navigation
<input class="menu-btn" type="checkbox" id="menu-btn" />
<label class="menu-icon" for="menu-btn"><span class="navicon"></span></label>
<ul class="menu">
<li> Home</li>
<li> About</li>
<li> What We Do</li>
<li> Events</li>
<li> Success Stories</li>
<li> Contact</li>
<li> Photos</li>
<li> Blog</li>
</ul>
</header>
<!-- Body-Content -->
<div class="body-content"><div class="section-inner">
<div class="flex">
<div class="item">
<div><img src="http://static1.squarespace.com/static/5461836ee4b073a05b541f40/t/548df630e4b023e5238f8546/1418589745114/0image.jpg" style="width:100%;cursor:pointer"
onclick="onClick(this)" class="w3-hover-opacity"></div>
<div class="button3">
</div>
</div>
<div class="item">
<div><img src="http://static1.squarespace.com/static/5461836ee4b073a05b541f40/t/548df630e4b023e5238f8546/1418589745114/0image.jpg"></div>
<div class="button3">
</div>
</div>
<div class="item">
<div><img src="http://static1.squarespace.com/static/5461836ee4b073a05b541f40/t/548df630e4b023e5238f8546/1418589745114/0image.jpg"></div>
<div class="button3">
</div>
</div>
<div class="item">
<div><img src="http://static1.squarespace.com/static/5461836ee4b073a05b541f40/t/548df630e4b023e5238f8546/1418589745114/0image.jpg"></div>
<div class="button3">
</div>
</div>
<div class="item">
<div><img src="http://static1.squarespace.com/static/5461836ee4b073a05b541f40/t/548df630e4b023e5238f8546/1418589745114/0image.jpg"></div>
<div class="button3">
</div>
</div>
<div class="item">
<div><img src="http://static1.squarespace.com/static/5461836ee4b073a05b541f40/t/548df630e4b023e5238f8546/1418589745114/0image.jpg"></div>
</div>
</div>
</div>
<div id="modal01" class="w3-modal" onclick="this.style.display='none'">
<span class="w3-closebtn w3-hover-red w3-text-white w3-xxlarge w3-container w3-display-topright">×</span>
<div class="w3-modal-content w3-animate-zoom">
<img id="img01" style="width:100%">
</div>
</div>
<script>
function onClick(element) {
document.getElementById("img01").src = element.src;
document.getElementById("modal01").style.display = "block";
}
</script>
</div></div><!--/body-content-->
<!--Sawtooth Pattern Two-->
<h3>
<a href="/">
<span>-</span>
</a>
</h3>
<!-- Footer -->
<div class="footer"><div class="section-inner">
<p>Footer text placed here.</p>
</div></div>
</body>
</html>

You can just add a bit of CSS:
#modal01 {
position: absolute;
top: 0;
width: 100%;
z-index: 999;
}
See the example on codepen: http://codepen.io/anon/pen/XjJAdw

Let's focus in on what modals exactly are. Take a look at this.
Basically, inside your head tag, add this code.
<link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
<script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
On your img tags, add this code.
<img data-toggle="modal" data-target="#myModal" src="http://static1.squarespace.com/static/5461836ee4b073a05b541f40/t/548df630e4b023e5238f8546/1418589745114/0image.jpg">
This is how to make your modal.
<div class="modal fade" id="myModal" role="dialog">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal">×</button>
<h4 class="modal-title">Modal Header</h4>
</div>
<div class="modal-body">
<p>Some text in the modal.</p>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
</div>
</div>
</div>

Show sublinks in mobile view

I have different sublinks in my navigation bar. I'd like to collapse the navigation bar in mobile view (got that already) but it doesn't display all links
HTML
<nav class= "clearfix">
<ul class="clearfix navigation">
<li>
Bewerbung
<ul class="sub-menu" id="push">
<li>Motivation</li>
<li>Lebenslauf</li>
<li>Downloads</li>
</ul>
</li>
<li>
home
<ul class="sub-menu" id="push">
<li>Kontakt</li>
</ul>
</li>
<li>
Projekte
<ul class="sub-menu" id="push">
<li>Photographie</li>
<li>3D Animation</li>
</ul>
</li>
</ul>
Menu
</nav>
CSS
nav a {
transition:all linear 0.15s;
color: #fff;
display: table;
width: 250px;
text-align: center;
text-decoration: none;
line-height: 50px;
}
nav a:hover, nav a:active {
background-color: #ffffff;
color: #1D424A;
}
nav a#pull {
display: none;
}
nav a#mobile {
display: none;
}
.sub-menu{
display:none;
}
nav li:hover .sub-menu {
display: inline-block;
z-index:1;
opacity:1;
}
.sub-menu {
width:250px;
padding:0px 0px;
position: absolute;
top:100%;
z-index:-1;
opacity:0;
transition:opacity linear 0.15s;
background:#1D424A;
}
.sub-menu li {
display:block;
font-size:16px;
color: #363636;
}
.sub-menu li a {
padding:0px 0px;
display:block;
}
.sub-menu li a:hover, .sub-menu .current-item a {
background:#fff;
}
CSS in mobile view
nav {
height: auto;
border-bottom: 0;
}
nav ul {
display: none;
height: auto;
}
nav a#pull {
display: block;
background-color: #6A6A6A;
width: 100%;
position: relative;
margin-top: 0px;
color: #ffffff;
}
nav a#pull:after {
content:"";
width: 30px;
height: 20px;
display: inline-block;
position: relative;
right: 15px;
top: 10px;
margin-top: 0px;
}
nav li {
width: 100%;
float: left;
position: relative;
}
nav li a {
border-bottom: 1px solid #FFF;
}
nav a {
text-align: left;
width: 100%;
text-indent: 25px;
margin-top: 0px;
}
.sub-menu{
display: block;
}
JAVASCRIPT
$(function() {
var pull = $('#pull'),
menu = $('nav ul'),
menuHeight = menu.height();
$(pull).on('click', function(e) {
e.preventDefault();
menu.slideToggle();
});
});
$(window).resize(function() {
var w = $(window).width();
if(w > 320 && menu.is(':hidden')) {
menu.removeAttr('style');
}
});
http://ti-sign.ch/navbar/

It's because of the fixed height of 50px on .navigation :
.navigation {
list-style: none;
overflow: hidden;
padding: 0;
margin: 0 auto;
width: 750px;
height: 50px; /* remove that line and it works */
}

keep submenu on top and keep contents of div from moving around and size

I am following up on this question and answer:
Sub-menu expanding parent div instead of displaying on top
If there is a div below the menu in the example above, how do you keep 1) that div contents from moving around, and 2) the size of the div from moving around, yet keep it responsive?
For example I forked the js fiddle from the link above and created the div id="mytest". I'd like the menu and the "mytest" div to be completely independent when you hover over the "About Me" link. Here is my fork: http://jsfiddle.net/nXqn8/
Here is the code:
<div id="menu">
<ul>
<li><a id="" class="" href="">Home</a></li>
<li><a id="" class="" href="">About Me</a>
<ul class="sub-menu">
<li>Biography</li>
<li>Photo Galery</li>
<li>Foot Print</li>
</ul>
</li>
<li><a id="" class="" href="">Expertise</a></li>
<li><a id="" class="" href="">Projects</a>
<ul class="sub-menu">
<li>Geo 228 Portal</li>
<li>NEP Application</li>
<li>Geo Address Book</li>
<li>Assets Management</li>
</ul>
</li>
<li><a id="" class="" href="">Contact</a></li>
</ul>
</div>
<div id="mytest"> xxxxxxxxxxxxxxxxxxxxxxxxxx Please stop me from moving around!!! xxxxxxxxxxxxxxxxxxxxxxxxxxxxxx </div>
css:
#menu {
position: relative;
font-size: 0.8em;
margin: 0;
padding: 0;
background-color: #666666;
border-top: 1px solid #999;
border-bottom: 1px solid #999;
overflow: visible;
z-index: 2;
height: 35px;
}
#menu ul {
position: relative;
margin: 0;
padding: 0;
list-style: none;
z-index: 3;
}
#menu li {
display: block;
width: 120px;
float: left;
border-right: 1px solid #999;
z-index: 4;
}
#menu a {
color: #ffffff;
font-weight: bold;
display: block;
text-align: center;
text-decoration: none;
text-transform: uppercase;
margin: 0;
padding: 10px 20px;
}
#menu a:hover {
color: #000000;
margin: 5px 10px;
padding: 5px 10px;
background-color: #C0C0C0;
border-radius: 10px;
}
#menu ul.sub-menu {
display: none;
position: relative;
}
#menu ul.sub-menu li {
width: 200px;
background-color: #C0C0C0;
border-width: 0 1px 1px 1px;
border-style: solid;
border-color: #666666;
}
#menu ul.sub-menu li a {
color: #000;
text-align: center;
margin: 5px 10px;
padding: 5px 10px;
}
#menu ul.sub-menu li a:hover {
color: snow;
background-color: #666666;
}
#menu li:hover ul.sub-menu {
display: block;
z-index: 90;
}
#mytest {
background-color: red;
}
Ultimately, I have after something like the main menus you see at the top of accenture dot com.
Thanks!

#menu li {
position:relative;
}
#menu ul.sub-menu {
display: none;
position: absolute;
left: 0;
top: 100%;
}
#mytest {
float:left;
background-color: red;
width:100%;
text-align: center;
}
DEMO

Define your #menu li position: relative and define your sub menu #menu ul.sub-menu position: absolute; left: 0; top: 100%;
as this css
#menu li {
position:relative;
}
#menu ul.sub-menu {
display: none;
position: absolute;
left: 0;
top: 100%;
}
Demo