Responsive navigation menu aligning - javascript

I have a problem with my responsive navigation. My menu is aligned only on contact page. I tried different approach like changing it from inline-block to block to flex, but with no success.I put to sidemenu text-align:center. Can someone help me to fix it?
<header class="header">
<div class="logo">
<img src="assets/img/ermita-logo.png" alt="Solaia" height="40px" width="auto">
</div>
<nav>
<div id="mainbox" onclick="openFunction()"><i class="fas fa-bars"></i>
</div>
<div id="menu" class="sidemenu">
Home
Wines
Winery
Awards
Contact
×
</div>
</nav>
</header>
CSS
#media screen and (max-width: 600px){
#mainbox{
display:flex;
float:right;
padding-right: 30px;
}
.header{
height: 70px;
position: absolute;
width: 100%;
}
.sidemenu .closebtn{display:block;}
.sidemenu{
display: inline-block;
position: fixed;
top: 0px;
right: 0px;
height: 100%;
width: 0px;
background-color:black;
z-index: 1;
padding-top: 100px;
overflow-x: hidden;
transition: all .5s;
text-align: center;
float:none;
}
.sidemenu a{
display:block;
padding:20px 10px;
text-decoration: none;
font-size: 20px;
color:white;
}
Javascript
function openFunction(){
document.getElementById("menu").style.width="100%";
document.getElementById("mainbox").style.marginLeft="300px";
}
function closeFunction(e){
e = e || window.event;
e.preventDefault();
document.getElementById("menu").style.width="0px";
document.getElementById("mainbox").style.marginLeft="0px";
;
}

#m
edia screen and (max-width: 600px){
#mainbox{
display:flex;
float:right;
padding-right: 30px;
}
.header{
height: 70px;
position: absolute;
width: 100%;
}
.sidemenu .closebtn{display:block;}
.sidemenu{
display: block;
top: 0px;
right: 0px;
height: 100%;
background-color: black;
z-index: 1;
overflow-x: hidden;
transition: all .5s;
float: none;
}
.sidemenu a{
display:block;
padding:20px 10px;
text-decoration: none;
font-size: 20px;
color:white;
}
}

Related

Unable to display content behind navbar when fixed position

I have a simple react app which displays my navbar, but whenever i do its position fixed; it stays at top but the content does not hide behind.
My navbar:
class Nav extends Component {
render() {
return (
<div>
<header className="toolbar">
<nav className="toolbar__navigation">
<div className="toolbar__toggle-button">
<DrawerButton drawer={this.props.drawer} click={this.props.drawerClickHandler} />
</div>
<img className="Nav__Logo-A" src={Mylogo} alt=""/>
<div className="toolbar__logo">Akcosh</div>
<div className="spacer"></div>
<div className="toolbar_navigation-items">
<ul>
<li>Software</li>
<li>About</li>
<li>Profile</li>
<li>Contact</li>
</ul>
</div>
</nav>
</header>
</div>
)
}
}
my css:
.toolbar{
width: 100%;
position: fixed;
background-color: #212121;
top: 0;
left: 0;
height: 45px;
}
.toolbar__logo{
margin-left: 1rem;
}
.toolbar__navigation {
display: flex;
align-items: center;
height: 100%;
padding: 0 1rem;
}
.toolbar__logo a{
color: #282828;;
text-decoration: none;
font-size: 1.5rem;
}
.spacer{
flex: 1;
}
.toolbar_navigation-items ul{
list-style: none;
margin: 0;
padding: 0;
display: flex;
}
.toolbar_navigation-items li{
padding: 0 0.5rem;
}
.toolbar_navigation-items a{
color: white;
text-decoration: none;
}
.toolbar_navigation-items a:hover,
.toolbar_navigation-items a:active{
color: aqua;
}
#media(max-width: 768px){
.toolbar_navigation-items{
display: none;
}
.toolbar{
height: 68px;
border-bottom: 1px solid #aca4a4;
background-color: #e5e3e30a;
}
.toolbar__logo a{
font-family: Roboto,Helvetica,sans-serif;
letter-spacing: 1.6px;
font-size: 20px;
margin-left: 5px;
font-weight: 400;
}
.Nav__Logo-A{
animation-name: out;
position: absolute;
height: 210%;
width:100%;
left: -36%;
margin-top: 9px;
transition: .4s all;
}
.Nav__Logo-A:hover{
cursor: default;
transform: rotate(360deg);
left: -36%;
margin-top: 10px;
}
}
}
I have tried everything but nothing is working; i want my navbar fixed on top and content behind it, if i have some other component below the Nav component, i want its content/text to go behind nav because it is fixed at top
try to modify the z-index so it can stay on top
.toolbar{
width: 100%;
position: fixed;
background-color: #212121;
top: 0;
left: 0;
height: 45px;
z-index:2; // or some bigger value
}
One thing you can try is setting the z indexes!
.toolbar{
width: 100%;
position: fixed;
background-color: #212121;
top: 0;
left: 0;
height: 45px;
z-index:99;
}
And then after that, if your content is still displaying in front of the navbar, go into that items CSS class and add
.exampleClass {
z-index:-1;
}

