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.
Related
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>
So basically I am using Font named merkur from dafont.com and i downloaded it and added it to my files. afterward font showed up but something weird happen. The text on top of my video became weird but when I looked at the font not on top of the video, the font was just fine. Whats happening and how can i fix this
I have already checked if it was the centering that messed up, or if it was the font size that messes it up.
<div class="bgsection">
<div class="video-container">
<video autoplay loop muted>
<source src="BGVIDEO.mp4" type="video/mp4">
</video>
</div>
<div class="color-overlay"></div>
<nav class="navbar">
<div class="nav-container">
<div class="nav-logo">
<img class="logo" src="\Ahmed,Shahriyar\2019-2020\Computer-Science-3\Assignments\01-Project-Portfolio\3-Logos-and-Layout\Logo1.png" width="150" height="70">
<span class="open-slide">
<a href="#" onclick="openNav()">
<svg width="30" height="40">
<path d="M0,8 40,5" stroke="black" stroke-width="6"/>
<path d="M0,17 040,14" stroke="black" stroke-width="6"/>
<path d="M0,26 40,23" stroke="black" stroke-width="6"/>
</svg>
</a>
</span>
</div>
</div>
<div id="mySidebar" class="sidebar">
×
Home
Portfolio
About
Contact
</div>
</nav>
<div class="text-overlay" >
<h1>KS DESIGNS</h1>
</div>
</div>
<center>KS DESIGN KS DESIGN KS DESIGN KS DESIGN KS DESIGNS </center>
<script>
function openNav() {
document.getElementById("mySidebar").style.width = "450px";
document.getElementById("main").style.marginright = "450px";
}
function closeNav() {
document.getElementById("mySidebar").style.width = "0";
document.getElementById("main").style.marginright= "0";
}
// Show loading animation.
var playPromise = audio.play();
if (playPromise !== undefined) {
playPromise.then(_ => {
// Automatic playback started!
// Show playing UI.
})
.catch(error => {
// Auto-play was prevented
// Show paused UI.
});
}
</script>
CSS
#font-face {
src: url("Merkur.ttf");
font-family: Merkur;
}
body {
font-family: "Merkur";
margin: 0px;
overflow-x:hidden;
font-size: 72px;
}
ul {
list-style-type: inline;
margin: 0;
padding: 0;
overflow: hidden;
background: -webkit-linear-gradient(left, #00d2e9 0%,#045962 100%);
position: -webkit-sticky; /* Safari */
position: sticky;
top: 0;
wth: 100%;
z-index: 99;
}
li {
float: left;
margin-right: 80px;
font-size: 30px;
}
li a {
display: block;
color: black;
text-align: center;
padding: 14px 16px;
text-decoration: none ;
}
li a:hover {
background-color: #000000;
color: white;
}
.sidebar {
height: 100%;
width: 0;
position: fixed;
z-index: 1;
top: 0;
right: 0;
background-color: #111;
overflow-x: hidden;
transition: 0.5s;
padding-top: 60px;
opacity: 0.9;
text-align: center;
}
.sidebar a {
padding: 50px 8px 8px 32px;
text-decoration: none;
font-size: 50px;
color: white;
display: block;
transition: 0.3s;
}
.sidebar a:hover {
color: #a38313;
}
.sidebar .closebtn {
position: absolute;
top: 0;
right: -25px;
font-size: 36px;
margin-right: 50px;
}
.openbtn {
font-size: 20px;
cursor: pointer;
background-color: #111;
color: white;
padding: 10px 15px;
border: none;
}
.openbtn:hover {
background-color: #444;
}
#main {
transition: margin-right .5s;
padding: 16px;
}
/* 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) {
.sidebar {padding-top: 15px;}
.sidebar a {font-size: 18px;}
}
.navbar{
background-color: #f6c399;
margin: 0px;
padding: 0px;
z-index: 2;
top: 0;
width: 100%;
}
.logo{
margin: 0px;
}
.video-container {
position: absolute;
top: 0;
left: 0;
width: 100%;
z-index: -1;
}
.bgsection {
position: relative;
width: 100%;
height: 100vh;
display: flex;
overflow: hidden;
}
.bgsection nav{
height: 80px;
}
.video-container video{
min-width: 100%;
min-height: 100%;
}
.color-overlay{
height:100vh;
position: absolute;
top:0;
left:0;
width:100vw;
z-index:1;
background-image: linear-gradient(#a38313, black);
opacity:0.55;
}
.open-slide{
margin-top: 25px;
right: 20px;
position: absolute;
}
.text-overlay{
align-self: center;
text-align: center;
width: 100%;
z-index: 2;
position: absolute;
font-size: 72px;
color: black;
}
Low reputation so can't add a comment
My debug suggestion :
I'm familiar with Chrome, so I suggest opening the developer tools, selecting the header text and using the properties window to find how the font-family is being set. A possible issue might be <h1> being set to a different font family by some other css
You could improve your question by creating a jsfiddle or pen that shows what is happening
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.
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 got a little slider with a black background with
opacity: 0.6
This is an external index.html (with a CSS, JS and img folder).
I'd like to open that index.html when i hit a link on an external page. So the page is just covered with that black overlay and the slider.
Do I have to do this with an iframe, which fades in? So like:
$(document).ready(function () {
$('#mylink a').click(function(){
var iframeSrc = $(this).attr('href');
$('#myiFrame').fadeOut(1000,function(){
$('#myiFrame iframe').attr('src',iframeSrc);
$('#myiFrame').fadeIn(1000);
});
return false;
});
});
Or is there any easier solution? The little problem is that I have to be able to write the text in a HTML-editor only, because where I got that link to open the slider is in a CMS with a HTML-Editor.
If I got u correctly-
function openNav() {
document.getElementById("myNav").style.width = "100%";
}
function closeNav() {
document.getElementById("myNav").style.width = "0%";
}
body {
margin: 0;
font-family: 'Lato', sans-serif;
}
.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;
}
#media screen and (max-height: 450px) {
.overlay a {font-size: 20px}
.overlay .closebtn {
font-size: 40px;
top: 15px;
right: 35px;
}
}
<div id="myNav" class="overlay">
×
<div class="overlay-content">
<iframe src="http://www.w3schools.com/"></iframe>
</div>
</div>
<span style="font-size:30px;cursor:pointer" onclick="openNav()">☰ open</span>