I'm creating a very simple sidenav for a mobile app. I followed this example.
Everything is working fine, except that when I close the menu, if you pay attention, my menu items <a> tags are "breaking" as the sidebar shrinks back to place. If you see the example code from above, their menu items do not break.
Here's my code.
function openNav() {
document.getElementById("sidenav").style.width = "80%";
}
function closeNav() {
document.getElementById("sidenav").style.width = "0";
}
/*-- Top Navbar --*/
.top-navbar {
width: 100%;
height: 8%;
background-color: #E4E4E4;
font-size: 1.5em;
padding-top: 2%;
}
.top-navbar span {
margin-left: 4%;
padding-top: 2%;
color: #2c2c2c;
}
/*-- Sidebar --*/
.sidenav {
height: 100%;
width: 0;
position: fixed;
z-index: 1;
top: 0;
left: 0;
background-color: #E4E4E4;
overflow-x: hidden;
transition: 0.5s;
padding-top: 60px;
}
.sidenav a {
padding: 8px 8px 8px 32px;
text-decoration: none;
font-size: 1em;
color: #2C2C2C;;
display: block;
transition: 0.3s;
}
.sidenav a:hover {
color: #9F2241;
}
/*.sidenav a:before {
content: "";
display: block;
background: url(../img/icono-retirar.svg) no-repeat;
width: 20px;
height: 20px;
float: left;
margin-left: 0 6px 0 0;
}
*/
.sidenav .closebtn {
position: absolute;
top: 0;
right: 25px;
font-size: 36px;
margin-left: 50px;
color: #2c2c2c;
}
<div id="sidenav" class="sidenav">
×
Haz un retiro
Invita un amigo
Ayuda
Términos y condiciones
Cerrar sesión
</div>
<div class="top-navbar">
<span onclick="openNav()">☰</span>
</div>
Add white-space:nowrap; to your .sidenav a css rule.
Related
I'm still new to this website making, and I'm having trouble with w3 schools Light box. I'm trying to move the images around but every time I do manage to move them it seems to look worse and worse. I have messed around with the CSS but still can't figure it out.
im trying so that the images look something like this gallerybut still make it use the lightbox.
source code:
<!doctype html>
<html>
<head>
<meta charset="UTF-8">
<title>alithroughthelens</title>
<link href="css/styles.css" rel="stylesheet" type="text/css">
<link rel="preconnect" href="https://fonts.gstatic.com">
<link href="https://fonts.googleapis.com/css2?family=Cinzel+Decorative&display=swap" rel="stylesheet">
</head>
<body class="body">
<div id="sideNavigation" class="sidenav"><script>
function openNav() {
document.getElementById("sideNavigation").style.width = "250px";
document.getElementById("main").style.marginLeft = "250px";
}
function closeNav() {
document.getElementById("sideNavigation").style.width = "0";
document.getElementById("main").style.marginLeft = "0";
}
</script>
×
Home
Cuando Sale el Sol
Obscurité et la Lumiere
la Vie en Couleur
Vacante
About Me
</div>
<nav class="topnav">
<a href="#" onclick="openNav()">
<svg width="30" height="30" id="icoOpen">
<path d="M0,5 30,5" stroke="#000" stroke-width="5"/>
<path d="M0,14 30,14" stroke="#000" stroke-width="5"/>
<path d="M0,23 30,23" stroke="#000" stroke-width="5"/>
</svg>
</a>
</nav>
<div id="main">
<h1 class="header">Alithroughthelens</h1>
<img src="Home/Artist copy.png" alt="" width="5918" height="3945" class="homeimg"/> </div>
</body>
</html>
css:
html, body,{
position:fixed;
top:0;
bottom:0;
left:0;
right:0;
height: 100%;
margin: auto;
width: 960px;
overflow: hidden;
}
/* The side navigation menu */
.sidenav {
height: 100%; /* 100% Full-height */
width: 0; /* 0 width - change this with JavaScript */
position: fixed; /* Stay in place */
z-index: 1; /* Stay on top */
top: 0;
left: 0;
background-color: #B7B7A4;
overflow-x: hidden; /* Disable horizontal scroll */
padding-top: 60px; /* Place content 60px from the top */
transition: 0.5s; /* 0.5 second transition effect to slide in the sidenav */
}
/* The navigation menu links */
.sidenav a {
padding: 8px 8px 8px 32px;
text-decoration: none;
font-size: 18px;
color: #6B705C;
display: block;
transition: 0.3s;
font-family: 'Cinzel Decorative', cursive;
}
/* When you mouse over the navigation links, change their color */
.sidenav a:hover, .offcanvas a:focus{
color: #FFE8D6;
}
/* Position and style the close button (top right corner) */
.sidenav .closebtn {
position: absolute;
top: 0;
right: 25px;
font-size: 36px;
margin-left: 50px;
}
/* Style page content - use this if you want to push the page content to the right when you open the side navigation */
#main {
transition: margin-left .5s;
padding: 20px;
overflow:hidden;
width:100%;
}
body {
overflow-x: hidden;
}
/* Add a black background color to the top navigation */
.topnav {
}
/* Style the links inside the navigation bar */
.topnav a {
float: left;
text-align: center;
padding: 14px 16px;
text-decoration: none;
font-size: 17px;
}
/* Change the color of links on hover */
.topnav a:hover {
background-color: #ddd;
color:#6B705C;
}
/* Add a color to the active/current link */
.topnav a.active {
background-color:#6B705C;
color:#6B705C;
}
/* On smaller screens, where height is less than 450px, change the style of the sidenav (less padding and a smaller font size) */
#media screen and (max-height: 450px) {
.sidenav {padding-top: 15px;}
.sidenav a {font-size: 18px;}
}
a svg{
transition:all .5s ease;
&:hover{
#transform:rotate(180deg);
}
}
#ico{
display: none;
}
.menu{
background: #000;
display: none;
padding: 5px;
width: 320px;
#include border-radius(5px);
#transition: all 0.5s ease;
a{
display: block;
color: #fff;
text-align: center;
padding: 10px 2px;
margin: 3px 0;
text-decoration: none;
background: #444;
&:nth-child(1){
margin-top: 0;
#include border-radius(3px 3px 0 0 );
}
&:nth-child(5){
margin-bottom: 0;
#include border-radius(0 0 3px 3px);
}
&:hover{
background: #555;
}
}
}
.body {
background-color: #FFE8D6;
}
.header {
font-family: 'Cinzel Decorative', cursive;
padding-right: 64px;
position: static;
left: 41px;
padding-left: 64px;
text-align: center;
color: #6B705C;
padding-top: 0px;
margin-top: -10px;
font-size: 35px;
font-size: 5vw;
}
.homeimg {
display: block;
margin-left: auto;
margin-right: auto;
width: 60%;
height: auto;
}
.row > .column {
padding: 0 8px;
}
.row:after {
content: "";
display: table;
clear: both;
}
/* Create four equal columns that floats next to eachother */
.column {
float: left;
height: auto;
width: 24%;
}
/* The Modal (background) */
.modal {
display: none;
position: fixed;
z-index: 1;
padding-top: 100px;
left: 0;
top: 0;
width: 100%;
height: 100%;
overflow: auto;
background-color: #6B705C;
}
/* Modal Content */
.modal-content {
position: relative;
background-color: #fefefe;
margin: auto;
padding: 0;
width: 90%;
max-width: 1200px;
}
/* The Close Button */
.close {
color: white;
position: absolute;
top: 10px;
right: 25px;
font-size: 35px;
font-weight: bold;
}
.close:hover,
.close:focus {
color: #999;
text-decoration: none;
cursor: pointer;
}
/* Hide the slides by default */
.mySlides {
display: none;
background-color: #6B705C;
}
/* Next & previous buttons */
.prev,
.next {
cursor: pointer;
position: absolute;
top: 50%;
width: auto;
padding: 16px;
margin-top: -50px;
color: #000000;
font-weight: bold;
font-size: 20px;
transition: 0.6s ease;
border-radius: 0 3px 3px 0;
user-select: none;
-webkit-user-select: none;
}
/* Position the "next button" to the right */
.next {
right: 0;
border-radius: 3px 0 0 3px;
}
/* On hover, add a black background color with a little bit see-through */
.prev:hover,
.next:hover {
background-color: #FFE8D6;
}
/* Number text (1/3 etc) */
.numbertext {
color: #f2f2f2;
font-size: 12px;
padding: 8px 12px;
position: absolute;
top: 0;
}
/* Caption text */
.caption-container {
text-align: center;
background-color: #6B705C;
padding: 2px 16px;
color: white;
}
img.demo {
opacity: 0.6;
width: 40%;
}
.active,
.demo:hover {
opacity: 1;
}
img.hover-shadow {
transition: 0.3s;
}
.hover-shadow:hover {
box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);
}
.pimg {
width: 50%;
display: block;
margin-left: auto;
margin-right: auto;
width: 70%;
margin-top: -20px;
}
.csimg {
width: 80%;
display: block;
position: static;
display: block;
margin-left: auto;
margin-right: auto;
margin-top: 10px;
}
.pimgl {
display: block;
margin-left: auto;
margin-right: auto;
margin-top: -20px;
height: auto;
width: 30%;
}
Thats not all... when I inspect through chrome for iPhone X it appears correctly and so for desktop as well. I'm using dreamweaver and when I choose to view directly from my device is where I see the problem. Image is directly from mobile device. Also wanting to move it a little out the corner, but nothing. Please help! [1]: https://i.stack.imgur.com/pzbyL.jpg
.sidenav {
height:50%;
width: 0%;
position: absolute;
z-index: 1;
bottom: 0;
left: 0;
background-color: #111;
overflow-x: hidden;
transition: 0.5s;
padding-top: 40px;
}
.sidenav a {
padding: 50px 8px 8px 60px;
text-decoration: none;
font-size: 25px;
color: #818181;
display: block;
transition: 0.3s;
}
.sidenav a:hover {
color: #f1f1f1;
}
.sidenav .closebtn {
position: absolute;
bottom: 0;
right: 25px;
font-size: 36px;
margin-left: 50px;
}
#button .span{
margin:auto;
padding-top: 2em;
padding-bottom: 5em;
left:0;
}
<div id="button">
<span style="font-size:30px;cursor:pointer" onclick="openNav()">menu</span>
</div>
<div id="mySidenav" class="sidenav">
×
About
Book
Portfolio
</div>
<script>
function openNav() {
document.getElementById("mySidenav").style.width = "250px";
}
function closeNav() {
document.getElementById("mySidenav").style.width = "0";
}
</script>
I'm having issues making the hamburger icon be on top of the banner image. I've tried adjusting the z-index, setting the nav background-color to transparent, and placing the background image in the header instead of the banner section. I don't know what other steps to take. Any advice would be greatly appreciated.
function openNav() {
document.getElementById("main-nav").style.height = "100%";
}
function closeNav() {
document.getElementById("main-nav").style.height = "0%";
}
/*Nav*/
header {
background-color: transparent;
}
.overlay {
height: 0%;
width: 100%;
position: fixed;
z-index: 1;
top: 0;
left: 0;
background-color: #567E3A;
overflow-y: hidden;
transition: 0.5s;
}
.overlay-content {
position: relative;
top: 25%;
width: 100%;
text-align: center;
margin-top: 30px;
}
.overlay a {
padding: 8px;
text-decoration: none;
font-size: 36px;
color: #fff;
display: block;
transition: 0.3s;
}
.overlay a:hover,
.overlay a:focus {
color: #7F8C8D;
}
.overlay .closebtn {
position: absolute;
top: 20px;
right: 45px;
font-size: 60px;
}
.burger {
font-size: 2em;
cursor: pointer;
}
/*Banner*/
#banner {
background-image: url("http://res.cloudinary.com/dboauovcs/image/upload/c_scale,w_2000/v1521182602/camp3_xhp0d9.jpg");
background-repeat: no-repeat;
background-size: cover;
background-position: center;
height: 100vh;
width: 100%;
display: grid;
}
.banner-text {
margin: auto;
text-align: center;
color: #fff;
}
.banner-text h1 {
margin: 2em 1.4em 1.4em 1.4em;
font-size: 2em;
line-height: 1.8;
color: #fff;
text-shadow: 3px 3px #000;
}
<header>
<nav id="main-nav" class="overlay">
×
<div class="overlay-content">
Destinations
Accomidation
Stories
Contact
</div>
</nav>
<span class="burger" onclick="openNav()">☰</span>
</header>
<section id="banner">
<div class="banner-text">
<h1>Lorem Lipsum</h1>
Book Today
</div>
</section>
Like this?
function openNav() {
document.getElementById("main-nav").style.height = "100%";
}
function closeNav() {
document.getElementById("main-nav").style.height = "0%";
}
/*Nav*/
header {
background-color: transparent;
}
.overlay {
height: 0%;
width: 100%;
position: fixed;
z-index: 1;
top: 0;
left: 0;
background-color: #567E3A;
overflow-y: hidden;
transition: 0.5s;
}
.overlay-content {
position: relative;
top: 25%;
width: 100%;
text-align: center;
margin-top: 30px;
}
.overlay a {
padding: 8px;
text-decoration: none;
font-size: 36px;
color: #fff;
display: block;
transition: 0.3s;
}
.overlay a:hover,
.overlay a:focus {
color: #7F8C8D;
}
.overlay .closebtn {
position: absolute;
top: 20px;
right: 45px;
font-size: 60px;
}
.burger {
font-size: 2em;
cursor: pointer;
position: absolute;
}
/*Banner*/
#banner {
background-image: url("http://res.cloudinary.com/dboauovcs/image/upload/c_scale,w_2000/v1521182602/camp3_xhp0d9.jpg");
background-repeat: no-repeat;
background-size: cover;
background-position: center;
height: 100vh;
width: 100%;
display: grid;
}
.banner-text {
margin: auto;
text-align: center;
color: #fff;
}
.banner-text h1 {
margin: 2em 1.4em 1.4em 1.4em;
font-size: 2em;
line-height: 1.8;
color: #fff;
text-shadow: 3px 3px #000;
}
<header>
<nav id="main-nav" class="overlay">
×
<div class="overlay-content">
Destinations
Accomidation
Stories
Contact
</div>
</nav>
<span class="burger" onclick="openNav()">☰</span>
</header>
<section id="banner">
<div class="banner-text">
<h1>Lorem Lipsum</h1>
Book Today
</div>
</section>
A little explanation on what I've done here (presuming this is the treatment you are looking for): By positioning the hamburger as absolute, we pull it completely out of the static layout flow, so other elements ignore its existence when positioning. The element's location can then be controlled with left, right, top and bottom, and will position itself relative to the first ancestor element positioned absolutely, or the body if no element is positioned absolutely. You'll probably want to consider dialing in the positioning a bit with these attributes, as you might not want to rely on the browser to calculate its position with defaults.
function openNav() {
document.getElementById("main-nav").style.height = "100%";
}
function closeNav() {
document.getElementById("main-nav").style.height = "0%";
}
/*Nav*/
header {
background-color: transparent;
position: absolute;
}
.overlay {
height: 0%;
width: 100%;
position: fixed;
z-index: 1;
top: 0;
left: 0;
background-color: #567E3A;
overflow-y: hidden;
transition: 0.5s;
}
.overlay-content {
position: relative;
top: 25%;
width: 100%;
text-align: center;
margin-top: 30px;
}
.overlay a {
padding: 8px;
text-decoration: none;
font-size: 36px;
color: #fff;
display: block;
transition: 0.3s;
}
.overlay a:hover,
.overlay a:focus {
color: #7F8C8D;
}
.overlay .closebtn {
position: absolute;
top: 20px;
right: 45px;
font-size: 60px;
}
.burger {
font-size: 2em;
cursor: pointer;
}
/*Banner*/
#banner {
background-image: url("http://res.cloudinary.com/dboauovcs/image/upload/c_scale,w_2000/v1521182602/camp3_xhp0d9.jpg");
background-repeat: no-repeat;
background-size: cover;
background-position: center;
height: 100vh;
width: 100%;
display: grid;
}
.banner-text {
margin: auto;
text-align: center;
color: #fff;
}
.banner-text h1 {
margin: 2em 1.4em 1.4em 1.4em;
font-size: 2em;
line-height: 1.8;
color: #fff;
text-shadow: 3px 3px #000;
}
<header>
<nav id="main-nav" class="overlay">
×
<div class="overlay-content">
Destinations
Accomidation
Stories
Contact
</div>
</nav>
<span class="burger" onclick="openNav()">☰</span>
</header>
<section id="banner">
<div class="banner-text">
<h1>Lorem Lipsum</h1>
Book Today
</div>
</section>
Hi guys I'm trying to make navigation that is fixed in top right corner comes from right side of the screen (right to left animation). Now using example from w3school I was able to come up with the following code:
HTML:
<div id="mySidenav" class="sidenav">
×
About
Services
Clients
Contact
</div>
<span style="font-size:30px;cursor:pointer" onclick="openNav()">☰</span>
SCSS:
#mySidenav {
height: 100%;
width: 0;
position: fixed;
z-index: 1;
top: 0;
left: 0;
background-color: #111;
overflow-x: hidden;
padding-top: 60px;
transition: 0.5s;
a {
padding: 8px 8px 8px 32px;
text-decoration: none;
font-size: 25px;
color: #818181;
display: block;
transition: 0.3s
}
a:hover, .offcanvas a:focus{
color: #f1f1f1;
}
.closebtn {
position: absolute;
top: 0;
right: 25px;
font-size: 55px;
margin-left: 50px;
}
JS:
function openNav() {
document.getElementById('mySidenav').style.width = '300px';
}
function closeNav() {
document.getElementById('mySidenav').style.width = '0';
}
Now the code works fine that not my issue. I would like make my sidenav fixed in top right corner with animation from right to left, every try I made has been and utter failure. So my question is it possible to do this and how would you guys do it ????
Here is the link to the codepen I made so you can see the code in action https://codepen.io/Karadjordje/pen/MpKvXp
Change left: 0; to right: 0;.
Working example:
function openNav() {
document.getElementById('mySidenav').style.width = '300px';
}
function closeNav() {
document.getElementById('mySidenav').style.width = '0';
}
.hamburger {
font-size: 30px;
cursor: pointer;
top: 20px;
right: 20px;
position: fixed;
}
#mySidenav {
height: 100%;
width: 0;
position: fixed;
z-index: 1;
top: 0;
right: 0;
background-color: #111;
overflow-x: hidden;
padding-top: 60px;
transition: 0.5s;
}
#mySidenav a {
padding: 8px 8px 8px 32px;
text-decoration: none;
font-size: 25px;
color: #818181;
display: block;
transition: 0.3s
}
#mySidenav a:hover,
#mySidenav .offcanvas a:focus {
color: #f1f1f1;
}
#mySidenav .closebtn {
position: absolute;
top: 0;
right: 25px;
font-size: 55px;
margin-left: 50px;
}
body {
height: 200em;
position: relative;
}
<div id="mySidenav" class="sidenav">
×
About
Services
Clients
Contact
</div>
<span class="hamburger" onclick="openNav()">☰</span>
I have got the following html and css. The problem is when it is run the full screen menu only appears in the nav bar. The problem only appears when using safari.
I can solve the problem my getting rid of
.nav {
position: fixed;
}
but I still want the nav bar to be fixed at the top of the page.
.nav {
font-family: Arial-BoldMT;
font-size: 16px;
list-style: none;
text-align: right;
padding: 0px 0 0px 0;
box-shadow:0px 1px 1px #d3d3d3;
background-color: white;
width: 100%;
z-index:0.1;
overflow: auto;
position: fixed;
top: 0;
}
.nav p {
float: left;
margin-left: 40px;
color: #333333;
}
.overlay {
height: 100%;
width: 0;
position: fixed;
z-index: 1;
top: 0;
left: 0;
background-color: rgb(0,0,0);
background-color: rgba(0,0,0, 0.9);
overflow-x: hidden;
transition: 0.5s;
}
.overlay-content {
position: relative;
top: 25%;
width: 100%;
text-align: center;
margin-top: 30px;
}
.overlay a {
padding: 8px;
text-decoration: none;
font-size: 36px;
color: #818181;
display: block;
transition: 0.3s;
}
.overlay a:hover, .overlay a:focus {
color: #f1f1f1;
}
.overlay .closebtn {
position: absolute;
top: 20px;
right: 45px;
font-size: 60px;
}
.slider {
font-size:30px;
cursor:pointer;
float:right;
margin-right: 40px;
}
#media screen and (max-height: 450px) {
.overlay a {font-size: 20px}
.overlay .closebtn {
font-size: 40px;
top: 15px;
right: 35px;
}
}
<div class="nav">
<p>LIAM VINSON</p>
<div id="myNav" class="overlay">
×
<div class="overlay-content">
HOME
ABOUT
PHOTOGRAPHY
PORTFOLIO
CONTACT
</div>
</div>
<span class="slider" onclick="openNav()">☰</span>
<script>
function openNav() {
document.getElementById("myNav").style.width = "100%";
}
function closeNav() {
document.getElementById("myNav").style.width = "0%";
}
</script>
</div>
z-index:0.1;
is not valid css.
z-index must be an integer - either negative or positive. Chances are most browsers are just treating it as 0, but Safari don't know what to do with it. So, change it to an integer like
z-index:1;
and set your overlay to z-index:2 (though I would recommend spacing these numbers out in case you have to index additional elements. ie. z-index:100; and z-index:200;)
Setting it as fixed, with top at 0, should fix it to the top of page for you once you correct that z-index issue you got there.
The problem was
.nav {
overflow: auto;
}
It stopped the overlay from being shown outside of the nav div.