Scroll position problem with resposive navigation

I have problem with resposive navigation that i worked on.The problem is that when i open and then closed the menu it's take me back to the beginning of the page.I want when open and then closed the menu scroll position to be the same as that before opening the menu.How to make that?
HTML
<header class="header">
<div class="logo">
<h2>LOGO</h2>
</div>
<nav>
<div id="mainbox" onclick="openFunction()"><i class="fas fa-bars"></i></div>
<div id="menu" class="sidemenu">
Home
About
Contact
Login
×
</div>
</nav>
</header>
CSS
#mainbox{
font-size: 24px;
cursor: pointer;
transition: all .6s;
display:none;
}
.sidemenu{
background-color: #222;
color:#999;
float:right;
}
.sidemenu a{
padding:20px 20px;
text-decoration: none;
font-size: 20px;
color: #999;
display: inline-block;
}
.sidemenu a:hover{
color: white;
}
.sidemenu .closebtn{
position: absolute;
top: -15px;
right: 15px;
font-size: 36px;
margin-left: 0px;
display:none;
}
.fas{
color:#999;
margin-top:20px;
margin-right:32px;
}
.fas:hover{
color:white;
}
#media screen and (max-width: 600px){
#mainbox{
display:block;
float:right;
}
.header{
position: fixed;
top: 0;
width: 100%;
}
.sidemenu .closebtn{display:block;}
.sidemenu{
display:block;
position: fixed;
top: 0px;
right: 0px;
height: 100%;
width: 0px;
background-color: #222;
z-index: 1;
padding-top: 100px;
overflow-x: hidden;
transition: all .5s;
text-align: center;
}
.sidemenu a{
display:block;
text-decoration: none;
font-size: 20px;
color: #999;
}
}
Javascript
function openFunction(){
document.getElementById("menu").style.width="100%";
document.getElementById("mainbox").style.marginLeft="300px";
}
function closeFunction(){
document.getElementById("menu").style.width="0px";
document.getElementById("mainbox").style.marginLeft="0px";
}
It's because of your href="#", just add e.preventDefault() to close function.
html
×
js
function closeFunction(e){
e = e || window.event;
e.preventDefault()
document.getElementById("menu").style.width="0px";
document.getElementById("mainbox").style.marginLeft="0px";
}
Hope it will work for you

classList toggle(show) doesn't show the dropdown content

I would like to toggle on the "cart" of my website. When it is clicked,there will be a dropdown block. It works well on my another website and I almost copy its right code but it just doesn't show the dropdown content on this website. Would someone help me explain it?
html:
function myFunction(){
document.getElementById("drop").classList.toggle("show");
}
div.icon
{
top:25px;
position:absolute;
right:20px;
float:left;
display:inline-block;
}
div.dropdown
{
position: absolute;
background-color:#F1F1F1;
min-width: 160px;
z-index: 1;
height:215px;
width:400px;
text-align:center;
top:30px;
right:-6px;
}
.dropdown a
{
text-decoration:none;
color:black;
background-color:#E9E9E9;
position:absolute;
width:100%;
bottom:0;
left:0;
padding:13px 0 13px 0;
font-size:11px;
}
.dropdown p
{
position:absolute;
top:100px;
width:100%;
font-size:13.4px;
}
.icon .dropdown::after
{
content: "";
position: absolute;
bottom: 100%;
right: 7%;
margin-left: -5px;
border-width: 5px;
border-style: solid;
border-color: transparent transparent #F1F1F1; transparent;
}
.show
{
display:block;
}
<div>
<div class="icon">
<p class="menu-right" style="color:white;font-size:14px;font-family:Roboto; cursor:pointer;" onclick="myFunction()"><i class="fa fa-shopping-cart" style="color:white;"></i> Cart</p>
<div class="dropdown" id="drop">
<p>Your shopping cart is empty</p>
<a style="color:black;" href="#">CONTINUE SHOPPING <small>&gt</small></a>
</div>
</div>
The above is the html code. The cart is in the icon class. I create a cart div and a dropdown div. When the cart is be clicked, the dropdown block should appear.
You have div.dropdown in your CSS it's overshadowing .show: https://developer.mozilla.org/docs/Web/CSS/Specificity
Use just .dropdown instead.
div.red {
background-color: red;
}
.blue {
background-color: blue;
}
<div class="red blue">blue</div>
<!--div would be blue if you change div.red to .red-->
it seems your inner element has not a event listener.
a way to do that would be
function myFunction() {
this.classList.toggle("show");
}
document.getElementById("inner").addEventListener('click', myFunction)
There's nothing wrong with your toggle, your CSS is just off. The class show is not applying because of div.dropdown taking priority. I've modified example below.
function myFunction() {
document.getElementById("inner").classList.toggle('show')
}
div.icon {
top: 25px;
position: absolute;
right: 20px;
float: left;
display: inline-block;
background-color: black;
}
.dropdown {
display: none;
position: absolute;
background-color: #F1F1F1;
min-width: 160px;
z-index: 1;
height: 215px;
width: 400px;
text-align: center;
top: 30px;
right: -6px;
}
.dropdown a {
text-decoration: none;
color: black;
background-color: #E9E9E9;
position: absolute;
width: 100%;
bottom: 0;
left: 0;
padding: 13px 0 13px 0;
font-size: 11px;
}
.dropdown p {
position: absolute;
top: 100px;
width: 100%;
font-size: 13.4px;
}
.icon .dropdown::after {
content: "";
position: absolute;
bottom: 100%;
right: 7%;
margin-left: -5px;
border-width: 5px;
border-style: solid;
border-color: transparent transparent #F1F1F1;
transparent;
}
.show {
display: block;
}
<div class="icon">
<p style="color:white;font-size:14px;font-family:Roboto; cursor:pointer;" onclick="myFunction()"> Cart</p>
<div class="dropdown" id="inner">
<p>Your shopping cart is empty</p>
<a style="color:black;" href="#">CONTINUE SHOPPING <small>&gt</small></a>
</div>
</div>

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>

menu wont show or work

My menu on my page will not work, it is not at all visible. I set it up on a codepen which works fine but now when I have tried to implement it, it failed to work. Where is it?
Still new to coding but would appreciate help.
HTML:
<body>
<nav class="menu-opener">
<div class="menu-opener-inner"></div>
</nav>
<nav class="menu">
<ul class="menu-inner">
<a href="#" class="menu-link">
<li>home.</li>
</a>
<a href="#" class="menu-link">
<li>portfolio.</li>
</a>
<a href="#" class="menu-link">
<li>about.</li>
</a>
<a href="#" class="menu-link">
<li>contact.</li>
</a>
</ul>
</nav>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>
<script type="text/javascript">
$(".menu-opener").click(function(){
$(".menu-opener, .menu-opener-inner, .menu").toggleClass("active");
});
</script>
<div class="hero1">
<div id="hero1title"><h1>simplicity, craft and format <br>is what excites me as a designer</h1></div>
</div>
</body>
CSS:
html,body {
padding:0;
margin:0;
height:100%
}
body {
overflow:hidden
}
/*--Homepage*/
p.footertext {
position:absolute;
left:20px;
bottom:10px;
font-size:12px;
z-index:1
}
#media only screen and (max-width : 400px) {
p.footertext {
display:none
}
}
.hero1{
position: absolute;
top: 0;
left: 0;
width: 100%;
height:100%;
background-color: rgb(247,200,198);
}
div #hero1title h1{
color: white;
font-size: 90pt;
position: absolute;
width: 100%;
height: 100%;
top: 30%;
text-align: center;
}
/* Menu styling*/
%transition {
transition: 250ms all;
}
.menu-opener {
background: none;
cursor: pointer;
height: 4rem;
margin: 1rem;
position: absolute;
user-select: none;
width: 4rem;
}
.menu-opener-inner {
background: white;
height: .5rem;
margin-left: .75rem;
margin-top: 1.75rem;
width: 2.5rem;
#extend %transition;
&::before, &::after {
background: white;
content: '';
display: block;
height: 8px;
width: 2.5rem;
#extend %transition;
}
&::before {
transform: translateY(-.75rem);
}
&::after {
transform: translateY(.25rem);
}
&.active {
background: transparent;
&::before {
transform: translateY(0rem) rotate(-45deg);
}
&::after {
transform: translateY(-.5rem) translateX(-0rem) rotate(45deg)
}
}
}
.menu {
background: rgb(152, 211, 189);
height: 100%;
position: absolute;
top: 0px;
user-select: none;
width: 0rem;
z-index: -1;
#extend %transition;
&.active {
width: 100%;
#extend %transition;
& .menu-link {
color: white;
}
}
}
.menu-inner {
display: block;
flex-direction: row;
height: 450px;
list-style-type: none;
margin-top: 15%;
padding: 0;
}
.menu-link {
color: transparent;
display: flex;
flex: 1 1 auto;
font-size: 70px;
font-family: 'Calibre-Semibold';
height: 25%;
text-align: center;
text-decoration: none;
li {
margin: auto;
}
}
I dropped it all into a fiddle, and I find the following things:
The z-index shouldn't be -1
It's there. But you need to highlight it to see it.
The text is styled horribly, so it doesn't look so great.
Your text color in menu-list is set to "transparent".
Your HREFs should be inside the "li" not outside.

Categories